微信小程序（页面用户行为）

前言

注册页面：
对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例
▲▲作用：指定页面的初始数据、生命周期回调、事件处理函数等。

页面的用户行为：
小程序宿主环境提供了四个和页面相关的用户行为回调

一·页面构造/注册器Page()

宿主环境提供了 Page() 构造器用来注册小程序页面
Page()在页面脚本page.js中调用，Page() 的调用方式如下所示

注：
1）Page构造器接受一个Object参数。
2）data属性是当前页面的初始数据。
3）onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期。
4）onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll ，这4个回调是页面的用户行为，即页面用户行为。

二·小程序界面渲染

基本原理：小程序的页面结构由WXML进行描述，WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，数据来自于页面Page构造器的data字段，data参数是页面首次渲染时从逻辑层传递到渲染层的数据。

双线程下的界面渲染
小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的DOM树上，渲染出正确的UI界面。

三·页面数据

页面数据data：
1）小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。
2）setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。

3）在开发的时候，页面的data数据会涉及相当多的字段，你并不需要每次都将整个data字段重新设置一遍，只需要把改变的值进行设置即可，宿主环境会自动把新改动的字段合并到渲染层对应的字段中。
4）只要保持一个原则就可以提高小程序的渲染性能：每次只设置需要改变的最小单位数据。

页面数据data，最后需要注意3点：
①直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致；
②由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB；
③不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。

四·页面用户行为

小程序宿主环境提供了四个和页面相关的用户行为回调：☻下拉刷新 onPullDownRefresh—☻上拉触底 onReachBottom—☻页面滚动 onPageScroll-----☻用户转发 onShareAppMessage。

①下拉刷新 onPullDownRefresh
监听用户下拉刷新事件，需要在app.json（全部）的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 小程序提供的api，通知页面停止下拉刷新页面
    const timer = setInterval(function(){
      wx.stopPullDownRefresh();
      // 1s后恢复状态
      clearTimeout(timer)
    },1000)
  },

②上拉触底 onReachBottom
场景：
用户滚动到底部的时候，会加载下一页的商品列表渲染到列表的下方，我们把这个交互操作叫为上拉触底。
可以在app.json（全局）的window选项中或页面配置page.json）单个中设置触发距离onReachBottomDistance的值。在触发距离内滑动期间，本事件只会被触发一次。

①先将前提工作做好，一般上拉触底都需要做列表页

<!--pages/mine/mine.wxml-->
<view class="newsList">
  <block wx:for="{{newsList}}" wx:key="index">
    <view class="childList">
      <image src="{{item.imgUrl}}"></image>
      <view>{{item.info}}</view>
    </view>
  </block>
</view>

/* pages/mine/mine.wxss */
.newsList{
  width: 100%;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.newsList .childList{
  width: 100%;
  height: 100px;
  border-bottom:1px solid #9d9d9d;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.childList image{
  width:80px;
  height:80px;
  margin-right:20rpx;
}

 /**
   * 页面的初始数据
   */
  data: {
    newsList:[
      { imgUrl: '/images/imgs/01.jpg', info: '可爱的小猫咪' },
      { imgUrl: '/images/imgs/02.jpg', info: '狗狗1号' },
      { imgUrl: '/images/imgs/03.jpg', info: '猫猫2号' },
      { imgUrl: '/images/imgs/04.jpg', info: '狗狗3号' },
      { imgUrl: '/images/imgs/05.jpg', info: '狗狗4号' },
      { imgUrl: '/images/imgs/06.jpg', info: '狗狗5号' },
      { imgUrl: '/images/imgs/07.jpg', info: '狗狗6号' },
      { imgUrl: '/images/imgs/08.jpg', info: '猫猫7号' },
      { imgUrl: '/images/imgs/06.jpg', info: '狗狗5号' },
      { imgUrl: '/images/imgs/07.jpg', info: '狗狗6号' },
      { imgUrl: '/images/imgs/08.jpg', info: '猫猫7号' }
    ]
  },

②上拉触底onReachBottom
-----首先：在page.json中设置触发距离onReachBottomDistance的值。

-----接下来在逻辑文件中绑定事件onReachBottom，监听事件上拉触底行为

-----然后细化回调函数，当触发上拉触底时动态添加内容。

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log(6666);
    wx.showLoading({
      title: '正在加载中...',
    })
    const newArray = [
      { imgUrl: '/images/imgs/04.jpg', info: '狗狗3号' },
      { imgUrl: '/images/imgs/05.jpg', info: '狗狗4号' },
      { imgUrl: '/images/imgs/06.jpg', info: '狗狗5号' },
      { imgUrl: '/images/imgs/07.jpg', info: '狗狗6号' },
      { imgUrl: '/images/imgs/08.jpg', info: '猫猫7号' },
    ]
    this.setData({
      newsList:this.data.newsList.concat(newArray)
    })
  },

----完善内容加载，添加loading动画

    wx.showLoading({
      title: '正在加载中...',
    })

但是加载状态会一直显示，所以

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log(6666);
    wx.showLoading({
      title: '正在加载中...',
    })
    const _this = this;
    const timer = setTimeout(function(){
      const newArray = [
        { imgUrl: '/images/imgs/04.jpg', info: '狗狗3号' },
        { imgUrl: '/images/imgs/05.jpg', info: '狗狗4号' },
        { imgUrl: '/images/imgs/06.jpg', info: '狗狗5号' },
        { imgUrl: '/images/imgs/07.jpg', info: '狗狗6号' },
        { imgUrl: '/images/imgs/08.jpg', info: '猫猫7号' },
      ]
      _this.setData({
        newsList: _this.data.newsList.concat(newArray)
      })
      wx.hideLoading();
      clearTimeout(timer);
    },1000)  
  }

拓：开发场景代码，一般用接口调用获取数据，格式如下

③页面滚动 onPageScroll
场景案例：返回顶部
用意：
监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）；
1）获取滚动条当前位置：

2）设置一键返回顶部功能

<!-- 返回顶部 -->
<view class="toTop" bindtap="toTop">↑</view>

// 返回顶部
  toTop(){
    if (wx.pageScrollTo){
     wx.pageScrollTo({
       scrollTop: 0
     })
   }else{
     wx.showModal({
       title: '提示',
       content: '微信版本过低，请升级！',
     })
   }
  }
})

3）注意：
–只需要页面中某一小块区域需要可滚动，此时就要用到宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动，scroll-view组件也提供了丰富的滚动回调触发事件。
–onPageScroll存在多个bug，但是官方暂时还没有修复pageScrollTo的bug。

④用户转发 onShareAppMessage


只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容。

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return{
      title:'转发标题',
      path:'pages/logs/logs'
    }
  },

转发注意事项：
①按需出现②尊重意愿