一、微信小程序页面导航
页面导航：指的是页面之间的相互跳转。
浏览器中实现页面导航的方式有两种：
（1）<a>链接；
（2）location.href
1、小程序实现页面导航的方式
（1）声明式导航：
a、在页面声明一个<navigator>导航组件
b、通过点击<navigator>组件实现页面跳转
（2）编程式导航
调用小程序的导航API
2、声明式导航
2.1 跳转到tabBar页面
<navigator url="/pages/message/message" open-type="switchTab">图表页面</navigator>
url：表示要跳转到的页面的地址。必须以 / 开头
open-type：表示跳转的方式，必须为switchTab
2.2 跳转到非tabBar页面
url：表示要跳转到的页面的地址。必须以 / 开头
open-type：表示跳转的方式，必须为navigate.可省略不写
3.3 后退导航
open-type：值必须是naviateBack，表示要后退的导航
delta：值必须是数字，表示后退层级；默认值为1（可视情况省略）
<navigator open-type="navigateBack" delta="2">页面后退</navigator>
3、编程式导航
3.1 tabBar页面
wx.switchTab(Object object)，参数属性如下：
url：需要跳转的tabBar页面的路径，路径后不能带参数（必填）
sucess：接口调用成功后的回调函数
fail：接口调用失败后的回调函数
complete：接口调用结束后的回调函数
gotoMessage() {
wx.switchTab({
url:'/pages/message/message'
})
}
3.2 导航到非tabBar页面
wx.navigateTo(Object object),参数如下：
url：需要跳转的tabBar页面的路径，路径后可以带参数（必填）
sucess：接口调用成功后的回调函数
fail：接口调用失败后的回调函数
complete：接口调用结束后的回调函数
3.3 后退导航
wx.navigateBack(Object object),参数如下：
delta：返回的页数，若大于现有页面数，则返回首页
sucess：接口调用成功后的回调函数
fail：接口调用失败后的回调函数
complete：接口调用结束后的回调函数
4、导航传参
4.1 声明式导航传参
参数与路径之间用？分隔
参数键与参数值用=相连
不同参数用&分隔
4.2 编程式导航传参
wx.navigateTo(Object object)跳转页面，也可携带参数
4.3 在onload中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到
二、微信小程序页面事件
1、下拉刷新
移动端专有名词，指的是手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
1.1 启用下拉刷新的两种方式：
（1）全局开启下拉刷新：(不推荐使用)
app.json----window节点------enablePullDownRefresh设置为true
（2）局部开启下拉刷新：（为需要的页面单独开启下拉刷新效果）
页面的.json配置文件中，enablePullDownRefresh设置为true
1.2 配置下拉刷新窗口的样式
在全局或页面的.json配置文件中，通过backgroundColor和backgroundTextStyle配置下拉刷新窗口的样式：
backgroundColor：窗口的背景颜色，仅支持16进制的颜色值
backgroundTextStyle：loading的样式，仅支持dark和light
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
1.3 监听页面的下拉刷新事件
在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件
1.4 停止下拉刷新效果
wx.stopPullDownRefresh()，可以停止当前页面的下拉刷新
2、上拉触底
通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
2.1 监听页面上拉触底事件
在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件
节流处理
2.2 配置上拉触底的距离
上拉触底的距离：触发上拉触底事件时，滚动条距离页面底部的距离
全局或页面的.json配置文件中，onReachBottomDistance()配置上拉触底的距离
三、微信小程序的生命周期
生命周期：一个对象从创建---运行---销毁的整个阶段
1、小程序生命周期（时间段）的两个分类：
（1）应用生命周期：小程序从启动---运行---销毁的过程
（2）页面生命周期：每个页面的加载----渲染---销毁的过程
2、生命周期函数（时间点）
由小程序框架提供的内置函数，会伴随生命周期，自动按次序执行
作用：允许在特定时间，执行某些特定操作
3、生命周期函数的分类：
（1）应用生命周期函数：小程序从启动---运行---销毁期间依次调用的那些函数
（2）页面生命周期函数：每个页面的加载----渲染---销毁期间依次调用的函数
3.1 应用生命周期函数
需要在app.js中进行声明
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
console.log('onlaunch')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {},
})
3.2 页面生命周期函数
页面生命周期函数需要在.js文件中进行声明，
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
四、wxs脚本
wxs(weixin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构
wxml中无法调用在页面中的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”
1、wxs与javaScript的关系
区别：
（1）wxs有自己的数据类型
number string boolean object function array date regexp
（2）wxs不支持类似于Es6及以上的语法形式
不支持：let const 解构赋值 展开运算符 箭头函数 对象属性简写.....
支持：var定义变量、普通function函数等类似于Es5的语法
（3）wxs遵循CommonJS规范
module对象
require函数
module.exports对象
2、内嵌wxs脚本
wxs代码可以编写在wxml文件中的<wxml>标签内，就像JavaScript代码的<script>标签
wxml文件中的每个<wxs></wxs>标签，必须提供moudle属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员：
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper = function(str) {
return str.toUpperCase()
}
</wxs>
3、外联的wxs脚本
wxs代码还可编写在以.wxs为后缀名的文件内。
在wxml引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中：
module用来指定模块名称
src用来指定要引入的脚本的路径，且必须是相对的路径
4、wxs的四个特点
（1）与JavaScript不同
（2）不能作为组件的事件回调
wxs典型的应用场景是'过滤器'，经常配合Mustache语法进行使用；
但是在wxs中定义的函数不能作为组件的事件回调函数。
（3）隔离性：wxs的运行环境与JavsScript代码是隔离的。wxs不能调用js中定义的函数；wxs不能调用小程序提供的API
(4)性能好：在ios设备上，小程序内的WXS会比JavaScript代码块2-20倍；在android设备上，二者的运行效率无差异
