微信小程序4，生命周期，wxs、导航

生命周期（Life Cycle）是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。小程序的运行的过程，就是小程序的生命周期。

生命周期

生命周期的分类

• 应用生命周期，特指小程序从启动到运行再到销毁的过程
• 页面生命周期，特指小程序中，每个页面的加载到渲染再到销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大。

什么是生命周期函数

是由小程序框架提供的的内置函数，会伴随着生命周期，自动按次序执行。生周期函数的作用就是允许陈鼓学院在特定时间点，执行某些特定的操作。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数分类

• 应用生命周期函数，特指小程序从启动到运行再到销毁的期间依次调用的函数
• 页面生命周期函数，特指小程序中，每个页面的加载到渲染再到销毁的期间依次调用的函数

应用生命周期函数

小程序的应用周期函数需要在app.js中进行说明。

• onLaunch 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）在这里可以对某些数据进行初始化，比如将本地存储的数据加载在小程序中。
• onShow 当小程序启动，或从后台进入前台显示，会触发 onShow
• onHide 当小程序从前台进入后台，会触发 onHide

前台后台即是小程序的运行状态

页面生命周期函数

小陈故乡的页面生命周期函数需要在页面的.js文件中进行声明

• onLoad 监听页面加载，一个页面只调用一次
• onShow 监听页面显示
• onReady 监听页面初次渲染完成，一个页面只能调用一次
• onHide 监听页面移仓
• onUnload 监听页面卸载，一个页面只调用一次

wxs

wxs是一门类似于javascript的脚本语言，但本质上两者不同，内嵌形式的wxs编写在wxml文件中标签内，必须提供一个module属性，用来指定当前wxs的模块名称，方便wxml中访问模块中的成员。

<view>
  {{m1.toUpper(username)}}
</view>
<wxs module="m1">
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

wxs代码还可以编写在以wxs为后缀名的文件内，就像javascript代码可以编写在.js为后缀名的文件中一样。

function toLower(str){
  return str.toLowerCase()
}
module.exports={
  toLower:toLower
}

在wxml中引入外联的wxs脚本时，必须为标签添加module和src属性，其中module用来指定模块的名称，src用来指定引入的脚本路径，且必须是相对路径。

<view>
  {{m2.toLower(username2)}}
</view>
<wxs src="../until/tools.wxs" module="m2"></wxs>

wxs与JavaScript的不同

• wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用，但是不能将定义的函数作为组件的事件回调函数。

• 具有隔离性，指的是wxs代码的运行环境和其他JavaScript代码是隔离的。主要体现在：

  • wxs不能调用js中定义的函数
  • wxs不能调用小程序提供的API

• 性能好，主要体现在ios设备上，小程序的wxs会比JavaScript代码快2~20倍，安卓上无差异。

导航

声明式导航

使用navigator进行页面链接。

• target:在哪个目标上发生跳转，默认当前小程序
  • self 当前小程序
  • miniProgram 其它小程序
• url:当前小程序内的跳转链接
• open-type:跳转方式
  • navigate 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
  • redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • reLaunch 关闭所有页面，打开到应用内的某个页面
  • navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
  • exit 退出小程序，target="miniProgram"时生效
• delta 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
• app-id 当target="miniProgram"且open-type="navigate"时有效，要打开的小程序 appId
• path 当target="miniProgram"且open-type="navigate"时有效，打开的页面路径，如果为空则打开首页
• extra-data 当target="miniProgram"且open-type="navigate/navigateBack"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
• hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果
• hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
• hover-start-time 按住后多久出现点击态，单位毫秒

编程式导航

写法：

wx.switchTab({
  url: '/index'
})

• wx.navigateTo、 wx.navigateToMiniProgram 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
• wx.redirectTo关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.reLaunch关闭所有页面，打开到应用内的某个页面
• wx.navigateBack、 wx.navigateBackMiniProgram 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
• wx.exitMiniProgram 退出当前小程序。必须有点击行为才能调用成功。