rinetd ClickHouse Jmeter 数据算法 反射 centos8 magento dom lambda signalr NEJ admin框架 jquery遍历元素 查看mysql是否启动 kali重启网卡 python爬虫包 pythonlist python的extend python变量定义 java环境 java怎么安装 java将数据写入文件 javasocket java包名 java绝对值 java项目下载 脚本之家 java分布式开发 手机照片恢复免费软件 pr滤镜插件 思源黑体cn win10环境变量 x64dbg 华为ff ps出血 linux安卓模拟器 java表白代码 绘图软件下载 粉碎文件工具 欧洲卡车模拟2存档
当前位置: 首页 > 学习教程  > 编程语言

微信小程序基础语法

2020/10/16 17:58:08 文章标签:

微信小程序基础语法配置文件 app.json的配置(全局) { // 用来配置页面的路径 “pages”:[ “pages/index/index”, // 首页 “pages/Test/Test” // 跳转的页面 ], “window”:{ “enablePullDownRefresh”: true, // 是否支持下拉刷新 “backgroundTextStyle”:“dark”, //…

微信小程序基础语法

配置文件

app.json的配置(全局)

{
// 用来配置页面的路径
“pages”:[
“pages/index/index”, // 首页
“pages/Test/Test” // 跳转的页面
],
“window”:{
“enablePullDownRefresh”: true, // 是否支持下拉刷新
“backgroundTextStyle”:“dark”, // 下拉刷新的字体颜色,支持light
“backgroundColor”: “#e04c4c”, // 设置下拉刷新的背景颜色
“navigationBarBackgroundColor”: “#fff”, // 设置微信程序顶部导航栏颜色
“navigationBarTitleText”: “yejiawei”, // 顶部导航栏文字
“navigationBarTextStyle”:“black” // 顶部导航栏文字样式,black或者white
“onReachBottomDistance”: 50 // 设置上拉事件触发时距离底部的位置
},
“tabBar”: { // 设置tab切换栏的配置
“list”: [
{
“pagePath”: “pages/index/index”, // 跳转的路径
“text”: “首页”, // tab的文字
“iconPath”: “/images/t1.jpg” // 设置背景图路径
},
{
“pagePath”: “pages/Test/Test”,
“text”: “测试”,
“selectedIconPath”: “/images/t1.jpg” // 设置选中时图片的路径
}
],
“color”: “#e04c4c”, // 设置tab按钮字体颜色
“selectedColor”: “#000”, // 设置按钮选中的颜色
“backgroundColor”: “#1aad16”, // 设置tab按钮的背景颜色
“borderStyle”: “black”, // 设置tabbar边框颜色,只支持black/white
“position”: “top” // 设置tabbar的位置,设置为top无法显示图片
},
“networkTimeout”: {
“request”: 10000, // request请求的超时时间
“connectSocket”: 10000, // connectSocket的超时时间
“downloadFile”: 10000, // 下载文件的超时时间
“uploadFile”: 1000 // 上传文件的超时时间
},
“debug”: true // 开启debug模式,在控制台输出程序信息
}
page.json的配置(页面)

设置的配置用来覆盖app.json中的window配置
{
“navigationBarBackgroundColor”: “#ffffff”, // 设置微信程序顶部导航栏颜色
“navigationBarTextStyle”: “black”, // 顶部导航栏文字样式,black或者white
“navigationBarTitleText”: “微信接口功能演示”, // 顶部导航栏文字
“backgroundColor”: “#eeeeee”, // 设置下拉刷新的背景颜色
“backgroundTextStyle”: “light”, // 下拉刷新的字体颜色,支持light
“enablePullDownRefresh”: true, // 是否支持下拉刷新
“disableScroll”: true, // 是否支持滚动
“onReachBottomDistance”: 50 // 设置上拉事件触发时距离底部的位置
}
程序入口函数(App)

App({
onLaunch: function (options) {
// 程序加载调用
},
onShow: function (options) {
// 从后台进入前台调用,默认程序第一次加载回调用
},
onHide: function () {
// 从前台切换到后台调用
},
onError: function (msg) {
// 程序报错调用
},
myFunc: function() {
// 自定义函数
},
globalData: {
// 全局自定义数据
userInfo: “yejiawei”
}
})
上面的onLaunch和onShow方法都有options参数,options参数里面有如下属性
{
path: “pages/index/index” // 程序打开的路径
query: {}, // 当调用wx.navigateTo可以传递query
scene: 1001, // 打开小程序的场景值
referrerInfo: { // 从其他程序中进入到此程序,会返回此字段
appId: …, // 其他程序的appId
extraData: … // 其他程序传递过来的数据
}
}
可以使用 var app = getApp(); 来获取小程序实例,console.log(app.globalData.userInfo)
页面的入口函数(Page)

Page({
data: {
msg: “haha” // 页面的状态
},
onLoad: function(options) { // 页面加载完毕触发 },
onReady: function() { // 页面渲染完毕触发 },
onShow: function() { // 页面开始渲染触发 },
onHide: function() { // 页面切换到后台触发 },
onUnload: function() { // 页面卸载触发 },
onPullDownRefresh: function() { // 页面下拉刷新触发},
onReachBottom: function() { // 页面上滑触底触发 },
onShareAppMessage: function () {
// 页面点击转发触发,需要return一个object,只有定义了此方法,才会有转发的功能
return {
title: “分享的页面”, // 分享页面的标题
path: “/pages/logs/logs” // 分享的页面的路径
}
},
onPageScroll: function(options) { // 页面滚动触发 },
myFn: function() { // 自定义函数
console.log(this.route); // 获取当前页面的路径
this.setData({ // 修改状态
msg: “haha”
}, function() {
// 状态修改完,调用此方法
})
console.log(getCurrentPages()); // 获取当前页面栈实例
}
customData: { // 自定义属性 }
})
页面路由

方法wx.navigateTo(object) 跳转到指定的页面,无法跳转到tabbar页面(当前页保留)
wx.navigateTo({
url: ‘/pages/logs/logs?id=1‘, // 页面路劲,可以传递query参数
success: function() { // 导航成功执行
console.log(“跳转成功”);
},
fail: function() { // 导航失败执行
console.log(“跳转失败”);
},
complete: function() { // 导航完成调用
console.log(“导航结束”);
}
})
方法wx.navigateBack(object) 返回到之前的页面
wx.navigateBack({
delta: 2 // 后退2步
})
方法wx.redirectTo(object) 销毁当前页面,跳转到指定的页面,不能跳转到tabbar页面
使用方法和navigateTo一样
方法wx.reLaunch(object) 销毁所有页面,跳转到任意指定的页面
使用方法和navigateTo一样
方法wx.switchTab(object) 跳转到tabbar页面
使用方法和navigateTo一样
模块化

js文件可以使用exports和module.exports暴露接口
exports是module.exports的一个引用
function fn () {
console.log(“导入的方法执行了”);
}
exports.fn = fn;
使用文件中的方法
var common = require(‘…/common.js‘);
common.fn();
WXML文件细节

状态绑定

变量使用双大括号包裹 <view>{{msg}}</view>
标签的属性使用双引号包裹 <view id="item"></view>
双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号
绑定对象,不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>
列表遍历

<view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">
{{index}}: {{item}}
</view>
给index和item取别名
<view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">
{{myIndex}}: {{myItem}}
</view>
渲染多节点代码块
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
遍历字符串
<view wx:for="array">
{{item}}
</view>
绑定key,当组件重排后根据id可以复用组件和组件的状态
<block wx:for="{{[1, 2, 3]}}" wx:key="this"> // 当item是字符串或者数字可以使用this代表item作为key
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
条件渲染

<view wx:if="{{false}}">haha</view>
<view wx:elif="{{true}}">haha1</view>
<view wx:else="{{false}}">haha2</view>
同样也可以使用block来控制多节点代码块


模板

声明一个模板
<template name="mytemplate">
<view>
{{a}}: {{b}}
</view>
</template>
使用此模板 obj: { a: 1, b: 2 }
<template is="mytemplate" data="{{...obj}}"></template>
事件

使用bindtap绑定事件 <view bindtap="fn" data-my-data="222"></view>
事件对象
myFn: function(event) {
console.log(event);
// 使用data开头的自定义属性,将保存再event.currentTarget.dataset中
}

事件分类
冒泡事件
touchstart 开始触摸
touchmove 触摸移动
touchcancel 触摸打断
touchend 触摸离开
tap 瞬间触摸
longpress 超过350ms的触摸
transitionend 过渡结束
animationstart 动画开始
animationiteration 动画执行一遍后触发
animationend 动画结束触发
非冒泡事件,除了上述事件以外都是非冒泡事件
绑定事件
可以使用bind和catch绑定
bindtap或者bind:tap 不阻止冒泡
catchtap或者catch:tap 阻止冒泡
在WXML文件中导入其他WXML文件

可以将上面讲的template代码,放到一个单独的wxml文件中,然后在当前文件中使用 导入,就可以立即使用了
而的作用,是将除了template和wxs以外的代码,都拷贝到include所在的位置
wxs的使用(代码可以单独写在wxs文件中,也可以写在wxs标签中)

模块

wxs的作用其实和js文件的作用是一样的,只不过提供了另外一种方式来写js
外界要访问wxs中定义的代码需要使用module.exports导出
创建一个wxs文件,定义如下代码
var message = “你好吗?”;
module.exports.message = message;
在wxml文件中使用
首先使用wxs标签导入
使用 {{wxsData.message}}
在其他wxs文件中使用
var wxsData = require("…/common.wxs");
WXSS文件

尺寸单位使用rpx,一个rpx就代表一个物理像素
导入其他WXSS文件 @import “…/common.wxss”;
自定义组件(和vue里面的组件类似)

创建自定义组件的步骤

第一步,修改json
修改json文件为 { “component”: true }
第二部,WXML文件书写
{{text}}

slot就是插槽,和vue的一样
第三步,WXSS中书写
.demo{ color: red; }
只能使用类选择器
第四部,js文件中写
Component({
properties: {
// 组件的属性,可以指定类型和默认值,和vue的props验证很像
text: {
type: String,
value: ‘默认值‘,
}
},
data: {
// 组件的状态
someData: {}
},
methods: {
// 组件的自定义方法
customMethod: function () { }
}
})
第五步,使用组件
在要使用此自定义组件的page中,修改他的json,插入如下字段
“usingComponents”: {
“my-component”: “…/myComponent/myComponent”
}
在page组件中使用 即可
同时可以使用 传递属性值给组件内部
WXML文件的细节

写法和一般的WXML文件写法一致,不过多了slot
没有名字的slot只能有一个,如果要使用多个slot,需要操作如下几步
第一步,在js中的Component函数中,添加如下
options: {
multipleSlots: true
},
第二步,在WXML中写多个带名字的slot
{{text}}


第三步,在页面中使用

我是a
我是b

WXSS文件的细节

只能使用类选择器
可以继承组件外的样式
app.wxss文件中定义的样式,对组件无效
另外可以使用:host来定义组件标签的样式
:host{ color: black; }
js文件的细节

Component函数的使用如下
Component({
properties: { // 设置组件接受的属性
myProperty1: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: ‘‘, // 属性初始值(可选),如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){ // 监听属性值改变的函数 }
},
myProperty2: String // 简化的定义方式
},
data: {}, // 组件状态
methods: { // 设置方法
onMyButtonTap: function(){
console.log(this.id); // 组件标签的id
console.log(this.dataset); // 组件的data自定义属性集合
console.log(this.data); // 组件的属性和状态的集合
console.log(this.hasBehavior()) // 组件是否有behavior属性
this.setData({}) // 属性和状态都可以设置
/*
可以手动触发组件的自定义事件,比如,组件上绑定了一个自定义事件

要手动触发myEvent,需要调用
this.triggerEvent(‘myEvent‘, {
// 事件参数
}, {
bubbles: true, // 是否冒泡
composed: true, // 到父组件内部寻找同名事件
capturePhase: true // 是否捕获
}
);
/
}
},
created: function(){}, // 组件在内存中创建完毕执行
attached: function(){}, // 组件挂载之前执行
ready: function() {}, // 组件挂载后执行
detached: function(){}, // 组件移除执行
moved: function(){}, // 组件移动的时候执行
relations: {
/
嵌套的组件需要相互关联就要使用此字段
相同嵌套子节点的处理方式
假设嵌套的html结构如下

item 1
item 2

则custom-li组件中需要定义如下的relations
‘./custom-ul‘: { // 嵌套父组件的路径
type: ‘parent‘, // 关联的目标节点应为父节点
linked: function(target) { }, // custom-li插入到custom-ul时执行,target是custom-ul
linkChanged: function(target) { }, // custom-li被移动后执行,target是custom-ul
unlinked: function(target) { } // custom-li被移除时执行,target是custom-ul
}
在custom-ul组件中也要定义此字段,只不过反过来 type 改成 child
不同嵌套子节点的处理方式

item 1
item 2

此时就要使用behavior作为公共的节点路径了,假设custom-span和custom-div都有一个名为customFormControls的behavior
custom-span和custom-div内部定义relations的方式和之前一样,只不过将type改成ancestor
custom-div中定义
‘customFormControls‘: {
type: ‘descendant‘, // 关联的目标节点应为子孙节点
target: customFormControls
}
/
},
behaviors: [
/
behaviors的作用就是用来创建一个公用的组件js,内部代码和Component一模一样
Behavior({ //… })
主要用来和当前的Component代码合并,同名的属性以当前组件的为主
*/
]
})
按需加载

实现按需加载的步骤如下
主包中应只包含tabbar
第一步,在项目根目录下创建分包的文件夹,将分包的page写在里面
第二步,在app.json中添加如下配置
“subPackages”: [
{
“root”: “package1”, // 分包文件夹根路径
“pages”: [ // 分包中包含的路径,不能添加到app.json的page中
“pages/Demo/Demo”
]
}
]
在tabbar配置项中,不能应用分包的页面
第三步,使用分包文件
在tabbar的页面中,引用分包页
wx.navigateTo({
url: ‘…/…/package1/pages/Demo/Demo‘
})


本文链接: http://www.dtmao.cc/news_show_300229.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?