微信小程序快速入门【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.触摸按钮，触发事件的回调函数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标签：