一、小程序的生命周期函数
小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。接受一个 Object 参数，指定其小程序的生命周期回调。
小程序的生命周期函数的调用顺序为onLaunch > onShow > onHide。
1、onLaunch 监听小程序初始化
小程序加载时，执行的函数。
onLaunch() {
// 通常在这里面发起请求，获取后台数据
console.log('小程序加载');
},
2、onShow 监听小程序显示
小程序显示时，执行的函数。
onShow(){
console.log('小程序显示');
},
3、onHide 监听小程序隐藏
小程序隐藏（从前台切换到后台）时，执行的函数。
onHide(){
console.log('小程序隐藏');
}
二、页面的生命周期函数
页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数。页面的生命周期函数是在app.js里面调用的
1、onLoad 监听页面加载
onLoad函数监听页面加载，对页面状态数据进行初始化。一个页面只会调用一次。onLoad函数的参数可以接收打开当前页面所调用的 query参数。
当前页面跳转detail页面后，调用query参数id。
<navigator url="../detail/detail?id={{item.Id}}" class="item" wx:for="{{subjects}}" wx:key="index">
</navigator>
detail页面中onLoad函数可以获取传递的query参数id。
onLoad: function (options) {
//获取传递的参数id
let {id} = options
}
2、onReady 监听页面初次渲染完成
页面初次渲染的时候触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onReady: function () {
console.log('页面初次渲染完成');
}
3、onShow 监听页面显示
每次打开页面都会触发一次。
onShow: function () {
console.log('页面显示');
}
4、onHide 监听页面隐藏
页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等情况下触发。
onHide: function () {
console.log('页面隐藏');
},
5、onUnload 监听页面卸载
页面卸载（真正关闭）时触发，如redirectTo或navigateBack到其他页面时触发。
onUnload: function () {
console.log('页面卸载');
},
三、页面相关事件处理函数
1、onReachBottom 上拉触底
当上拉至底部时就会触发onReachBottom函数来进行相应动作。
onReachBottom:function(){
// 操作
}
2、onPullDownRefresh 下拉刷新
注意：下拉刷新默认是关闭状态，所以需要先在.json文件中设置允许下拉刷新。
enablePullDownRefresh：设置是否开启当前页面下拉刷新。
backgroundColor：设置窗口的背景色。
backgroundTextStyle：下拉 loading 的样式，默认是light，仅支持 dark / light。
{
"enablePullDownRefresh": true,
"backgroundColor": "#d1c2d3",
"backgroundTextStyle": "light"
}
下拉刷新动效有默认时间。如果想改变默认的下拉时间，可以使用定时器。
wx.stopPullDownRefresh() ：设置刷新完成后停止下拉刷新动效。
onPullDownRefresh:function(){
setTimeout(() => {
wx.stopPullDownRefresh()
}, 1000);
}
3、onShareAppMessage 用户点击右上角分享
onShareAppMessage: function () {
}
四、简易双向绑定
1、普通属性绑定
在 WXML 中，普通的属性的绑定是单向的。如果用户修改了输入框里的值，不会同时改变 this.data.value。
<input class="txt" value="{{value}}" />
2、简易双向绑定
如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。双向绑定指的是：一处被修改，另一处也一起修改。
通过model:value的方式，将表单里面的数据跟js里面的数据进行了双向绑定。
<input class="txt" model:value="{{value}}" />
3、双向绑定的表达式限制
双向绑定的表达式限制：① 只能是一个单一字段的绑定；② 目前，尚不能 data 路径。
以下写法都是错误的：
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
<input model:value="{{ a.b }}" />
五、表单组件
1、picker 选择器组件
range：指定一个数组(指定一份展示的数据)。
range-key：如果range数组是一个对象数组，需要添加range-key属性，指定选择器中显示的内容(从对象身上指定一个属性)。
bindchange：value 改变时触发 change 事件，event.detail = {value}。
<picker class="txt" bindchange="bindPickerChange" range-key="Name" range="{{sections}}">
<view>
<!-- 根据选择器选中的索引，显示对应的名称 -->
{{sections[sectionsActiveIndex].Name}}
</view>
</picker>
后台通过e.detail.value获取当前列表value的索引。
bindPickerChange: function(e) {
console.log(e.detail.value) //获取下标
}
效果图：
2、input 输入框
placeholder：输入框为空时占位符。
<text class="title">标题：</text>
<input value="" placeholder="请输入标题" />
效果图：
3、textarea 多行文本框
maxlength：最大输入长度。设置为 -1 的时候不限制最大长度。
<textarea maxlength="-1" value="" />
效果图：
