Part3

P39-P41 导航

导航

• 声明式导航
• 编程式导航

P39 声明式导航

通过一个​ <​navigator>组件实现页面跳转

1. 导航到tabBar页面(被配置为tabBar)的页面:
   • url=”/要跳转到的页面地址”(必须以/开头)
   • open-type=’switchTab’
2. 导航到非tabBar页面(没有被配置为tabBar的页面):
   • url=”/要跳转到的页面地址”(必须以/开头)
   • open-type:”navigate”
3. 后退导航:
   • open-type=”navigateBack”
   • delta=”1″(表示后退的层级)

P40 编程式导航(事件处理)

通过调用小程序的导航API实现页面跳转

// 声明一个按钮,为点击事件声明一个点击事件处理函数
<button bindtap="gotoMesssage">跳转到消息页面</button>

gotoMessage(){  // 事件的内部写方法
    wx.switchTab({  // 调用内部自带的API需要写到传入参数
    url:'目的地址'
    })
}

• wx.switchTab:导航到tabBar页面
• wx.navigateTo:导航到非tabBar页面
• wx.navigateBack:后退导航

P41 导航传参

1.声明式导航传参:(url属性的路径后面可以携带参数)

• 参数与路径之间用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

// 例
<navigator url="/pages/info?name=zs&age=20"跳转到info页面</navigator>
// 在url后传递的name的值为zs和age的值为20

2.编程式导航传参

// WXML:
<button bindtap="goto2">跳转到info2页面</button>
// JavaScript
goto2(){
    wx.navigateTO({
    url="/pages/info?name=ls&gender=男"
    })
}

3.onLoad中接收导航参数

onLoad:function(options){  // options为接收的页面导航参数
    console.log(options)  // 在控制台打印options
    this.setData({x:options})  // 将接收到的参数存储到data中
}

P42 下拉刷新(页面)

• .json配置文件中,enablePullDownRefresh设置为true

P47-P49 生命周期

生命周期

• 生命周期(强调时间段)
  • 应用生命周期(范围较大):启动→运行→销毁
  • 页面生命周期(范围较小):加载→渲染→销毁
• 生命周期函数(强调时间点)
  • 应用的生命周期函数(启动→运行→销毁期间需要依次调用的函数)(app.js内):
  • onLaunch:function(options){} :小程序初始化完成时执行此代码,全局只触发一次,可以做一些初始化工作
  • onShow:function(options){} :小程序从后台进入前台时触发
  • onHide:function(){} :小程序从前台进入后台时触发
  • 页面的生命周期函数(加载→渲染→销毁期间需要依次调用的函数)(页面的.js内):
  • onLoad:function(option){} :监听页面加载,一个页面只调用一次
  • onShow:function(){} :监听页面显示
  • onReady:function(){} :监听页面渲染完成,一个页面只调用一次
  • onHide:function(){} :监听页面隐藏
  • onUnload:funcction(){} :监听页面卸载,一个页面只调用一次

P50 WXS

WXML:

• 无法调用.js中定义的函数(能绑定事件)
• 可以调用wxs中定义的函数

wxs和JavaScript:

• 语法类似
• 完全不同

wxs关联方式:

• 内嵌wxs脚本(写在WXML的\标签内)需要属性module
• 外联wxs脚本(写在.wxs文件中且需src指定地址)需要属性module和src且必须为相对路径

<view>{{mq.toupper(username)}}</view>
<wxs module="m1">
 module.exports.toUpper = function(str){    // 实例化module.exports对象才能对外界共享函数
     return str.toUpperCase()
 }