微信小程序-3

页面导航

声明式导航

基本概念：

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

具体演示：

• 无参写法

<navigator url="/pages/list/list" open-type="switchTab">导航到信息列表</navigator>

• 含参写法

<navigator url="/pages/list/list?name=zs&age=28" open-type="switchTab">导航到信息列表</navigator>

后退导航：

<navigator open-type="navigateBack" delta="1">返回到上一页</navigator>

编程式导航

基本概念：

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

具体演示：

• index.js（无参写法）

Page({
  // 通过 wx.switchTab(...)，跳转到 tabBar 页面
  // 如果想要跳转到非tabBar页面(即普通页面)，请使用 wx.navigateTo(...)
  goto() {
    wx.switchTab({
      url: '/pages/list/list',
    })
  }
})

• index.js（含参写法）

Page({
  // 通过 wx.switchTab(...)，跳转到 tabBar 页面
  // 如果想要跳转到非tabBar页面(即普通页面)，请使用 wx.navigateTo(...)
  goto() {
    wx.switchTab({
      url: '/pages/list/list?name=zs&age=28',
    })
  }
})

• index.wxml

<button bindtap="goto">跳转</button>

后退导航：

• index.wxml

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

• index.js

Page({
	// 后退到上一页
	gotoBack() {
		wx.navigateBack()
	}
})

接收导航参数

无论是 声明式导航 还是 编程式导航，都是通过下面方式进行接收参数

• index.js

Page({
	// 生命周期函数——监听页面加载
	onLoad: function (options) {
		console.log(options)	// 输出传递过来的参数
	}
})

使用导航参数

Page({

	// 页面的初始数据
	data: {
		query: {}	// 导航传递过来的参数对象
	}
	
	// 生命周期函数——监听页面加载
	onLoad: function (options) {
		console.log(options)	// 输出传递过来的参数
		this.setData({
			query: options
		})
	}
})

页面事件

下拉刷新事件

启用事件

• 方式一：全局开启下拉刷新

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

• 方式二：局部开启下拉刷新（推荐使用）

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

配置样式

• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听事件

Page({
	// 页面相关事件处理函数——监听用户下拉动作
	onPullDownRefresh: function () {
		console.log('触发了index页面的下拉刷新')
	}
})

停止效果

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏 loading 效果

Page({
	// 页面相关事件处理函数——监听用户下拉动作
	onPullDownRefresh: function () {
		console.log('触发了index页面的下拉刷新')
	}
	
	// 当完成需求后，调用此函数，关闭下拉刷新的效果
	wx.stopPullDownRefresh()
})

上拉触底事件

概念：手指在屏幕上拉滑动，加载更多数据

监听事件

Page({
	// 页面上拉触底事件的处理函数
	onReachBottom: function () {
		console.log('触发了上拉触底事件')
	}
})

触底距离

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

• 小程序默认触底距离是 50px
• 可以在 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离

全局的 app.json 或者 index.json 配置如下内容：

{
	"onReachBottomDistance": 150
}

生命周期

生命周期函数

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

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

分类：分为小程序层面的 应用的生命周期函数 和 页面层面的 页面的生命周期函数

应用的生命周期函数

• app.js

App({
	// 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作
	onLaunch: function(options) {...},
	
	// 小程序启动，或者从手机后台进入前台显示时候触发
	onShow: function(options) {...},
	
	// 小程序从前台进入手机后台时候触发
	onHide: function() {...}
})

页面的生命周期函数

• index.js

Page({
	onLoad	 : 	function(options) {...},	// 监听页面加载，一个页面只调用1次
	onShow	 : 	function() {...},			// 监听页面显示
	onReady	 : 	function() {...},			// 监听页面初次渲染完成，一个页面只调用1次
	onHide	 : 	function() {...},			// 监听页面隐藏
	onUnload :	function() {...}			// 监听页面卸载，一个页面只调用1次
})

wxs 脚本

认识 wxs

概念：WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构

wxs 和 JavaScript 的关系：

• wxs 有自己的数据类型

number、string、boolean、object(对象类型)、function、array、date、regexp(正则)

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

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写...
支持：var定义变量、普通 function 函数等类似于 ES5 的语法

• wxs 遵循 CommonJS 规范

module 对象
require() 函数
module.exports 对象

应用场景：

• wxs 典型的应用常见就是充当"过滤器"，经常配合 Mustache 模板语法进行使用，例如：

<view>{{ m1.toUpper(username) }}</view>

• 但是，在 wxs 中定义的函数不能作为组件的事件回调函数，例如下面的用法是错误的：

<button bindtap="m2.toLower">按钮</button>

隔离性：

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的：

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

运行速度：

在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
在 Android 设备上，二者的运行效率无差异

内嵌的 wxs 脚本

• index.js

Page({
  // 页面的初始数据
  data: {
    username: 'zs'
  }
})

• index.wxml

<view>{{ m1.toUpper(username) }}</view>

<wxs module="m1">
  // 将文本转换为大写形式：zs => ZS
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

外联的 wxs 脚本

// index.wxs 文件

function toLower(str) {
	return str.toLowerCase()
}

module.exports = {
    toLower: toLower
}

使用外联的 wxs 脚本

• index.wxml

<!-- 调用 m2 模块中的方法 -->
<view>{{ m2.toLower(country) }}</view>

<!-- 引用外联的 tool.wxs 脚本，并命名为 m2 -->
<wxs src="../../utils/tool.wxs" module="m2"></wxs>