学习目标
- 小程序生命周期
- wxml数据渲染，列表渲染， 条件渲染
- 组件事件绑定 (bindtap, bindinput)
- 修改this.data的值
- Page中的页面事件
- 判断场景值
生命周期
生命周期有程序的生命周期和页面的生命周期
程序的生命周期
文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
在程序入口app.js中调用App(), 而且必须调用且只能调用一次，然后再App()的参数中可以声明生命周期函数
前台，后台的概念
- 前台：打开微信就进入小程序前台
- 后台：当用户点击右上角关闭，或者按了设备 Home 键离开微信，此时小程序并没有直接销毁，而是进入了后台；
常用的生命周期：
| 属性 | 描述 | 触发时机 |
|---|---|---|
| onLaunch | 监听小程序初始化 | 小程序初始化完成时（全局只触发一次） |
| onShow | 监听小程序显示 | 小程序启动，或从后台进入前台显示时 |
| onHide | 监听小程序隐藏 | 小程序从前台进入后台时 |
注意：小程序的运行机制
- 小程序没有重启的概念
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
页面的生命周期
页面需要通过Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
常用的生命周期：
| 属性 | 描述 |
|---|---|
| onLoad | 监听页面加载 |
| onShow | 监听页面显示 |
| onReady | 监听页面初次渲染完成 |
| onHide | 监听页面隐藏 |
onLoad
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
参数说明, 通过query获取当前页面路径中的参数
| 名称 | 类型 | 说明 |
|---|---|---|
| query | Object | 打开当前页面路径中的参数 |
注意：页面需要访问api接口来初始化页面， 都可以在onLoad中调用
总结：
- 程序的生命周期: app.js中onLaunch在小程序初始化中触发
- 页面的生命周期: onLoad 只在页面加载的时候执行一次, onShow每次访问页面都会执行, 通常onLoad在onShow之前执行
wxml数据绑定，列表渲染，条件渲染
wxml数据绑定
基本概念
WXML 中的动态数据均来自对应 Page 的 data。
使用方法
数据绑定在wxml模板中使用 双大括号 {{}} 将变量包起来
在组件属性中绑定数据
在组件的属性中绑定数据需要在双引号中使用大括号
// js
Page({
data: {
id: "index"
}
})
// wxml
在组件属性中绑定布尔值
布尔值关键字,需要在双引号中使用大括号
注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
在大括号内运算
// 数字相加
{{1 + 2}}
// 字符串相加
{{"hello" + name}}
列表渲染
重点概念
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
基本使用
// wxml
{{index}}: {{item.message}}
// js
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
wx:key的使用
如不提供 wx:key，会报一个 warning，循环数组可以把key设置为下标
// wxml
{{index}}: {{item.message}}
for循环嵌套
当for循环嵌套时候，会造成index和item冲突，这时候需要用到以下两个属性：
- 使用
wx:for-item可以指定数组当前元素的变量名， - 使用
wx:for-index可以指定数组当前下标的变量名
例子：
{{subIndex}}: {{subItem.message}}
条件渲染
基本概念
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
True
wx:elif和wx:else
可以用 wx:elif 和 wx:else 来添加一个 else 块：
1
2
3
总结
- WXML 中的动态数据均来自对应 Page 的 data
- WXML 大括号内可以进行运算
- wx:for下标变量名默认为 index，数组当前项的默认为 item
- wx:for需要加上wx:key， 否则报警告
- 无论是数据绑定、循环渲染和条件渲染，都必须使用大括号
事件绑定
- 点击事件 bindtap
- 表单input监听输入事件 bindinput
点击事件 bindtap
bindtap类似于html的onClick事件
Click me!
事件对象event
Page({
tabClick: function(event) {
console.log(event)
}
})
获取事件参数
通过data-*给组件绑定需要的参数，然后再绑定的事件中通过事件对象event.currentTarget.dataset 可以读取参数
参考例子:
// wxml
Click me!
// js
Page({
tabClick: function(event) {
const data = event.currentTarget.dataset;
console.log(data)
console.log(data.name)
}
})
input监听输入事件 bindinput
bindinput类似于html的oninput事件
bindinput的event事件对象
键盘输入时触发，可以通过访问event.detail.value获取input的value
// wxml
// js
Page({
bindKeyInput: function(event) {
console.log(event.detail);
console.log(event.detail.value);
},
})
注意： 小程序所有的事件获取参数都是上例的bindtap中的一样，通过data-*来绑定
总结
- bindtap类似于html的onClick事件， 普通的点击事件
- bindinput类似于html的oninput事件， 可以通过event
- 获取input的值
修改page中data的值
使用this.setData修改data的值
基本使用
// wxml
{{text}}
// js
Page({
data: {
text: '默认的文字',
},
changeText: function() {
// 错误使用： this.data.text = '修改后的文字'
this.setData({
text: '修改后的文字'
})
},
}
this指向问题
注意在某个闭包中使用时候导致this没有指向当前的page，需要先声明this的变量，供闭包内部使用
Page({
data: {
text: "默认的文字"
},
changeText: function(){
const that = this;
setTimeout(function(){
that.setData({
text: "修改后的文字"
})
},2000)
}
})
注意：
- 切记不要使用this.data.* = ""的方式修改data的值，一定要是this.setData
- 请不要把 data 中属性的值设为 undefined
小程序页面事件
监听用户下拉刷新事件
文档的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage
Page中设置onPullDownRefresh函数
Page({
onPullDownRefresh: function(){
console.log("下拉刷新")
}
})
注意：需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
监听用户上拉触底事件
文档的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage
Page中设置onReachBottom函数
// wxml 需要高度可以滚动
Page({
onReachBottom: function(){
console.log("上拉触底事件")
}
})
注意：在触发距离内滑动期间，距离大概是50px以内，本事件不会再次出发
页面分享事件
文档的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage
Page中蛇设置onShareAppMessage函数,
转发事件由设置了 open-type="share" 的按钮来触发
此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：
| 字段 | 说明 | 默认值 |
|---|---|---|
| title | 标题 | 当前小程序名称 |
| path | 转发路径 | 当前页面 path ，必须是以 / 开头的完整路径 |
| imageUrl | 自定义图片路径 | 使用默认截图 |
Page({
onShareAppMessage: function (res) {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
总结：
- 实现类似微信朋友圈的刷新朋友圈使用onPullDownRefresh
- 无限滚动加载使用 onReachBottom
- 右上角菜单才会显示“转发”按钮需要定义onShareAppMessage
判断场景值
场景值说明：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
在 App 的 onLaunch 和 onShow 中获取上述场景值
tab页面的路由管理
程序路由的 Tab 切换，Tab 切换页面全部出栈，只留下新的 Tab 页面
vscode开发小程序
vsCode中安装wxml和wxss插件，只需要安装vscode搜索wxml结果的前两项就可以了
第二天内容知识点总结：
- 能通过微信开发者工具的“预览“功能，在自己手机上预览小程序
- 掌握小程序的数据绑定语法 {{}}
- 掌握小程序列表渲染语法 wx:for
- 掌握小程序条件渲染语法 wx:if，wx:else
- 掌握小程序事件绑定 bindtap 基本用法
- 了解小程序事件传参 data-* 与 事件对象中 e.currentTarget.dataset 获取参数
- 了解表单事件 bindinput 与普通事件 bindtap 区别，bindtap 的事件对象不能获取表单值
- 掌握通过 this.setData() 接口实现数据渲染到视图层
- 了解小程序的上拉事件，下拉事件，分享事件
- 了解小程序生命周期函数，能通过控制台输出查看各生命周期函数的执行顺序
- 能区别 onLoad 和 onShow 生命周期函数，onLoad 只在加载的时候执行一次
- 了解小程序场景值的应用场景，通过判断场景值，执行不同的 console.log
- 了解小程序路由的 Tab 切换，Tab 切换页面全部出栈，只留下新的 Tab 页面
- 使用 VSCode 关联 wxml，wxss 文件实现语法高亮提示