1.页面导航
(1)声明式导航
在页面上声明一个 <navigator> 导航组件,通过点击 <navigator> 组件实现页面跳转。
// 导航到tabBar页面
<navigator url=" " open-type="switchTab">tabBar</navigator>
// 导航到非tabBar页面
<navigator url=" " open-type="navigate">非tabBar</navigator>
// 后退导航
<navigator open-type="navigateBack" delta="1">后退</navigator>
- url 表示要跳转的页面地址
- open-type 表示跳转的方式
- 后退导航中 delta 的值必须是数字,表示后退的层级。
(2)编程式导航
调用小程序的导航 API ,实现页面跳转。
- 调用 wx.switchTab( ) 方法,跳转到tabBar页面。
- 调用 wx.navigateTo( ) 方法,跳转到非 tabBar 页面。
- 调用 wx.navigateBack( ) 方法,返回上一页面或多级页面。
// 挑战到非tabBar页面
// 页面结构
<button bindtap="gotoInfo">info</button>
// 页面跳转
gotoInfo(){
wx.navigateTo({
url:'/pages/info/info'
})
}
(3)导航传参
- navigator 组件的 url 属性用来指定将要跳转到的页面的路径。
<navigator url="/pages/info/info?name=zs&age=20">info</navigator>
- 调用 wx.navigateTo( ) 方法跳转页面时,也可以携带参数。
- 导航参数可以在 onLoad 事件中直接获取到。
2.页面事件
(1)下拉刷新事件
下拉刷新指下拉滑动操作,从而重新加载页面数据的行为。
- 启用下拉刷新方式:将 .json 文件中,enablePullDownRefresh 设置为 true。
-
通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
-
调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。
(2)上拉触底
上拉触底指屏幕上的上拉滑动操作,从而加载更多数据的行为。
- 通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。
- 以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
3.生命周期
小程序中,生命周期分两类:
- 应用生命周期:指小程序从启动 -> 运行 -> 销毁的过程
- 页面生命周期:指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程
生命周期函数
(1)应用的生命周期函数
在 app.js 中进行声明
App({
// 小程序初始化完成时执行,全局只执行一次,做一些初始化工作
onLaunch:function(options){ },
// 小程序启动,或从后台进入前台时触发
onShow:function(options){ },
// 小程序从前台进入后台时触发
onHide:function(){ }
})
(2)页面的生命周期函数
在页面的 .js 文件中声明
Page({
// 监听页面加载,只调用一次
onLoad : function(options){ },
// 监听页面显示
onShow : function(){ },
// 监听页面初次渲染完成,调用一次
onReady : function(){ },
// 监听页面隐藏
onHide : function(){ },
// 监听页面卸载,调用一次
onUnload : function(){ },
})
4. WXS 脚本
WXS 是小程序独有的一套脚本语言,结合 WXML ,可以构建出页面的结构。wxs中无法调用在页面的 .js 中定义的函数,但 wxml 中可以调用 wxs中定义的函数。
- 内嵌 wxs 脚本
wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内,就像 Javascript 代码可以编写在 html 文件中的 <script> 标签内一样。 wxml 文件中的每个 <wxs></wxs> 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在 wxml 中访问模块中的成员。
- 外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 javascript 代码可以编写在以 .js 为后缀名的文件中 一样。在 wxml 中引入外联的 wxs 脚本时,必须为 <wxs> 标签添加 module 和 src 属性。