小程序-3(页面导航+页面事件+生命周期+WXS)

目录

1.页面导航

声明式导航

导航到tabBar页面

导航到非tabBar页面

后退导航

编程式导航

后退导航

导航传参

声明式导航传参

编程式导航传参

在onload中接收导航参数

2.页面事件

下拉刷新

停止下拉刷新的效果

​编辑

上拉触底

配置上拉触底距离

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

生命周期函数

应用的生命周期函数

页面的生命周期函数

4.WXS

WXS的定义

WXS和JavaScript的关系

内嵌wxs脚本

定义外联的WXS脚本

使用定义的外联的wxs脚本

wxs的特点

判断是否还有下一页数据


1.页面导航

声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转

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

声明式导航

导航到tabBar页面

在navigator中要用到url属性和open-type属性,其中url表示要跳转的页面的地址,必须以“/”开头,open-type表示跳转的方式,必须为switchTab

导航到非tabBar页面

与导航到tabBar页面相似,只是open-type="navigate",导航到非tabBar页面时open-type属性可以省略

后退导航

在当前页面的wxml文件中写,open-type="navigateBack" delta="1"  ,delta的值必须是数字,表示要后退的层级,如果只是后退到上一页面,可以省略delta属性,因为其默认值就是1

编程式导航

编程式导航调用wx.switchTab()方法,可以跳转到tabBar页面

编程式导航中,导航到tabBar页面与导航到非tabBar页面一样,注意网址第一位都要写“/”

后退导航

后退导航调用wx.navigateBack()方法,可以返回上一页面或多级页面

如果想退回多级页面,可以在wx.navigateBack()方法中定义一个delta来赋值想要后退的页面数

导航传参

声明式导航传参

url属性来指明路径,同时后面可以传递参数

路径和参数之间用?分隔,参数值与参数值之间用=相连(参数名=参数值),不同的参数之间用&相隔

编程式导航传参

bindtap绑定了事件,在调用事件时同样是在网址后面加上了参数,写法与上面相同

在onload中接收导航参数

通过两种导航方式得到的参数,可以直接在onload事件中得到

因为options仅作用于onload事件中,想要把得到的参数运用于整个页面,可以在data中定义一个空的query,在onload中,使用this.setData({query:options})将参数值给query,从而实现参数在整个页面的应用

2.页面事件

下拉刷新

触发下拉刷新事件,要把count的值重置为0,可以调用下拉刷新的函数onPullDownRefresh,在该函数中再调用this.setData方法,将count值重新赋值为0

停止下拉刷新的效果

实现页面的下拉刷新,在页面的.json文件中配置onPullDownRefresh:true;实现全局的下拉刷新在app.json文件中配置。backgroundColor来设置下拉界面的颜色,backgroundTextStyle来设置下拉刷新小圆点的颜色效果

下拉刷新时,页面不会自动回到顶部,这时可以在onPullDownRefresh函数中调用wx.stopPullDownRefresh()函数,仅需调用不需要写回调函数

上拉触底

在页面的.js文件中,通过onReachBottom()函数来触发上拉触底事件

配置上拉触底距离

在.json文件中,通过onReachBottomDistance属性来配置上拉触底的距离,默认是50px

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

应用生命周期(小程序)和页面生命周期

生命周期函数

生命周期函数是小程序框架提供的内置函数,伴随着生命周期执行

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

生命周期函数又分为应用生命周期函数和页面生命周期函数

应用的生命周期函数

小程序的应用生命周期函数在app.js中进行声明

onLaunch  小程序初始化完成,执行此函数,全局只触发一次

onShow    小程序启动,或者从后台进入前台显示时触发(可触发多次)

onHide     小程序从前台进入后台时触发(可触发多次)

页面的生命周期函数

页面的生命周期函数在页面的.js文件中进行声明

onLoad  监听页面加载,一个页面只调用1次;可以初始化一些数据或者转存一些参数

onShow  监听页面显示

onReady  监听页面初次渲染完成,一个页面只调用一次;  可以调用wx.setNavigationBarTitle去修改页面内容

onHide  监听页面隐藏

onUnload  监听页面卸载,一个页面只调用1次

4.WXS

WXS的定义

wxs是小程序独有的脚本语言,用来渲染wxml结构,wxml无法调用页面中在.js中定义的函数,但是wxml可以调用wxs中定义的函数

WXS和JavaScript的关系

内嵌wxs脚本

wxs代码可以写在wxml文件中的<wxs>标签内,就像是javascript代码可以写在html文件的<script>标签内一样

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模板名称,方便询问

module.exports.toUpper+function(){}   该句话中toUpper是方法,module.exports是模块导入这个方法,在后面调用的时候,可以直接使用module名.方法名{{参数}}

定义外联的WXS脚本

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

写在.wxs文件中的代码要注意格式的完整和正确性

使用定义的外联的wxs脚本

先定义好的外联wxs文件,在wxml文件中引入外联文件并进行命名

<wxs src="../../utils/tools.wxs" module="命名"></wxs>

其中src必须是相对路径

wxs的特点

  1. 与javascript语言不同,虽然借鉴了较多,但本质上是不相同的
  2. 不能作为组件的回调函数,wxs经常与Mustache搭配使用,但在wxs中定义的函数不能作为组件的回调函数使用
  3. 隔离性:不能调用js中定义的函数,不能调用小程序提供的API
  4. 性能好:在iOS设置上,小程序内的wxs会比js快2-20倍;在android设备上,二者的运行效率无差异

判断是否还有下一页数据

arr.splice(a,b,'c')  在数组的索引a处,删除b个元素,添加c

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js补环境系列之剖析:原型、原型对象、实例对象三者互相转化(不讲废话、全是干货)

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 思考下&#xff1a;js补环境中&#xff0c;什么场景会用到原型、原型对象、实例对象&#xff1f; 举…

【前端异步问题】通过Promise.all()解决异步取值问题

场景 有一个对象数组itemList,数组中的对象有的有属性attr,有的没有。没有属性a的对象需要通过调用接口获取并赋值给相应对象。 再将处理完后的对象数组&#xff0c;传入另一个接口中。 let itemList [{ id: 0, attr: 雨伞},{ id: 1, attr: null},{ id: 2, attr: 水杯},{ id: …

【用户投稿】使用 SeaTunnel 进行 HTTP 同步到 Doris 实战经验分享

需求背景 由于我司的项目中需要接入不同的数据源的数据到数仓中&#xff0c;在选择了众多的产品中最后选择了Apache SeaTunnel&#xff0c;对比参考 目前我这边使用的接口&#xff0c;暂时没有接口认证&#xff0c;如果需要接口认证的方式接入数据&#xff0c;再做讨论及测试…

谈谈大数据采集和常见问题

01 什么是数据采集 数据采集是大数据的基石&#xff0c;不论是现在的互联网公司&#xff0c;物联网公司或者传统的IT公司&#xff0c;每个业务流程环节都会产生大量的数据&#xff0c;同时用户操作的日志也会产生大量的数据&#xff0c;为了将这些结构化和非结构化的数据进行…

[C/C++入门][for]24、菲波那契数列

斐波那契数列是数学中的一个经典数列&#xff0c;以其独特的递归性质而闻名。 数列的前两项通常是0和1&#xff08;或者有时从1开始&#xff0c;当然这个不是强制要求&#xff09;&#xff0c;之后的每一项都是前两项的和。数列的前几项如下所示&#xff1a; 0, 1, 1, 2, 3, …

docker网络互联

最近学习docker的时候发现多了很多网卡&#xff0c;这些似乎都和docker有关&#xff0c;所以我便往下深入了解了一番&#xff1b; 一、docker网卡 docker 0是安装 docker 的时候生成的虚拟网桥&#xff0c;它在内核层连通了其他物理或者虚拟网卡&#xff0c;这就可以将所…

AI发展下的伦理挑战,应当如何应对?

AI发展下的伦理挑战&#xff0c;应当如何应对&#xff1f; 人工智能飞速发展的同时&#xff0c;也逐渐暴露出侵犯数据隐私、制造“信息茧房”等种种伦理风险。随着AI技术在社会各个领域的广泛应用&#xff0c;关于AI伦理和隐私保护问题日趋凸显。尽管国外已出台系列法规来规范…

常用优秀内网穿透工具(实测详细版)

文章目录 1、前言2、安装Nginx3、配置Nginx4、启动Nginx服务4.1、配置登录页面 5、内网穿透5.1、cpolar5.1.1、cpolar软件安装5.1.2、cpolar穿透 5.2、Ngrok5.2.1、Ngrok安装5.2.2、随机域名5.2.3、固定域名5.2.4、前后端服务端口 5.3、NatApp5.4、Frp5.4.1、下载Frp5.4.2、暴露…

自动发卡机器人来看:生成式AI的未来,是聊天还是代理?

引言 今天我们要聊聊一个有趣的话题&#xff1a;生成式AI的未来究竟是在聊天系统&#xff08;Chat&#xff09;中展现智慧&#xff0c;还是在自主代理&#xff08;Agent&#xff09;中体现能力&#xff1f; 一、生成式AI&#xff0c;你是谁&#xff1f; 首先&#xff0c;生成…

【数据结构】--- 栈和队列

前言 前面学习了数据结构的顺序表、单链表、双向循环链表这些结构&#xff1b;现在就来学习栈和队列&#xff0c;这里可以简单的说栈和队列是具有特殊化的线性表 一、栈 1.1、栈的概念和结构 栈是一种遵循先入后出逻辑的线性数据结构。 栈是一种特殊的线性表&#xff0c;它只允…

vivado FFT IP Core

文章目录 前言FFT IP 接口介绍接口简介tdata 格式说明 其他细节关于计算精度及缩放系数计算溢出架构选择数据顺序实时/非实时模式数据输入输出时序关于配置信息的应用时间节点 FFT IP 例化介绍控制代码实现 & 测试参考文献 前言 由于计算资源受限&#xff0c;准备将上位机 …

【漏洞复现】泛微E-Cology WorkflowServiceXml SQL注入漏洞

0x01 产品简介 泛微e-cology是一款由泛微网络科技开发的协同管理平台&#xff0c;支持人力资源、财务、行政等多功能管理和移动办公。 0x02 漏洞概述 泛微OAE-Cology 接口/services/WorkflowServiceXml 存在SQL注入漏洞&#xff0c;可获取数据库权限&#xff0c;导致数据泄露…

Qt日志库QsLog使用教程

前言 最近项目中需要用到日志库。上一次项目中用到了log4qt库&#xff0c;这个库有个麻烦的点是要配置config文件&#xff0c;所以这次切换到了QsLog。用了后这个库的感受是&#xff0c;比较轻量级&#xff0c;嘎嘎好用&#xff0c;推荐一波。 下载QsLog库 https://github.c…

【踩坑日记】【教程】嵌入式 Linux 通过 nfs 下载出现 T T T T [Retry count exceeded: starting again]

文章目录 1 本篇文章解决的问题2 问题解决原理3 问题环境4 开启 ubuntu-20.04 的 nfs24.1 确认 nfs2 是否已经开启4.2 开启 nfs2 5 卸载 iptables5.1 卸载 iptables5.2 禁用 ufw5.3 尝试重新下载 6 原理分析6.1 nfs2 开启部分6.2 卸载 iptables 部分 7 后记7.1 拓扑结构一7.2 拓…

生成Elasticsearch xpack安全认证证书

首次启动 Elasticsearch 时&#xff0c;会为用户生成密码&#xff0c;并自动为用户配置 TLS &#xff0c;可以随时调整 TLS 配置&#xff0c;更新节点证书 一、生成证书 1、在任意节点上进入 Elasticsearch 的安装目录&#xff0c;使用 elasticsearch-certutil 为集群生成 CA…

【博士每天一篇文献-算法】连续学习算法之HNet:Continual learning with hypernetworks

阅读时间&#xff1a;2023-12-26 1 介绍 年份&#xff1a;2019 作者&#xff1a;Johannes von Oswald&#xff0c;Google Research&#xff1b;Christian Henning&#xff0c;EthonAI AG&#xff1b;Benjamin F. Grewe&#xff0c;苏黎世联邦理工学院神经信息学研究所 期刊&a…

npm 设置镜像

设置淘宝源 npm config set registry https://registry.npmmirror.com 设置阿里云源 npm config set registry https://npm.aliyun.com 设置腾讯云源 npm config set registry https://mirrors.cloud.tencent.com/npm/ 设置华为云源 npm config set registry https://mi…

嘿!openlayer(三)

嘿&#xff01;openlayer&#xff08;三&#xff09; 第三章 面向对象的openlayer 文章目录 嘿&#xff01;openlayer&#xff08;三&#xff09;前言一、面向对象的openlayer核心类渲染类事件类openlayer 主要工作原理数据组织数据解析数据渲染 二、直击深处OpenLayers 内部生…

【Vue3 ts】echars图表展示统计的月份数据

图片展示 此处内容为展示24年各个月份产品的创建数量。在后端统计24年各个月份产品数量后&#xff0c;以数组的格式发送给前端&#xff0c;前端负责展示。 后端 entity层&#xff1a; Data Schema(description "月份统计")public class MonthCount {private Stri…

处理uniapp刷新后,点击返回按钮跳转到登录页的问题

在使用uniapp的原生返回的按钮时&#xff0c;如果没有刷新会正常返回到对应的页面&#xff0c;如果刷新后会在当前页反复横跳&#xff0c;或者跳转到登录页。那个时候我第一个想法时&#xff1a;使用浏览器的history.back()方法。因为浏览器刷新后还是可以通过右上角的返回按钮…