微信小程序_小程序视图与逻辑_day3

一、目标

A. 能够知道如何实现页面之间的导航跳转

B. 能够知道如何实现下拉刷新效果

C. 能够知道如何实现上拉加载更多效果

D. 能够知道小程序中常用的生命周期

二、目录

A. 页面导航

B. 页面事件

C. 生命周期

D. WXS脚本

E. 案例-本地生活(列表页面)

三、页面导航

3.1 什么是页面导航

页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:

A. 链接

B. location.href

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

A. 声明式导航

在页面上声明一个导航组件

通过点击组件实现页面跳转

B. 编程式导航

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

3.3 页面导航-声明式导航

3.3.1 导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面

在使用组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

A. url表示要跳转的页面的地址,必须以/开头

B. open-type表示跳转的方式,必须为switchTab

示例代码如下:

html 复制代码
<navigator url="/pages/3link/3link" open-type="switchTab">跳转到[联系我们]</navigator>

3.3.2 导航到非tabbar界面

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

在使用组件跳转到普通的非tabBar页面时,则需要指定url属性和open-type属性,其中:

A. url表示要跳转的页面的地址,必须以/开头

B. open-type表示跳转的方式,必须为navigate

示例代码

html 复制代码
<navigator url="/pages/4info/4info" open-type="navigate">跳转到[消息界面]</navigator>

3.3.3 后退导航

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

A. open-type的值必须是navigateBack,表示要进行后退导航

B. delta的值必须是数字,表示要后退的层级

示例代码如下:

html 复制代码
<navigator open-type="navigateBack" delta="1">后退【上一级】</navigator>

注意:为了方便,如果只是后退到上一页面,则可以省略delta属性,因为其默认值就是1

3.4 页面导航-编程式导航

3.4.1 导航到tabbar页面

调用wx.switchTab(Object object)方法,可以跳转到tabBar页面。其中Object参数对象的属性列表如下:

<button type="primary" bind:tap="goto">导航到【联系我们2】</button>

goto(){
	wx.switchTab({
		url: '/pages/3link/3link'
	})
},

3.4.2 导航到非tabbar页面

调用wx.navigateTo(Object object)方法,可以跳转到非tabBar的页面。其中Object参数对象的属性列表

属性:

<button type="warn" bind:tap="goto2">导航到【消息列表】</button>

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

3.4.3 后退导航

调用wx.navigateBack(Object object)方法,可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下:

<button bind:tap="goback2">返回【上一级】</button>

goback2(){
	wx.navigateBack()
},

3.5 页面导航-导航传参

3.5.1 声明式导航传参

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

A. 参数与路径之间使用?分隔

B. 参数键与参数值用=相连

C. 不同参数用&分隔

代码示例如下:

<navigator open-type="navigate" url="/pages/4info/4info?name=zs&age=18">声明式传参</navigator>

3.5.2 编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码示例如下:

<button bind:tap="goto3">编程式传参</button>

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

3.5.3 在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到,示例代码如下:

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
	//options就是导航传参过来的参数对象,返回的是一个对象
	console.log(options);
	//要把返回过来的数据放在data里面
	this.setData({
		user: options
	});
},

要把数据放在data里面,其它的方法可能被访问

四、页面事件-下拉刷新事件

4.1 什么是下拉刷新

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

4.2 启用下拉刷新

启用下拉刷新有两种方式:

A. 全局开启下拉刷新

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

B. 局部开启下拉刷新(推荐)

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

在实际开发中,推荐使用第二种方式,为需要的页面单独开启下拉刷新的效果

4.3 配置下拉刷新窗口的样式

在全局或页面的.json配置文件中,通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式,其中:

A. backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值

B. backgroundTextStyle用来配置下拉刷新loading的样式,仅支持dark和light

4.4 监听页面的下拉刷新事件

在页面的.js文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。例如,在页面的wxml中有如下的UI结构,点击按钮可以让count值自增+1;

页面结构:

html 复制代码
<view>count:{{count}}</view>
<button type="primary" bind:tap="countAdd">+1</button>

js:

data: {
	count:0
},
countAdd(){
	this.setData({
		count:this.data.count+1
	});
},

在触发页面的下拉刷新事件的时候,如果要把count的值重置为0,示例代码如下:

.json

js

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
	this.setData({
		count: 0
	})
},

4.5 停止下拉刷新

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

效果。此时,调用wx.stopPulldownRefresh()可以停止当前页面的下拉刷新。示例如下:

js 复制代码
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
	this.setData({
		count: 0
	})
	//当数据重置成功之后,调用此函数,关闭下拉刷新效果
	wx.stopPullDownRefresh()
},

五、上拉触底

5.1 什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

5.2 监听页面的上拉触底事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下:

js 复制代码
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
	console.log('已经触底了.......');
},

5.3 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离,可以在全局或局部的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离。

小程序默认的触底距离是50px,在实际开发中,可以根据自己的需求修改这个默认值。

六、生命周期

6.1 什么是生命周期

生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段,强调的是一个时间段。例如:

A. 张三出生,表示这个人生命周期的开始

B. 张三离世,表示这个人生命周期的结束

C. 中间张三的一生,就是张三的生命周期

我们可以把每个小程序运行的过程,也概括为生命周期:

A. 小程序的启动,表示生命周期的开始

B. 小程序的关闭,表示生命周期的结束

C. 中间小程序运行的过程,就是小程序的生命周期

6.2 生命周期的分类

在小程序中,生命周期分为两类,分别是:

A .应用生命周期

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

B .页面生命周期

特指小程序中,每个页面的加载->渲染->销毁的过程

其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:

6.3 什么是生命周期函数

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

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,

可以在onLoad生命周期函数中初始化页面的数据

注意:生命周期强调的是时间段,生命周期函数强调的是时间点

6.4 生命周期函数的分类

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

A. 应用的生命周期函数

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

B. 页面的生命周期函数

特指小程序中,每个页面从加载->渲染->销毁期间依次调用的那些函数

6.5 应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行申明,示例代码如下:

6.6 页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行生命,示例代码如下:

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

七、wxs脚本-概述

7.1 什么是wxs

WXS(WeiXin Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。

7.2 wxs的应用场景

wxml中无法调用在页面的.js中定义的函数,但是,wxml中可以调用wxs中定义的函数。因此,小程序中

wxs的典型应场景就是"过滤器"

7.3 wxs和js的关系

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

A. wxs有自己的数据类型

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

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

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

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

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

C. wxs遵循CommonJS规范

module对象

require()函数

Module.exports对象

7.4 wxs脚本-基础语法

7.4.1 内嵌wxs脚本

WXS代码可以编写在wxml文件中的标签内,就像JS代码可以编写在html文件中的标签内一样。wxml文件中的每个标签,必须提供module属性,用来指定当前wxs的模块名称,方便在wxml中访问模块中的成员

html 复制代码
<view>~~~~~~~~~~~wxs~~~~~~~~~~~</view>
<view>信息:{{m1.message}}</view>
<view>转化为大写:{{m1.toUpper('zhangsan')}}</view>
<wxs module="m1">
	//静态展示文本
	var msg = "hello world!!!!!!!!"
	module.exports.message=msg;
	//函数
	module.exports.toUpper=function (str){
		return str.toUpperCase();
	}
</wxs>

7.4.2 定义外联的wxs脚本

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

示例代码如下:

7.4.3 使用外联的wxs脚本

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

A. module用来指定模块的名称

B. src用来指定要引入的脚本的路径,且必须是相对路径

示例代码如下:

<view>外部的wxs:{{m2.toUpper2('lisi')}}</view>
<wxs src="./tool.wxs" module="m2"></wxs>

7.5 wxs脚本-wxs的特点

7.5.1 与js不同

为了降低wxs(WeiXin Script)的学习成本,wxs语言在设计时借大量鉴了JS的语法。但是本质上,wxs和

JS是完全不同的两种语言!

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

wxs典型的应用场景就是"过滤器",经常配合Mustache语法进行使用,例如:

<view>转化为大写:{{m1.toUpper('zhangsan')}}</view>

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

<button bind:tap="m1.toUpper">按钮</button>

7.5.3 隔离性

隔离性指的是wxs的运行环境和JS代码是隔离的。体现如下两方面:

A . wxs不能调用js中定义的函数

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

7.5.4 性能好

A. 在IOS设备上,小程序内的WXS会比JS代码快2-30倍

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

八、案例

相关推荐
计算机-秋大田4 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
2401_8441379515 小时前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
iSee85718 小时前
美团代付微信小程序 read.php 任意文件读取漏洞复现
微信小程序·小程序·php
前端 贾公子1 天前
微信小程序 === 使用腾讯地图选点
微信小程序·小程序·notepad++
Reuuse1 天前
【Vue3】知识汇总,附详细定义和源码详解,后续出微信小程序项目(4)
微信小程序·小程序
1SurvivE1 天前
微信小程序之路由跳转传数据及接收
微信小程序·小程序
程序员入门进阶2 天前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
我很苦涩的2 天前
微信小程序使用uni cli框架绘制echarts图表
微信小程序·小程序·echarts
慢慢雨夜2 天前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app