1.下拉刷新和上拉触底
配置：
全局配置：应用于所有页面 页面局部配置：应用于当前页面 开启/关闭下拉刷新："enablePullDownRefresh":true/false(默认关闭) 上拉触底：默认开启 设置上拉触底阈值："onReachBottomDistance":数值（默认为50px）案例演示：
1.准备测试页面colors：
plain
"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.准备数据和函数：
plain
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.开启下拉刷新
plain
{
"usingComponents": {},
"enablePullDownRefresh":true
}4.在页面加载函数中调用上面定义的函数
plain
onLoad(options) {
this.getColor();
}, 5.编辑页面模板，准备渲染内容
plain
<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.在下拉刷新函数中定义业务逻辑，实现下拉刷新时页面渲染情况同时刷新
plain
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log('执行了下拉刷新');
//清空颜色数组
this.setData({
colorList:[]
}),
//重新填充颜色
this.getColor(),
//停止刷新动画
wx.stopPullDownRefresh()
}, 8.测试上拉刷新
可以发现当用户下拉刷新时，下拉刷新函数执行，同时页面渲染也发生了改变
9.上拉触底函数编辑业务，实现加载更多
plain
onReachBottom() {
console.log('执行了上拉触底');
this.getColor()
},10.测试上拉触底
可以发现当用户一直往下滑，当距离底部50px（默认值）时，触发上拉触底函数，数组中又在此填充20条数据；
注意事项：此时如果用户滑动过快，瞬间超过了50px的阈值，此时上拉触底就会失效；
11.设置上拉触底阈值，避免上拉属性失效
plain
{
"usingComponents": {},
"enablePullDownRefresh":true,
"onReachBottomDistance":200
}此时将上拉触底的阈值设置为200，此时就会在200px时提前执行上拉触底函数，避免用户滑动过快，造成上拉触底失效；
2.生命周期函数
1.小程序的生命周期函数：
说明：
onLaunch()：
程序启动时执行，只执行一次；onShow():
程序启动或从后台切到前台时执行;onHide():
程序从前台进入后台时执行案例：
1.app.js中定义生命周期函数
plain
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页面定义页面生命周期函数
plain
/**
* 生命周期函数--监听页面加载
*/
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.在主页定义一个按钮，并绑定触摸事件；
plain
<!-- 本地缓存 -->
<button type="primary" bind:tap="setStorage">本地缓存</button> 2.定义回调函数
plain
setStorage(){
}3.本地缓存演示：
1.同步版本：
代码编写;
plain
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.异步版本：
说明：异步版本与同步版本的区别在于异步缓存在执行存，取，删，清空等操作时都有其对应的成功，失败，一定执行的回调函数；
代码编写：
plain
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标签：