微信小程序快速入门【02】

1.下拉刷新和上拉触底

配置：

  全局配置：应用于所有页面

  页面局部配置：应用于当前页面

  开启/关闭下拉刷新："enablePullDownRefresh":true/false(默认关闭)

  上拉触底：默认开启

  设置上拉触底阈值："onReachBottomDistance":数值（默认为50px）

案例演示：

1.准备测试页面colors：

 "pages": [
    "pages/conact/conact",
    "pages/home/home",
    "pages/test/test",
    "pages/colors/colors",
    "pages/detail/detail",
    "pages/message/message",
    "pages/index/index",
    "pages/logs/logs"
  ],  

2.准备数据和函数：

data: {
     colorList:[]
  },
getColor(){
    for(let i=0;i<20;i++){
      let colorStr=`${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.random()}`;
      this.setData({
        colorList:[...this.data.colorList,colorStr]
      })
    }
    
  },

上述内容表示准备一个数组，然后通过for循环将20条数据添加到数组中；每一天数据包含四个部分，前三部分为0-255之间的随机整数，最后一部分为0-1之间的随机数，此数据用于模拟rgba颜色，用于页面渲染；

3.开启下拉刷新

{
  "usingComponents": {},
  "enablePullDownRefresh":true
  }

4.在页面加载函数中调用上面定义的函数

 onLoad(options) {
    this.getColor();
  }, 

5.编辑页面模板，准备渲染内容

 <view wx:for="{{colorList}}" wx:key="index" 
style="height: 300rpx; line-height: 300rpx; text-align: center; color: white; background-color: rgba({{item}});">
{{item}}
 </view>

上述代码表示在容器中遍历颜色数组，并设置了相关样式，并通过js中准备的数据设置了背景颜色；

6.编译项目，查看页面渲染情况

7.在下拉刷新函数中定义业务逻辑，实现下拉刷新时页面渲染情况同时刷新

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
     console.log('执行了下拉刷新');
     //清空颜色数组
     this.setData({
       colorList:[]
     }),
     //重新填充颜色
     this.getColor(),
     //停止刷新动画
     wx.stopPullDownRefresh()
  },  

8.测试上拉刷新

可以发现当用户下拉刷新时，下拉刷新函数执行，同时页面渲染也发生了改变

9.上拉触底函数编辑业务，实现加载更多

onReachBottom() {
    console.log('执行了上拉触底');
    this.getColor()
  },

10.测试上拉触底

可以发现当用户一直往下滑，当距离底部50px（默认值）时，触发上拉触底函数，数组中又在此填充20条数据；

注意事项：此时如果用户滑动过快，瞬间超过了50px的阈值，此时上拉触底就会失效；

11.设置上拉触底阈值，避免上拉属性失效

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "onReachBottomDistance":200
  }

此时将上拉触底的阈值设置为200，此时就会在200px时提前执行上拉触底函数，避免用户滑动过快，造成上拉触底失效；

2.生命周期函数

1.小程序的生命周期函数：

说明：

onLaunch()：

  程序启动时执行，只执行一次；

onShow():

  程序启动或从后台切到前台时执行;

onHide():

  程序从前台进入后台时执行

案例：

1.app.js中定义生命周期函数

App({
  onLaunch() {
    console.log('app.js程序启动时执行onLaunch，只执行一次');
  },
  onShow(){
   console.log('app.js程序启动或从后台切到前台时执行onShow');
  },
  onHide(){
    console.log('app.js程序从前台进入后台时执行onHide');
  }
})  

2.编译项目进行测试：

此时可以发现onLaunch()和onShow()函数执行了

此时通过模拟器模拟进入后台，发现onHide()函数执行了

当重新进入前台时，onShow()函数再次执行，而onLoad()函数没有执行，因为onLoad()函数只在程序启动时执行一次；

2.页面生命周期函数;

函数说明：

onLoad():

  当前页面加载时执行，只执行一次；

onReady()：

 当前页面渲染完成时执行；

onShow()：

 进入当前页面时执行；

onHide()：

 离开(隐藏)当前页面时执行，只针对于tabBar页面，非tabBar页面离开时会卸载当前页；

onUnload()：

卸载当前页面时执行，只针对于非tabBar页面，tabBar页面只会显示或隐藏，而不会被卸载；

案例：

在colors页面定义页面生命周期函数

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('colors页面加载时执行onLoad，只执行一次');
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log('colors页面渲染完成时执行onReady');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log('进入colors页面时执行onShow');
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    //(如果是非tabBar页面，离开此页面时，当前页面会被卸载执行卸载回调函数)
    console.log('离开colors页面时(当前页面被隐藏)执行onHide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('colors页面卸载时执行onUnload');
  },
  

编译项目，进行测试：

进入colors页面：onShow()和onReady()函数执行；

返回主页时，onUnload()函数执行，因为colors页面属于非tabBar页面，离开时该页面会被卸载(如果是tabBar页面，则会执行onHide()函数)；

3.本地缓存

案例演示：

1.在主页定义一个按钮，并绑定触摸事件；

<!-- 本地缓存 -->
<button type="primary" bind:tap="setStorage">本地缓存</button>   

2.定义回调函数

setStorage(){
}

3.本地缓存演示：

1.同步版本：

代码编写;

 setStorage(){
  //同步缓存
     //存
     wx.setStorageSync('name', '测试数据a')
     //取
     let name=wx.getStorageSync('name')
     console.log(name);
     //删
     wx.removeStorageSync('name')
     console.log(wx.getStorageSync('name'));
     //清空
    //  wx.clearStorageSync();
}    

测试：

  1.触摸按钮，触发事件的回调函数

       ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1733808708318-ea7db0e5-6021-475f-91f9-18e97aaa53ee.png)

  2.查看控制台的结果展示：

发现可以正常存取或删除数据(第二次读取为空是因为上面执行了删除操作)

2.异步版本：

说明：异步版本与同步版本的区别在于异步缓存在执行存，取，删，清空等操作时都有其对应的成功，失败，一定执行的回调函数；

代码编写：

setStorage(){
       wx.setStorage({
         key:'name',
         data:'zs',
         success:()=>{
           console.log('数据存储成功');
         },
          fail:()=>{
            console.log('数据存储失败');
          },
          complete:()=>{
            console.log('资源释放');
          }
       }),
       //删除
       wx.removeStorage({
         key: 'name',
         success:()=>{
          console.log('数据删除成功');
        },
         fail:()=>{
           console.log('数据删除失败');
         },
         complete:()=>{
           console.log('资源释放');
         }
       })
       //取
       wx.getStorage({
         key:'name',
         success:(res)=>{
          console.log('数据读取成功',res.data);
        },
         fail:()=>{
           console.log('数据读取失败');
         },
         complete:()=>{
           console.log('资源释放');
         }
       })
       //清除(一般不写回调函数)
       wx.clearStorage({
        success:()=>{
          console.log('数据清除成功');
        },
         fail:()=>{
           console.log('数据清除失败');
         },
         complete:()=>{
           console.log('资源释放');
         }
       })
}

测试：

1.触摸按钮，触发事件的回调函数

2.观察控制台结果展示

可以发现数据可以正常存取或删除清空

4.wxs标签：

概述：

wxs是微信小程序独有的一种脚本语言，可实现在wxml页面嵌入类似于js语法的内容，主要应用场景为设置过滤器；

特点：

   wxs有自己的数据类型：number/string/boolean/object/function/array/date/regexp

   wxs 不支持 ES6语法：不能写let  const 解构解析、展开运算符、箭头函数、对象属性简写。

   wxs与js相互隔离，不可调用

优点：

 在ios系统中wxs比js执行效率高2-20倍；

使用案例：

1.内联式使用：

在conant.wxml页面定义wxs标签：

​