小程序（三）

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 属性。