微信小程序开发（第三期）（视图逻辑）：页面导航、导航传参、页面事件、上拉触底、小程序生命周期、WXS语法的使用

微信小程序（视图逻辑）

一、 页面导航

1、声明式导航

1.1 声明式导航（跳转到tabBar页面）

1.2 声明式导航（跳转到非tabBar页面）

• 如何跳转到非tabBar页面，我们的属性可以不写的

1.3 页面后退

2、编程式导航

编程式导航的方法 及参数（tabBar页面）

2.1通过编程式导航（跳转到tabBar页面）

编程式导航的方法及参数（非tabBar页面）

2.2 通过编程式导航跳转到（非tabBar页面）

2.3 页面后退（编程式导航实现）

• 代码如下所示：
  
• 后退一级默认可以不写

二、导航传参

1、声明式导航传参

2、 编程式导航传参

3、通过onLoad生命周期函数的形参获取参数

• 为了全局利用，我们可以在data中定义一个空对象引用，然后通过setData进行赋值，以便其他作用域使用数据。

三、页面事件

（一）、下拉刷新事件

3.1 下拉刷新事件

具体来说，用户可以在页面的顶部下拉，直到触摸或滑动达到一定的阈值，然后释放手指。系统或应用会检测到这一动作，并执行刷新操作，以获取最新的内容或数据。这样的设计使得用户能够方便地手动更新页面，而不必依赖自动刷新或其他方式。

3.2 开启下拉刷新

	"enablePullDownRefresh": true

3.3 配置下拉刷新窗口样式

	"backgroundColor": "#efefef",
	"backgroundTextStyle": "dark"

3.4 监听下拉刷新事件

  onPullDownRefresh() {
		// 当监听到了下拉刷新事件，就将count的值变为零
		this.setData({
			count: 0
		})
  },

3.5 停止（关闭）下拉刷新效果

• 由于下拉刷新触发后他会有个默认市场，假设用户下拉请求数据，然后数据请求过来了，你还处于下拉状态不就有问题了吗？
• 所以这里我们就得处理一下，只要我们数据请求过来了，我们就让下拉刷新状态关闭掉！

// 关闭下拉刷新效果（一般用于数据请求完毕后）
wx.stopPullDownRefresh()	

（二）上拉触底事件

3.6 什么是上拉触底事件

3.7 上拉触底的代码实现

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
		console.log("上拉触底事件触发成功！")
  },

• 在 onReachBottom（）生命周期方法中处理逻辑，例如上拉的时候触底了，我们就发送数据的请求。

3.8 配置上拉触底的距离

• 单位默认为 px

	"onReachBottomDistance": 150

四、上拉触底案例

需求：当我们上滑触底的时候，发送请求，加载数据。实现如上如所示的效果

4.1 编写获取颜色api请求方法

  /**
   * 页面的初始数据
   */
  data: {
		colorsList: []
	},
	
	// 获取颜色的请求方法
	getColors () {
		wx.request({
			url: 'https://applet-base-api-t.itheima.net/api/color',
			method: "GET",
			success: ({ data: result}) => {
				this.setData({
					colorsList: [...this.data.colorsList, ...result.data]
				})
				console.log("数据请求成功!")
			}
		})
	},

4.2 页面加载、下拉触底调用方法

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
		// 调用颜色方法
		this.getColors()
  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
		// 上拉触底 调用颜色方法
		this.getColors()
  },

这样就能够实现我们页面加载就发送请求，或者用户向下滑动触底的时候加载数据，然后不断地渲染，就能够实现商品列表页的功能。

4.3 wxml 和 wxss样式代码

	<!-- 结构 -->
<view wx:for="{{ colorsList }}" wx:key="index" class="color-item" style="background-color: rgba({{ item }})">{{ item }}</view>

/* 样式 */

.color-item {
	border: 1rpx solid #efefef;
	border-radius: 10rpx;
	line-height: 200rpx;
	margin: 15rpx;
	text-align: center;
	text-shadow: 0rpx 0rpx 5rpx #fff;
	box-shadow: 1rpx 1rpx 6rpx #aaa;
}

• 以上代码就能基本的完成功能了，只不过还需要做加载效果和节流防抖效果（也是最关键的）

4.4 页面加载loading效果

• 在获取颜色请求前开启 Loading 效果，然后无论成功失败我们都需要进行隐藏

	// 获取颜色的请求方法
	getColors () {
		// Loading加载效果
		wx.showLoading({
			title: '数据加载中...',
		})
		wx.request({
			url: 'https://applet-base-api-t.itheima.net/api/color',
			method: "GET",
			success: ({ data: result}) => {
				this.setData({
					colorsList: [...this.data.colorsList, ...result.data]
				})
				console.log("数据请求成功!")
			},
			complete: () => {
				// 关闭 Loading 效果
				wx.hideLoading()
			}
		})
	},

4.5 数据请求 节流防抖功能

• 节流防抖一般我们用的最多的就是 节流阀

第一步：我们需要先声明一个阀门(在 data 全局变量中定义一个变量)

		// 节流阀
		isLoading: false

第二步：我们发送请求的时候是不是水龙头就和开水一样打开了，此时我们需要将状态设置为true（当状态为true的时候，是不允许在次发送请求的）

// 获取颜色的请求方法
	getColors () {
		// 将节流阀设置为true，此时不能再发送请求了
		this.setData({
			isLoading: true
		})
	}

第三步：我们再下拉触底 请求数据的时候，进行判断，是否符合发送 请求获取数据的条件 如果 isLoading 是 true ，则表示上一次请求还未结束

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
		if (this.data.isLoading) return
		this.getColors();
  },

• 这样经过我们节流防抖的处理，我们后台服务器数据库请求就做好了一个安全保障。

五、生命周期

5.1 什么是生命周期

5.2 小程序生命周期分类

5.3 什么是生命周期函数

5.4 生命周期函数的分类

5.5 应用的生命周期函数

App({

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

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

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

	/**
	 * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
	 */
	onError: function (msg) {
		
	}
})

5.6 页面生命周期函数

六、WXS

6.1 什么是WXS

6.2 WXS应用场景

6.3 WXS和JavaScript的区别

6.4 内嵌WXS语法

<!-- 调用 内嵌 WXS（过滤器） 中的方法处理数据 -->
<view>{{ w1.toUpper(username) }}</view>

<!-- 内嵌WXS 过滤器 方法 -->
<wxs module="w1">
	// 将username的字符串转为大写方法
	module.exports.toUpper = function(str){
		return str.toUpperCase()
	}
</wxs>

6.5 外联式 WXS

• 1、定义：创建一个文件在 uitls文件中 后缀为 .wxs
  

// 创建一个普通函数（具名函数）
function toLower(string) {
	return string.toLower()
}


// 导出方法，将方法暴露出去
module.exports = {
	toLower: toLower
}

2、使用tools.wxs

<!-- 调用 内嵌 WXS（过滤器） 中的方法处理数据 -->
<view>{{ w1.toLower(username) }}</view>

<!-- 外链式 WXS 语法引入 -->
<wxs src="/utils/tools.wxs" module="w1"></wxs>

• 调用方法，将大写转为小写