小程序-3（页面导航+页面事件+生命周期+WXS）
目录
1.页面导航
声明式导航：在页面上声明一个<navigator>导航组件，通过点击该组件实现页面跳转
编程式导航：调用小程序的导航API，实现页面的跳转
声明式导航
导航到tabBar页面
在navigator中要用到url属性和open-type属性，其中url表示要跳转的页面的地址，必须以“/”开头，open-type表示跳转的方式，必须为switchTab
导航到非tabBar页面
与导航到tabBar页面相似，只是open-type="navigate"，导航到非tabBar页面时open-type属性可以省略
后退导航
在当前页面的wxml文件中写，open-type="navigateBack" delta="1" ，delta的值必须是数字，表示要后退的层级，如果只是后退到上一页面，可以省略delta属性，因为其默认值就是1
编程式导航
编程式导航调用wx.switchTab()方法，可以跳转到tabBar页面
编程式导航中，导航到tabBar页面与导航到非tabBar页面一样，注意网址第一位都要写“/”
后退导航
后退导航调用wx.navigateBack()方法，可以返回上一页面或多级页面
如果想退回多级页面，可以在wx.navigateBack()方法中定义一个delta来赋值想要后退的页面数
导航传参
声明式导航传参
url属性来指明路径，同时后面可以传递参数
路径和参数之间用？分隔，参数值与参数值之间用=相连（参数名=参数值），不同的参数之间用&相隔
编程式导航传参
bindtap绑定了事件，在调用事件时同样是在网址后面加上了参数，写法与上面相同
在onload中接收导航参数
通过两种导航方式得到的参数，可以直接在onload事件中得到
因为options仅作用于onload事件中，想要把得到的参数运用于整个页面，可以在data中定义一个空的query，在onload中，使用this.setData({query:options})将参数值给query，从而实现参数在整个页面的应用
2.页面事件
下拉刷新
触发下拉刷新事件，要把count的值重置为0，可以调用下拉刷新的函数onPullDownRefresh，在该函数中再调用this.setData方法，将count值重新赋值为0
停止下拉刷新的效果
实现页面的下拉刷新，在页面的.json文件中配置onPullDownRefresh：true;实现全局的下拉刷新在app.json文件中配置。backgroundColor来设置下拉界面的颜色，backgroundTextStyle来设置下拉刷新小圆点的颜色效果
下拉刷新时，页面不会自动回到顶部，这时可以在onPullDownRefresh函数中调用wx.stopPullDownRefresh()函数，仅需调用不需要写回调函数
上拉触底
在页面的.js文件中，通过onReachBottom()函数来触发上拉触底事件
配置上拉触底距离
在.json文件中，通过onReachBottomDistance属性来配置上拉触底的距离，默认是50px
上拉触底的节流控制
自定义编译模式
3.生命周期
生命周期的分类
应用生命周期（小程序）和页面生命周期
生命周期函数
生命周期函数是小程序框架提供的内置函数，伴随着生命周期执行
生命周强调的是时间段，生命周期函数强调的是时间点
生命周期函数又分为应用生命周期函数和页面生命周期函数
应用的生命周期函数
小程序的应用生命周期函数在app.js中进行声明
onLaunch 小程序初始化完成，执行此函数，全局只触发一次
onShow 小程序启动，或者从后台进入前台显示时触发（可触发多次）
onHide 小程序从前台进入后台时触发（可触发多次）
页面的生命周期函数
页面的生命周期函数在页面的.js文件中进行声明
onLoad 监听页面加载，一个页面只调用1次；可以初始化一些数据或者转存一些参数
onShow 监听页面显示
onReady 监听页面初次渲染完成，一个页面只调用一次； 可以调用wx.setNavigationBarTitle去修改页面内容
onHide 监听页面隐藏
onUnload 监听页面卸载，一个页面只调用1次
4.WXS
WXS的定义
wxs是小程序独有的脚本语言，用来渲染wxml结构，wxml无法调用页面中在.js中定义的函数，但是wxml可以调用wxs中定义的函数
WXS和JavaScript的关系
内嵌wxs脚本
wxs代码可以写在wxml文件中的<wxs>标签内，就像是javascript代码可以写在html文件的<script>标签内一样
wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模板名称，方便询问
module.exports.toUpper+function(){} 该句话中toUpper是方法，module.exports是模块导入这个方法，在后面调用的时候，可以直接使用module名.方法名{{参数}}
定义外联的WXS脚本
wxs代码还可以编写在以.wxs为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样
写在.wxs文件中的代码要注意格式的完整和正确性
使用定义的外联的wxs脚本
先定义好的外联wxs文件，在wxml文件中引入外联文件并进行命名
<wxs src="../../utils/tools.wxs" module="命名"></wxs>
其中src必须是相对路径
wxs的特点
- 与javascript语言不同，虽然借鉴了较多，但本质上是不相同的
- 不能作为组件的回调函数，wxs经常与Mustache搭配使用，但在wxs中定义的函数不能作为组件的回调函数使用
- 隔离性：不能调用js中定义的函数，不能调用小程序提供的API
- 性能好：在iOS设置上，小程序内的wxs会比js快2-20倍；在android设备上，二者的运行效率无差异
判断是否还有下一页数据
arr.splice(a,b,'c') 在数组的索引a处，删除b个元素，添加c
原文地址：https://blog.csdn.net/2301_80486133/article/details/140473950
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！