学习目标

1. 小程序生命周期
2. wxml数据渲染，列表渲染， 条件渲染
3. 组件事件绑定 (bindtap, bindinput)
4. 修改this.data的值
5. Page中的页面事件
6. 判断场景值

生命周期

生命周期有程序的生命周期和页面的生命周期

程序的生命周期

文档地址：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
<view id="{{id}}"></view>

在组件属性中绑定布尔值
布尔值关键字,需要在双引号中使用大括号

<checkbox checked="{{false}}"> </checkbox>

注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

在大括号内运算

// 数字相加
<view>{{1 + 2}}</view>

// 字符串相加
<view>{{"hello" + name}}</view>

列表渲染

重点概念
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

基本使用

// wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx:key的使用
如不提供 wx:key，会报一个 warning，循环数组可以把key设置为下标

// wxml
<view wx:for="{{array}}" wx:key="{{index}}">
  {{index}}: {{item.message}}
</view>

for循环嵌套
当for循环嵌套时候，会造成index和item冲突，这时候需要用到以下两个属性：

• 使用 wx:for-item 可以指定数组当前元素的变量名，
• 使用 wx:for-index 可以指定数组当前下标的变量名

例子：

<view wx:for="{{array}}" wx:for-index="subIndex" wx:for-item="subItem">
  {{subIndex}}: {{subItem.message}}
</view>

条件渲染

基本概念
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> True </view>

wx:elif和wx:else
可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

总结

1. WXML 中的动态数据均来自对应 Page 的 data
2. WXML 大括号内可以进行运算
3. wx:for下标变量名默认为 index，数组当前项的默认为 item
4. wx:for需要加上wx:key， 否则报警告
5. 无论是数据绑定、循环渲染和条件渲染，都必须使用大括号

事件绑定

• 点击事件 bindtap
• 表单input监听输入事件 bindinput

点击事件 bindtap

bindtap类似于html的onClick事件

<view bindtap="tabClick"> Click me! </view>

事件对象event
​
Page({
tabClick: function(event) {
console.log(event)
}
})

获取事件参数
通过data-*给组件绑定需要的参数，然后再绑定的事件中通过事件对象event.currentTarget.dataset 可以读取参数

参考例子:

// wxml
<view bindtap="tabClick" data-name="myName"> Click me! </view>

// 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
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>

// 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
<view>{{text}}</view>
<button bindtap="changeText"> 
    修改 
</button>

// 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结果的前两项就可以了

第二天内容知识点总结：

1. 能通过微信开发者工具的“预览“功能，在自己手机上预览小程序
2. 掌握小程序的数据绑定语法 {{}}
3. 掌握小程序列表渲染语法 wx:for
4. 掌握小程序条件渲染语法 wx:if，wx:else
5. 掌握小程序事件绑定 bindtap 基本用法
6. 了解小程序事件传参 data-* 与 事件对象中 e.currentTarget.dataset 获取参数
7. 了解表单事件 bindinput 与普通事件 bindtap 区别，bindtap 的事件对象不能获取表单值
8. 掌握通过 this.setData() 接口实现数据渲染到视图层
9. 了解小程序的上拉事件，下拉事件，分享事件
10. 了解小程序生命周期函数，能通过控制台输出查看各生命周期函数的执行顺序
11. 能区别 onLoad 和 onShow 生命周期函数，onLoad 只在加载的时候执行一次
12. 了解小程序场景值的应用场景，通过判断场景值，执行不同的 console.log
13. 了解小程序路由的 Tab 切换，Tab 切换页面全部出栈，只留下新的 Tab 页面
14. 使用 VSCode 关联 wxml，wxss 文件实现语法高亮提示