微信小程序_小程序视图与逻辑_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设备上,二者的运行效率无差异

八、案例

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

springboot社团服务系统的设计与实现,计算机毕业设计项目源码316,计算机毕设程序(LW+开题报告、中期报告、任务书等全套方案)

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。本次开发一套社团服务系统有管理员&#x…

Linux服务管理-kerberos

Kerberos 官网文档‘&#xff1a;Kerberos&#xff1a;网络身份验证协议 (mit.edu) 基本概念&#xff1a;Kerberos基本概念及原理汇总-腾讯云开发者社区-腾讯云 (tencent.com) kerberos概述 Kerberos是一种计算机网络认证协议&#xff0c;由麻省理工学院&#xff08;MIT&#x…

区块链技术在游戏行业的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 引言 区块链技术概述 定义与原理 发展历程…

MooseFS (MFS) 分布式对象存储

一、MFS 优越特性 Free (GPL): 通用文件系统&#xff0c;开源免费。在线扩容: 体系架构具有极强的可伸缩性&#xff0c;支持在线扩容。部署简单。高可用性: 支持设置任意文件冗余(数据分区)程度&#xff0c;提供比RAID10更高的冗余级别&#xff0c;同时不会影响读写性能&#…

【常见问题解答】远程桌面无法复制粘贴的解决方法

提示:文中提出了“远程桌面无法复制粘贴文件到本地”问题的三种解决方法,其中“方法 3:重启 RDP 剪贴板监视程序”亲测有效。 目录 一、问题描述二、解决方法1.方法1:设置远程桌面连接(1)打开远程桌面连接,点击【显示选项】(2)勾选“剪贴板”,并点击【详细信息】(3)…

探索光耦:达林顿光耦的特点与应用

在现代电子设备中&#xff0c;光耦作为信号隔离和传输的核心元件之一&#xff0c;扮演着至关重要的角色。达林顿光耦凭借其独特的电流放大能力和可靠性&#xff0c;在众多应用中脱颖而出。本文将探讨达林顿光耦的特点及其广泛的应用。 达林顿光耦的主要特点 高电流放大倍数&a…

河南省的一级科技查新机构有哪些?

科技查新&#xff0c;简称查新&#xff0c;是指权威机构对查新项目的新颖性作出文献评价的情报咨询服务。这一服务在科研立项、成果鉴定、项目申报等方面发挥着至关重要的作用。河南省作为中国的重要科技和教育基地&#xff0c;拥有多个一级科技查新机构&#xff0c;为本省及全…

数据结构 ——— 层序遍历链式二叉树

目录 链式二叉树示意图​编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同&#xff0c;前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式&#xff0c;如上图&#xff1a;层序遍历的…

【故障解决】麒麟系统右下角网络图标取消显示叹号

原文链接&#xff1a;【故障解决】麒麟系统右下角网络图标取消显示叹号 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在麒麟系统中解决网络图标出现感叹号问题的文章。在日常使用麒麟系统的过程中&#xff0c;我们在内网或公网环境下&#xff0c;有时会遇…

Spring boot 集成 nacos、redis、mysql

1&#xff0c;准备好nacos环境&#xff0c;准备ncc.yml配置&#xff1a; 在配置添加 test: haha 2&#xff0c;添加依赖 在pom.xml 文件中添加Nacos 客户端的依赖&#xff0c;样例使用Spring Cloud Alibaba 版本使用2023.x 分支&#xff0c;详情可查看 版本发布说明-阿里云S…

力扣 LeetCode 206. 反转链表(Day2:链表)

解题思路&#xff1a; pre &#xff0c;cur双指针 需要通过tmp暂存cur的下一个位置&#xff0c;以方便cur的下一步移动 class Solution {public ListNode reverseList(ListNode head) {ListNode pre null;ListNode cur head;while (cur ! null) {ListNode tmp cur.next;c…

golang 实现比特币内核:公钥的 SEC 编码格式详解

比特币作为区块链的一个应用,它建立在分布式系统之上,‘节点’遍布全球。为了使所有节点协同工作并作为一个整体系统运行,需要保持所有节点同步在相同的状态中,也就是说节点之间需要频繁通信,并且相互交换大量数据消息。这要求在网络上传输的消息或数据要使用某种格式编码…

v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条

效果 导入组件 import ElImageViewer from "element-ui/packages/image/src/image-viewer"; components:{ ElImageViewer },模板使用组件 <el-image-viewerv-if"isShowPics":on-close"closeViewer":url-list"srcList"/>定义两…

Redhat7.9 安装 KingbaseES 金仓数据库 V9单机版(图形化安装)

Redhat7.9 安装 KingbaseES 金仓数据库 V9单机版 ——图形化安装 一、安装前规划1.1 安装包下载1.2 环境信息 二、操作系统配置2.1 检查操作系统和内存2.2 关闭防火墙和selinux2.3 配置内核参数(/etc/sysctl.conf)2.4 配置资源使用参数(/etc/security/limits.conf)2.5 配置Remo…

【Linux】进程状态的优先级

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各…

【Linux:IO多路复用(select函数)

什么是IO多路复用&#xff1f; 一种网络通信的手段&#xff0c;IO多路复用可以同时监测多个文件描述符&#xff0c;且这个过程是阻塞的&#xff0c;当检测有文件描述符就绪&#xff0c;程序的阻塞就会解除&#xff0c;就可以通过这些就绪的文件描述符进行通信。通过这种方式在…

软件工程笔记二—— 软件生存期模型

目录 瀑布模型 瀑布模型的特点 阶段间具有顺序性和依赖性。 推迟实现的观点 质量保证的观点 瀑布模型的优点 瀑布模型的缺点 快速原型模型 快速原型模型的优点 快速原型模型的缺点 增量模型 增量模型的优点 增量构件开发 螺旋模型 完整的螺旋模型&#xff08;顺…

视频孪生技术在金融银行网点场景中的应用价值

作为国民经济重要的基础行业&#xff0c;金融行业在高速发展的同时衍生出业务纠纷、安全防范、职能管理等诸多问题&#xff0c;对安全防范和监督管理提出了更高的要求。因此&#xff0c;如何能更好的利用视频监控系统价值&#xff0c;让管理人员更简便的浏览监控视频、更快速的…

【金融风控】特征评估与筛选详解

内容介绍 掌握单特征分析的衡量指标 知道 IV&#xff0c;PSI等指标含义 知道多特征筛选的常用方法 掌握Boruta,VIF,RFE,L1等特征筛选的使用方法 【理解】单特征分析 什么是好特征 从几个角度衡量&#xff1a;覆盖度&#xff0c;区分度&#xff0c;相关性&#xff0c;稳定…

LeetCode面试经典150题|228.汇总区间

给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b] 应该按…