class07：下拉刷新和上拉触底、小程序的生命周期和成员权限

一、下拉刷新和上拉触底

1.下拉刷新

json文件中enablePullDownRefresh：属性，设置为true。

//home.json
{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

// pages/home/home.js
Page({
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("触发home页面的下拉事件");
  },
})

2.案例

功能：通过点击按钮使num值自增，当下拉刷新后num值重置为0。

<!--pages/home/home.wxml-->
<view>{{num}}</view>
<button bindtap="addNum" type="primary">点击</button>

/* pages/home/home.wxss */
view{
  font-size: 100rpx;
}

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  addNum(){
    this.setData({
      num:this.data.num + 1
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("触发home页面的下拉事件");
    this.setData({num:0}); //下拉刷新num值重置为0
    wx.stopPullDownRefresh(); //停止下拉刷新
  },
})

注：下拉刷新不会自动停止，可使用API：wx.stopPullDownRefresh

链接: https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html

3.上拉触底

js文件中的自带的onReachBottom: function (){}函数

<!--pages/home/home.wxml-->
<view>1</view>
<view>2</view>
<view>3</view>

/* pages/home/home.wxss */
view{
  font-size: 100rpx;
  height: 500px;
  margin: 30rpx;
  background-color: #ff0;
}

// pages/home/home.js
Page({
  /** 
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("触发home页面上拉触底事件")
  },
})

4.实例

功能：下拉触底后获取下一页的颜色数据。

//node后端
const express = require("express");//导入express包
const app = express();//创建实例 

//启动本地4000端口
app.listen(4000, ()=>{
    console.log("启动4000端口成功！");
});

app.get("/color", (req, res)=>{
    let staticUrl = "http://localhost:4000/color/";
    let imgArrData = {
        msg:"16进制颜色表",
        colorData:[
            "#FFFFCC",
            "#CCFFFF",
            "#FFCCCC",
            "#99CCCC",
            "#FFCC99",
            "#FF9999",
            "#996699",
            "#CC9999",
            "#CCCC99",
            "#FFFF99",
            "#CCCCFF",
            "#0099CC",
            "#CCCCCC",
            "#FF6666",
            "#FF9966"
        ]
    };
    res.send(imgArrData);
})

<!--pages/home2/home2.wxml-->
<view class="color-item" wx:for="{{colorList}}" wx:key="index" style="background-color: {{item}}">{{item}}</view>

/* pages/home2/home2.wxss */
.color-item{
  height: 100rpx;
  margin: 10rpx;
  padding: 20rpx 0;
}

// pages/home2/home2.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    colorList:[],//存储颜色数组
  },

  getColorData(){
    //发起请求，获取颜色数据
    wx.request({
      url: 'http://localhost:4000/color',
      method:"GET",
      success:({data:res})=>{
        console.log(res);
        this.setData({
          colorList:[...this.data.colorList, ...res.colorData]
        })
      }
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getColorData();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getColorData();
  },
})

注：js第十八行代码：

colorList:[...this.data.colorList, ...res.colorData]

这里不能写成：

colorList:res.colorData

下面的写法每次刷新都是将颜色数组直接复值给存储数组，所以发生覆盖导致颜色不能累加。
故需要先获取旧的数组，再将新数组拼接到旧数组之后。

5.改进

(1)设置节流阀
原因：
当请求第2页数据，此时请求过程还没有完成，用户又进行第二次上拉，又会发起请求？不合理。

使用判断语句判断节流阀是否开启或关闭：

// home2.js
/**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () {
    //当开关打开时，表明正在请求，不会再次发起请求
    if(this.data.isRequest) return;
    this.getColorData();
},

定义节流阀isRequest，初始值为false，表示还未进行网络请求：

// home2.js
data: {
    isRequest:false    // 开关/节流阀，false表示没有进行网络请求
  },

在请求正式开始前设置节流阀开关为true，表示正在进行请求：

// home2.js
//设置开关为true，表示正在进行请求
this.setData({isRequest:true});

在请求正式结束后设置节流阀开关为false，表示请求已结束：

// home2.js
complete:(res)=>{
        //设置开关为false，请求完成，此时没有新的请求
        this.setData({isRequest:false});
}

(2)设置loading提示加载进度:
链接: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

在请求正式开始前设置loading:
//显示loading效果
wx.showLoading({
    title: '加载中',
})

loading不会自动消失，必须在请求完成后设置隐藏：

//隐藏loading效果
wx.hideLoading();

(3)完整代码：

<!--pages/home2/home2.wxml-->
<view class="color-item" wx:for="{{colorList}}" wx:key="index" style="background-color: {{item}}">{{item}}</view>

/* pages/home2/home2.wxss */
.color-item{
  height: 100rpx;
  margin: 10rpx;
  padding: 20rpx 0;
}

// pages/home2/home2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList:[],
    isRequest:false    // 开关/节流阀，false表示没有进行网络请求
  },

  getColorData(){
    //显示loading效果
    wx.showLoading({
      title: '加载中',
    })

    //设置开关为true，表示正在进行请求
    this.setData({isRequest:true});

    //发起请求，获取颜色数据
    wx.request({
      url: 'http://localhost:4000/color',
      method:"GET",
      success:({data:res})=>{
        console.log(res);
        this.setData({
          colorList:[...this.data.colorList, ...res.colorData]
        })
      },

      complete:(res)=>{
        //设置开关为false，请求完成，此时没有新的请求
        this.setData({isRequest:false});

        //隐藏loading效果
        wx.hideLoading();
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getColorData();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    //当开关打开时，表明正在请求，不会再次发起请求
    if(this.data.isRequest) return;
    this.getColorData();
  },
})

二、小程序的生命周期

1.生命周期

应用生命周期：小程序从 启动 --> 运行 --> 销毁结束的过程。
页面生命周期：小程序中每个页面从 加载 --> 渲染 --> 销毁结束的过程。

注：页面生命周期包含在应用生命周期中。

生命周期函数：对应生命周期每个时间点的函数，自动按顺序执行。

• 生命周期：时间段
• 生命周期函数：时间点

页面生命周期： 链接: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

2.onLoad、onShow、onReady、onHide的执行时间点

链接: https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

// pages/home3/home3.js
Page({
//页面的初始数据 
  data: {
  },
  
//生命周期函数--监听页面加载
  onLoad: function (options) {
      console.log("onLoad");
  },
  
//生命周期函数--监听页面初次渲染完成
  onReady: function () {
    console.log("onReady");
  },
  
//生命周期函数--监听页面显示
  onShow: function () {
    console.log("onShow");
  },
  
//生命周期函数--监听页面隐藏
  onHide: function () {
    console.log("onHide");
  },
  
//生命周期函数--监听页面卸载
  onUnload: function () {
    // console.log("onUnload");
  },
})

可看出页面第一次加载时，先执行onLoad，再执行onShow，最后是onReady。

当点击切后台时，程序会执行onHide，再返回前台时又执行onShow。
注：模拟切后台方法：工具 -> 工具栏管理 -> 切后台

3.onUnload ：生命周期回调—监听页面卸载

链接: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E5%8F%82%E6%95%B0
页面卸载时触发。 如wx.redirectTo或wx.navigateBack到其他页面时。
后退导航时会触发onUnload，如：

<!--pages/home2/home2.wxml-->
<text>pages/home2/home2.wxml</text>

// pages/home2/home2.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log("home2的onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("home2的onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("home2的onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("home2的onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("已关闭home2页面，触发hone2的onUnload");
  },
})

<!--pages/home3/home3.wxml-->
<navigator url="/pages/home2/home2">跳转到home2页面</navigator>

// pages/home3/home3.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log("home3的onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("home3的onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("home3的onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("home3的onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("已关闭home3页面，触发home3的onUnload")
  },
})

该代码由home3页面跳转到home2页面。
由图可知：当发生跳转时，home3页面的onHide被执行，同时home2页面的onLoad、onShow、onReady也被执行；
当从home2页面返回到home3页面时，home2的onUnload被执行，同时home3的onShow被执行；注意：因为相当于home2页面被卸载，所以不执行home2页面的onHide而执行onUnload。

三、分配小程序权限

链接: https://kf.qq.com/faq/170302zeQryI170302beuEVn.html

进入小程序后台，点击进入成员管理:
管理员只能有一个，可以发布小程序，统筹小程序的开发进度等。

小程序成员管理
功能介绍：
小程序成员管理包括对小程序项目成员及体验成员的管理。

项目成员：表示参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。

体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

成员管理入口
小程序管理后台（mp.weixin.qq.com）- 用户身份 – 成员管理

1、登录：可登录小程序管理后台，无需管理员确认
2、版本发布：小程序版本发布、回退
3、数据分析：在统计模块查看小程序数据
4、开发能力：可使用小程序开发者工具及开发版小程序进行开发；在开发模块使用开发管理、开发者工具和云开发等能力
5、修改小程序介绍：修改小程序在主页展示的功能介绍
6、暂停/恢复服务：暂停或恢复小程序线上服务
7、设置可被搜索：设置小程序是否可被用户主动搜索
8、解除关联移动应用：可解绑小程序已关联的移动应用
9、解除关联公众号：可解绑小程序已关联的公众号
10、管理体验者：添加或删除小程序体验者
11、体验者权限：使用体验版小程序
12、微信支付：使用小程序微信支付（虚拟支付）模块
13、小程序插件管理：运营者可进行小程序插件开发管理、申请管理和设置
14、游戏运营管理：可使用小游戏管理后台的素材管理、游戏圈管理等功能
15、推广：在推广模块使用小程序流量主、广告主等功能

成员管理人数限制
每个小程序帐号可添加一定数量的项目成员、体验成员，具体限制如下：

补充说明
管理员及其他项目成员绑定帐号数不占用公众号绑定数量限制。
每个微信号可以成为50个小程序的项目成员。
每个微信号可以成为50个小程序的体验成员。