一、小程序的生命周期函数

小程序的生命周期函数是在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="" />

效果图：