微信小程序_小程序视图与逻辑_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
示例代码如下：

<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
示例代码

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

3.3.3 后退导航

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

A. open-type的值必须是navigateBack,表示要进行后退导航
B. delta的值必须是数字，表示要后退的层级

示例代码如下：

<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;

页面结构：

<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()可以停止当前页面的下拉刷新。示例如下：

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

五、上拉触底

5.1 什么是上拉触底

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

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

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

/**
* 页面上拉触底事件的处理函数
*/
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文件中进行生命，示例代码如下：

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中访问模块中的成员

<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设备上，二者的运行效率无差异

八、案例

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/916902.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数字化转型企业架构设计手册(交付版),企业数字化转型建设思路、本质、数字化架构、数字化规划蓝图(PPT原件获取)

数字化转型企业架构设计手册(交付版),企业数字化转型建设思路、本质、数字化架构、数字化规划蓝图(PPT原件获取)

1、企业架构现状分析 2、企业架构内容框架 3、企业架构设计方法 3.1 、业务架构设计方法 3.2 、数据架构设计方法 3.3 、应用架构设计方法 3.4 、技术架构设计方法 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&…
阅读更多...
maven的optional选项说明以及具体应用

maven的optional选项说明以及具体应用

写在前面 本文看下maven的optional选项的作用和用法。 1&#xff1a;什么作用 考虑这样的场景&#xff0c;A依赖B&#xff0c;B依赖C&#xff0c;正常的按照依赖的传递性&#xff0c;A也会间接的依赖C&#xff0c;但是在一些特定的场景中项目A只希望依赖B&#xff0c;而不依…
阅读更多...
FPGA使用Verilog实现CAN通信

FPGA使用Verilog实现CAN通信

FPGA实现CAN通信&#xff08;Verilog&#xff09; 1.作者使用的方法是通过FPGA芯片&#xff08;如Xilinx公司的型号为XC7K325TFFG676-2&#xff09;控制SJA1000T芯片&#xff08;CAN控制器芯片&#xff09;实现CAN通信&#xff0c;如下图所示&#xff1a; 2.熟悉连接方式之后&…
阅读更多...
1Panel 推送 SSL 证书到阿里云、腾讯云

1Panel 推送 SSL 证书到阿里云、腾讯云

本文首发于 Anyeの小站&#xff0c;点击链接 访问原文体验更佳 前言 都用 CDN 了还在乎那点 1 年证书钱么&#xff1f; 开句玩笑话&#xff0c;按照 Apple 的说法&#xff0c;证书有效期不该超过 45 天。那么证书有效期的缩短意味着要更频繁地更新证书。对于我这样的“裸奔”…
阅读更多...
Spring Boot3 实战案例合集上线了

Spring Boot3 实战案例合集上线了

Spring Boot3实战案例合集
阅读更多...
推荐一款高效的网站数据抓取工具：SysNucleus WebHarvy

推荐一款高效的网站数据抓取工具：SysNucleus WebHarvy

SysNucleus WebHarvy是一款高效的网站数据抓取工具&#xff0c;支持从网页中提取文本、图像、URL 和电子邮件等内容&#xff0c;无需编写任何代码或脚本即可轻松实现数据抓取。用户可以通过 WebHarvy 内置的浏览器直观地浏览网页&#xff0c;指引软件提取所需的数据。它通过自动…
阅读更多...
Codeforces Round 987 (Div. 2)（前四道）

Codeforces Round 987 (Div. 2)（前四道）

A. Penchick and Modern Monument 翻译&#xff1a; 在繁华大都市马尼拉的摩天大楼中&#xff0c;菲律宾最新的 Noiph 购物中心刚刚竣工&#xff01;建筑管理方 Penchick 订购了一座由 n 根支柱组成的先进纪念碑。 纪念碑支柱的高度可以用一个由 n 个正整数组成的数组 h 来表示…
阅读更多...
【Qt实现虚拟键盘】

【Qt实现虚拟键盘】

Qt实现虚拟键盘 &#x1f31f;项目分析&#x1f31f;实现方式&#x1f31f;开发流程 &#x1f31f;项目分析 需求&#xff1a;为Linux环境下提供可便捷使用的虚拟键盘OS环境&#xff1a;Windows 7/11、CentOS 7开发语言&#xff1a;Qt/C IDE&#xff1a;QtCreator 、Qt5.14.2功…
阅读更多...
数字孪生驱动的智能决策：提升管理效率的关键技术

数字孪生驱动的智能决策：提升管理效率的关键技术

在现代的数字化转型过程中&#xff0c;数字孪生技术成为许多行业实现智能化升级的重要推动力。而作为领先的可视化平台&#xff0c;山海鲸可视化通过其强大的鲸孪生组件&#xff0c;将数字孪生技术与可视化紧密结合&#xff0c;为企业和行业用户提供了一种全新的方式来管理、监…
阅读更多...
蓝桥杯——数组

蓝桥杯——数组

1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…
阅读更多...
C++(Qt)软件调试---内存泄漏分析工具MTuner （25）

C++(Qt)软件调试---内存泄漏分析工具MTuner （25）

C(Qt)软件调试—内存泄漏分析工具MTuner &#xff08;25&#xff09; 文章目录 C(Qt)软件调试---内存泄漏分析工具MTuner &#xff08;25&#xff09;[toc]1、概述&#x1f41c;2、下载MTuner&#x1fab2;3、使用MTuner分析qt程序内存泄漏&#x1f9a7;4、相关地址&#x1f41…
阅读更多...
AI视频处理软件行业分析与未来预测

AI视频处理软件行业分析与未来预测

AI视频处理软件是利用人工智能&#xff08;AI&#xff09;技术来增强、编辑和处理视频内容的应用程序或工具。这类软件通常提供多种功能&#xff0c;能够自动化一定的处理流程&#xff0c;提升视频制作效率和质量。以下是一些常见的AI视频处理软件功能&#xff1a; 1.自动剪辑…
阅读更多...
数据结构—栈和队列

数据结构—栈和队列

目录 1.栈底层结构的选择 2.栈的实现 3.栈 3.1入栈 3.2出栈 3.3栈顶删除 4.队列 4.1队列介绍 4.2队列初始化 4.3入队列 4.4队头删除 1.栈底层结构的选择 栈是一种数据结构 具有“后进先出的”的特点 现在面临的两种选择&#xff0c;一种是顺序表&#xff0c;另一种…
阅读更多...
解决Windows远程桌面 “为安全考虑，已锁定该用户账户，原因是登录尝试或密码更改尝试过多。请稍后片刻再重试，或与系统管理员或技术支持联系“问题

解决Windows远程桌面 “为安全考虑，已锁定该用户账户，原因是登录尝试或密码更改尝试过多。请稍后片刻再重试，或与系统管理员或技术支持联系“问题

当我们远程连接服务器连接不上并提示“为安全考虑&#xff0c;已锁定该用户账户&#xff0c;原因是登录尝试或密码更改尝试过多。请稍候片刻再重试&#xff0c;或与系统管理员或技术支持联系”时&#xff0c;根本原因是当前计算机远程连接时输入了过多的错误密码&#xff0c;触…
阅读更多...
Marp for VScode插件 PPT无法预览的问题

Marp for VScode插件 PPT无法预览的问题

优质好文&#xff1a;https://blog.csdn.net/lyuhaochina/article/details/141527208 这是因为很多人在VScode中安装markdown插件时都会安装插件Markdown Preview Enhanced,这个插件会和Marp插件的预览功能产生冲突,导致用Marp插件做的PPT无法预览 找到设置选项Markdown-previe…
阅读更多...
实验一：自建Docker注册中心

实验一：自建Docker注册中心

基于容器安装运行Registry Docker Registry主要负责镜像仓库的管理 创建并启动一个运行Docker Registry: docker run -d -p 5000:5000 --restartalways --name myregistry -v /opt/data/registry:/var/lib/registry registry -v&#xff1a;将主机的本地/opt/data/registry目…
阅读更多...
路漫漫其修远兮，吾将上下而求索---第一次使用github的过程记录和个人感受

路漫漫其修远兮，吾将上下而求索---第一次使用github的过程记录和个人感受

文章目录 1.仓库位置2.新建仓库3.配置仓库4.克隆和上传5.推荐文章和我的感受 1.仓库位置 这个仓库的位置就是在我们的这个个人主页的右上角&#xff1b;如果是第一次注册账号的话&#xff0c;这个主页里面肯定是不存在仓库的&#xff0c;需要我们自己手动的进行创建&#xff1…
阅读更多...
演员王子辰—专注革命题材 《前行者》后再出发

演员王子辰—专注革命题材 《前行者》后再出发

2021年10月22日在北京卫视播出的由张鲁一、聂远等人主演的电视剧《前行者》&#xff0c;讲述了在二十世纪三十年代初&#xff0c;因叛徒出卖&#xff0c;我上海地下党组织遭到严重破坏&#xff0c;革命事业陷入一片白色恐怖之中。我党情报员马天目刚从法国归来&#xff0c;临危…
阅读更多...
uniapp中h5端如何引用本地json数据（json文件）

uniapp中h5端如何引用本地json数据（json文件）

前言 uniapp读取本地json数据文件&#xff0c;有下面两种方式可以实现&#xff1a; 文件后缀为.json类型文件后缀为.js类型 这里展示后缀为.js类型的处理方式 1、在static中创建后缀为.js的文件存储json数据。 注意使用export导出 2、在要使用的页面导入 <template>…
阅读更多...
PLC如何支持GEM300标准？SECS/GEM通讯协议

PLC如何支持GEM300标准？SECS/GEM通讯协议

1. 提供技术服务&#xff0c;保证户使用没问题 2. 支持市场所有的常规PLC 3. 支持常规组态软件&#xff0c;如wincc、组态王、组态屏等 4. 支持各类传感器&#xff0c;私有协议、modbus、web等 5. 无需二次开发&#xff0c;只需配置映射到已有的PLC地址 GEM300协议是为了满…
阅读更多...
最新文章

Copyright @ 2022~2023