小程序中的声明式导航、编程式导航以及生命周期函数、wxs脚本

一、小程序中实现页面导航的两种方式

① 声明式导航

在页面上声明一个<navigator>导航组件，通过点击<navigator>组件实现页面跳转

② 编程式导航

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

二、声明式导航

1.跳转到tabBar首页案例：

在使用<navigator>组件跳转到指定的页面时，需要指定url属性和open-type属性，其中：

url表示要跳转的页面的地址，必须前面加 /

open-type表示跳转的方式，必须为switchTab

<navigator url="/pages/list/list" open-type="switchTab">点我跳转到首页</navigator>

2.跳转到非tabBar页面案例：

非tabBar页面指的是没有配置为tabBar的页面。

在使用<navigator>组件跳转到普通的非tabBar页面时，需要指定url属性和open-type属性，其中：

url表示要跳转的页面的地址，必须前面加 /

open-type表示跳转的方式，必须为navigate

注意：为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以不写。

<navigator url="/pages/info/info" open-type="navigate">点我跳转非tabBar页面</navigator>

3.后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

open-type的值必须是navigateBack，表示要进行后退。

delta的值必须是数字，表示要后退的层级。

注意：为了简便，如果只是后退到上一个页面，则可以省略delta属性，因为其默认值就是1。

<navigator open-type="navigateBack" delta="1">后退</navigator>

三、编程式导航

1.编程式导航，导航到tabBar页面

调用wx.switchTab（Object object）方法，可以跳转到tabBar页面，其中Object参数对象的属性列表属性如下：

<button bindtap="junpHome">跳转到首页</button>

注意此处前面加一个 /
 junpHome(){
    wx.switchTab({
      url: '/pages/list/list',
    })
      },

2.导航到非tabBar页面

调用wx.navigateTo（Object object）方法，可以跳转到非tabBar页面，其中Object参数对象的属性列表属性如下：

<button bindtap="goToInfo">跳转到非tabBar页面</button>

 goToInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

3.后退导航

调用wx.navigateBack（Object object）方法，可以返回上一个页面或多级页面，其中Object参数对象的属性列表属性如下：

<button bindtap="goBack">后退</button>

 goBack(){
    wx.navigateBack()
  },

四、导航传参

1.声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用？分隔

参数键与参数值用=相连

不同参数用&分隔

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

2.编程式导航传参

调用wx.navigateTo（Object object）方法跳转页面时，也可以携带参数

<button bindtap="gotoInfo">跳转到info页面</button>

	gotoInfo(){
		wx.navigateTo({
			url:"/pages/info/info?name=ls&age=20"
		})
	},

3.在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到

data: {
		// 接收传过来的参数
  query:{}
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
this.setData({
	query:options
})
	},

五、页面事件

1.启用下拉刷新的两种方式

① 全局开启下拉刷新

在app.json的window节点中，将enablePullDownRefresh设置为true

② 局部开启下拉刷新

在页面的.json配置文件中，将enablePullDownRefresh设置为true

在实际开发中推荐第二种，为需要的页面开启

2.监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh（）函数即可监听当前页面的下拉刷新事件

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，此时调用wx.stopPullDownRefresh()可以停止页面的下拉刷新。

<view>
	{{count}}
</view>
<button bindtap="addCount">+1</button>


data: {
	count:0
	},
	addCount(){
		this.setData({
			count:this.data.count+1
		})
	},
onPullDownRefresh() {
this.setData({
	// 下拉刷新让点击事件变为0
	count:0
})，
//停止下拉刷新
wx.stopPullDownRefresh()
	},

3.页面上拉触底事件

在页面的.js文件中，通过onReachBottom（）函数即可监听当前页面的上拉触底事件。

4.配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置，默认是50px，在实际开发中根据自己的需求去改。

六、生命周期

1.生命周期分类

在小程序中，生命周期分为两类，分别是：

① 应用生命周期

小程序从启动->运行->销毁的过程

② 页面生命周期

页面的加载->渲染->销毁的过程

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

 2.什么是生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。如：页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

3.生命周期函数的分类

小程序中的生命周期函数分为两类，分别是：

① 应用的生命周期函数

小程序从启动->运行->销毁期间依次调用的那些函数

② 页面的生命周期函数

页面从加载->渲染->销毁期间依次调用的那些函数

4.应用的生命周期函数

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

/**
	 * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
	 */
	onLaunch: function () {
console.log(1111);
	},

	/**
	 * 当小程序启动，或从后台进入前台显示，会触发 onShow
	 */
	onShow: function (options) {
console.log(22222);
	},

	/**
	 * 当小程序从前台进入后台，会触发 onHide
	 */
	onHide: function () {
		console.log(33333)
	},

5.页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行声明。

//页面的.js文件
Page（{
onLoad：function（options）{}  //监听页面加载，一个页面只调用一次
onShow：function（）{}  //监听页面显示
onReady：function（）{}  //监听页面初次渲染完成，一个页面只调用一次
onHide：function（）{}   //监听页面隐藏
onUnload：function（）{}  //监听页面卸载，一个页面只调用一次

}）

七、wxs

1.什么是wxs

wxs是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。

2.wxs的应用场景

wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。wxs典型的应用场景就是"过滤器"。

3.wxs和js的区别

虽然wxs的语法类似于js，但是wxs和js是完全不同的两种语言。

① wxs有自己的数据类型

●number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、

●function 函数类型、array 数组类型、date 日期类型、regexp 正则

② wxs不支持类似于ES6及以上的语法形式

●不支持: let、 const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...

●支持: var 定义变量、普通function函数等类似于ES5的语法

③wxs 遵循CommonjS规范

●module 对象

●require() 函数

●module.exports 对象

基本用法：

1.内嵌wxs脚本

wxs代码可以编写在wxml文件中的<wxs>标签内，就像js代码可以编写在html文件中的<script>标签内一样。

wxml文件中的每个<wxs></wxs>标签，必须提供moudle属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

//data定义一个数据
	username:"zs",

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

2.定义并使用wxs外联脚本

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

在wxml中引入外联的wXS脚本时，必须为<wxs>标签添加module和src属性，其中:

●module用来指定模块的名称

●src用来指定要引入的脚本的路径，且必须是相对路径

//data定义数据
		name:"ym",

//后缀.wxs文件
function toUpper(str){
	return str.toUpperCase()
}
module.exports={
	// 小程序内不支持简写形式
	toUpper:toUpper
}

.wxml文件
<view>
{{m2.toUpper(name)}}	
</view>
<wxs src="../index/toUpper.wxs" module="m2"/>

3.wxs和js的不同点

为了降低wxs (WeiXin Script)的学习成本，wxS 语言在设计时借大量鉴了JavaScript的语法。但是本质上,wxs和JavaScript是完全不同的两种语言!

① 不能作为组件的事件回调

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

② 隔离性

隔离性指的是WXs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面:
wxs不能调用js中定义的函数

wxs不能调用小程序提供的API

③ 性能好

在ios设备上，小wxs会比JavaScript代码快2~20倍

在android设备上,二者的运行效率无差异