一、页面导航
注意：导航的url路径，都要以 / 开头。
1. 声明式导航
在页面上声明一个 导航组件，通过点击 组件实现页面跳转。（vue中的 router-link标签）
（1）导航到 tabBar 页面
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性 和 open-type 属性，其中：
① url 表示要跳转的页面的地址，必须以 / 开头
② open-type 表示跳转的方式，必须为 switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
（2）导航到非 tabBar页面
在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性 和 open-type属性，其中：
① url 表示要跳转的页面的地址，必须以 / 开头
② open-type 表示跳转的方式，必须为 navigate
③ 为了方便, 非tabBar 页码的跳转时open-type 也可以省略
<navigator url="/pages/info/info" open-type="navigate">跳转到info页面</navigator>
<navigator url="/pages/info/info" >跳转到info页面</navigator>
（3）后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type属性 和 delta 属性，其中：
① open-type 的值必须是 navigateBack ，表示要进行后退导航
② delta 的值必须是 数字，表示要后退的层级
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>
注意：
① 为了简便，如果只是后退到上一页面，则可以省略 delta 属性因为其默认值就是 1。
② tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到tabBar 页面，会关闭其他所有非tabBar 页面,所以当处于tabBar 页面时, 无页面可退。
2. 编程式导航
（1）导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
<button bindtap="gotoMessage">跳转到messae页面</button>
gotoMessage () {
wx.switchTab({
// 代表要跳转的路径
url: '/pages/message/message',
})
},
（2）导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表, 如下：
<button bindtap="gotoInfo">跳转到Info页面</button>
gotoInfo () {
wx.navigateTo({
url: '/pages/info/info',
})
},
（3）后退导航
调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的, 属性列表如下：
<button bindtap="goBack">编程式导航实现后退</button>
goBack () {
// 如果不传递参数就是返回上一页
// 如果要传递参数则是传递 delta数字型， 代表返回的层级。
wx.navigateBack()
},
注意： tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到tabBar 页面，会关闭其他所有非tabBar 页面,所以当处于tabBar 页面时, 无页面可退。
3. 导航传参
① 无论是编程式导航还是声明式导航，都可以用 查询字符串 的方式传递参数。
② 跳转到 tabBar页面 时，不能携带参数。
// 声明式导航
<navigator url="/pages/info/info?name=zs&age=20">跳转至info页面</navigator>
// 编程式导航
<button bindtap="gotoInfo2">跳转到info页面</button>
gotoInfo2 () {
wx.navigateTo({
url: '/pages/info/info?name=李&gender=男',
})
},
③ 传递的参数可以在 onLoad( ) 生命周期的钩子函数中获取到。
data: {
// 导航传递的参数
query: {}
},
onLoad: function (options) {
// 通过声明式导航和编程式导航 都可以在onLoad生命周期函数中获取传递的参数
console.log(options);
// 将导航传递的参数转存在data中
this.setData({
query: options
})
},
二、页面事件
1. 下拉刷新事件
（1）什么是下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
（2）启用下拉刷新
启用下拉刷新有两种方式：
① 全局开启下拉刷新
在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
② 局部开启下拉刷新
在页面的.json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
（3）配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：
① backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
② backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
（4） 监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
// 与data同级别的事件函数，触发了下拉刷新事件就会立即调用该函数
onPullDownRefresh: function () {
console.log("触发了下拉刷新");
},
（5） 停止下拉刷新的效果
① 当处理完下拉刷新后，下拉刷新的 loading 效果不会主动消失。
② 实际开发中，我们会在下拉刷新的处理函数中发起网络请求，在请求的complete回调函数中，手动调用 wx.stopPullDownRefresh() 停止当前页面的下拉刷新。（或者用async、await修饰）
// 下拉刷新事件
onPullDownRefresh: function () {
wx.request({
url: '',
method: 'GET',
success: (res) => {},
fail(){},
complete(){
// 无论请求成功还是失败，结束时都应该关闭下拉刷新
wx.stopPullDownRefresh()
}
})
},
2. 上拉触底事件
（1） 什么是上拉触底
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
（2）监听页面的上拉触底事件
在页面的.js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：
onReachBottom: function () {
/*
上拉触底事件不需要开启，直接监听就可以
在全局配置的window节点中或者页面的配置文件中可设置触底距离：
上拉触底的距离：默认50像素，单位省去,我们会在触发了上拉触底事件时获取下一页的数据
"onReachBottomDistance": 50
*/
console.log("触发了上拉触底事件");
/*
在上拉触底事件中，需要做节流处理
防止频繁触发该事件导致频繁发起请求
*/
},
（3）配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 节点来配置上拉触底的距离。小程序默认的触底距离是 50px。
三、生命周期
1.应用的生命周期函数
① 特指 小程序 从启动 -> 运行 -> 销毁期间依次调用的那些函数。
② 小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
})
2. 页面的生命周期函数
① 特指小程序中，每个页面 从加载 -> 渲染 -> 销毁期间依次调用的那些函数。
② 小程序的页面生命周期函数需要在 页面的.js 文件 中进行声明，示例代码如下：
/**
* 生命周期函数--监听页面加载,一个页面只调用一次
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成，一个页面只调用一次
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载，一个页面只调用一次
*/
onUnload: function () {
},
四、wxs脚本
1. 什么是 wxs
WXS （WeiXin Script ）是小程序独有的一套脚本语言，结合 WXML ,可以构建出页面的结构。
2. wxs 的应用场景
wxml 中无法调用在页面的 .js 中定义的函数（不包括事件绑定），但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中wxs 的典型应用场景就是 “过滤器”。
3. wxs 和 JavaScript 的关系
虽然 wxs 的语法类似于 JavaScript ，但是wxs 和JavaScript 是完全不同的两种语言：
① wxs 有自己的数据类型
number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
function 函数类型、array 数组类型、 date 日期类型、 regexp 正则
② wxs 不支持类似于 ES6 及以上的语法形式
不支持：let 、const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
支持：var 定义变量、普通 function 函数等类似于 ES5 的语法
③ wxs 遵循 CommonJS 规范
module 对象
require() 函数
module.exports 对象
4. 基础语法
（1）内嵌 wxs 脚本
① wxs 代码可以编写在 wxml 文件中的 <wxs></wxs> 标签内，就像 Javascript 代码可以编写在 html 文件中的 标签内一样。
② wxml 文件中的每个<wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在wxml 中访问模块中的成员。
<!-- 定义一个文本，调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定义一个wxs的标签，并指定module模块名称 -->
<wxs module="m1">
<!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str) {
return str.toUpperCase()
}
</wxs>
（2）外联的 wxs 脚本
① wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 Javascript 代码可以编写在以 .js 为后缀名的文件中一样。
// 1.定义方法
function toLower(str) {
return str.toLowerCase()
}
// 2.暴露成员
module.exports = {
toLower: toLower
}
② 在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：
module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是 相对路径。
<!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.调用 m2 模块的方法 -->
<view>{{ m2.toLower(country) }}</view>
（3）wxs文件的相互导入
① vue中文件的导入导出，用的都是import 和 export。
② 小程序中，在wxs文件中导入其他的wxs文件，使用 require()，路径必须是 相对路径。
（4）WXS 的特点
① 不能作为组件的事件回调
wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：
<view>{{ m2.toLower(country) }}</view>
但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：
<button bindtap="m2.toLower(country)"></button>
② 隔离性
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
wxs 不能调用js 中定义的函数
wxs 不能调用小程序提供的API
五、getApp()
① 在 app.js 中定义 属性和方法，全局页面都能使用。
App({
name:"吴磊"
})
② 在页面的 .js文件 中调用 getApp()方法，获取App实例。
Page({
data: { },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const app = getApp()
console.log(app.name);
},
})
