当前位置: 首页 > news >正文

微信小程序Day3笔记

1、页面导航

1. 什么是页面导航

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

  • <a>链接
  • location.href

2. 小程序中实现页面导航的两种方式:

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

    • 声明式导航到tabBar页面:在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:url属性表示要跳转的页面的地址,必须以 / 开头;open-type表示跳转的方式,必须为switchTab。例如:<navigator url="/pages/home/home" open-type="switchTab">导航到home页面</navigator>
    • 导航到非tabBar页面(没有被配置为tabBar的页面):在使用<navigator>组件跳转到指定的非tabBar页面时,需要指定url属性和open-type属性,其中:url属性表示要跳转的页面的地址,必须以 / 开头;open-type表示跳转的方式,必须为navigate。导航到非tabBar页面时,open-type属性可以省略不写。例如:<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
    • 后退导航:如果要后退到上一页面或多级页面,需要指定open-type属性和delta属性。open-type的值必须是navigateBack,表示要进行后退导航;delta的值必须是数字,表示要后退的层级。例如:<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
  • 编程式导航:
    调用小程序的导航API,实现页面的跳转

    • 导航到tabBar页面:调用wx.switchTab(object)方法,其中object参数对象的属性列表如下:
    属性类型是否必选说明
    urlstring需要跳转的tabBar页面的路径,路径后不能带参数
    successfunction接口调用成功的回调函数
    failfunction接口调用失败的回调函数
    completefunction接口调用结束的回调函数(调用成功、失败都会执行)
    <button bindtap="gotoMessage">跳转到消息页面</button>gotoMessage() {wx.switchTab({url: '/pages/message/ message',})
    },
    
    • 跳转到非tabBar页面:调用wx.navigateTo(object)方法,object参数对象的属性列表和上表一致。
    <button bindtap="gotoInfo">跳转到info页面</button>
    gotoInfo() {wx.navigateTo({url: '/pages/info/info',})
    },
    
    • 后退导航:调用wx.navigateBack(object)方法,其中object参数对象的属性列表如下:
    属性类型是否必选说明
    deltanumber否(为默认值1时可以不写)返回页面的页数,如果delta值大于现有页面数,则返回首页
    successfunction接口调用成功的回调函数
    failfunction接口调用失败的回调函数
    completefunction接口调用结束的回调函数(调用成功、失败都会执行)
    <button bindtap="gotoBack">退回到上一个页面</button>
    gotoBack() {wx.navigateBack();
    },
    

3. 导航传参

  1. 声明式导航传参
    navigator组件的url属性用来指定将要跳转的页面的路径,路径的后面可以携带参数:
  • 参数和路径之间使用?分隔
  • 参数键与参数值用=连接
  • 不同参数用&分隔
    <navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">跳转到info页面</navigator>
  1. 编程式导航传参
    调用wx.navigateTo(object)方法跳转页面时,也可以携带参数。示例如下:
<button bindtap="goInfo">跳转到info页面</button>
goInfo() {wx.navigateTo({url: '/pages/info/info?name=ls&age=18',})
},
  1. 在onLoad中接收导航参数
    通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到。示例如下:
onLoad: function(options) {console.log(options); // options 就是导航传递过来的参数对象
}

2、页面事件

1. 下拉刷新

  1. 启用下拉刷新有两种方式:
  • 全局开启下拉刷新:在app.json的window节点中,将enablePullDownRefresh设置为true
  • 局部开启下拉刷新:在页面的.json配置文件中,将enablePullDownRefresh设置为true
    在实际开发中,推荐使用第2种方式,为需要的页面单独开启下拉刷新的效果。
  1. 配置下拉刷新窗口的样式
  • backgroundColor:用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
  • backgroundTextStyle:用来配置下拉刷新loading的样式,仅支持dark和light
  1. 监听页面的下拉刷新事件
    在页面的.js文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
  2. 停止页面下拉刷新的效果
    当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失,需要手动停止,调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

2. 上拉触底

  1. 监听页面的上拉触底事件
    在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。
  2. 配置上拉触底距离
    上拉触底距离,就是触发上拉触底事件时,滚动条距离页面底部的距离。
    可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离。
    默认是50px,实际开发中,可以根据需求修改这个值。
  3. 对上拉触底进行节流处理
  • 在data中定义isLoading节流阀:true 正在进行数据请求,false 当前没有进行任何数据请求
  • 在getColor()方法中修改isLoading节流阀的值:刚调用 设置为 true,在网络请求的complete中 重置为 false
  • 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制:true 阻止当前请求,false 可以发起数据请求

3、生命周期

1. 生命周期的分类

  1. 应用生命周期:小程序从启动 -> 运行 -> 销毁的过程,范围比较大
  2. 页面生命周期:小程序中,每个页面的加载 -> 渲染 -> 销毁的过程,范围较小

2. 生命周期函数

  1. 自动按次序执行。
    生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。
    生命周期强调的是时间段,生命周期函数强调的是时间点。
  2. 分类:应用的生命周期函数、页面的生命周期函数

3. 应用的生命周期函数

  1. 应用生命周期函数需要在app.js中进行声明:
    onLaunch 小程序初始化完成时 执行此函数 全局只触发一次 可以做一些初始化的工作, onShow 小程序启动或从后台进入前台显示时触发, onHide 小程序从前台进入后台时触发
  2. 页面生命周期函数在页面的.js文件中进行声明:
    onLoad 监听页面加载 一个页面只调用一次, onShow 监听页面显示, onReady 监听页面初次渲染完成 可以修改页面的样式 一个页面只调用一次, onHide 监听页面隐藏, onUnload 监听页面卸载 一个页面只调用一次

4. WXS脚本

1. 什么是WXS

WXS是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。
WXML中无法调用在页面的.js中定义的函数,但是可以调用WXS中定义的函数。因此,小程序WXS的典型应用场景就是过滤器。

2. WXS和JavaScript的关系

  1. WXS有自己的数据类型:number 数值类型、string 字符串类型、 Boolean 布尔类型、 object 对象类型、 function 函数类型、 array 数组类型、date 日期类型、 regexp 正则
  2. WXS不支持类似于ES6以及以上的语法形式
  • 不支持:let,const,解构赋值,展开运算符,箭头函数,对象属性简写
  • 支持:var定义变量,普通function函数类似于ES5的语法
  1. WXS遵循CommonJS规范:module对象,require()函数,module.exports对象

3. 基础语法

  1. 内嵌WXS脚本
    WXS代码可以编写在WXML文件中的<wxs>标签内,就像JavaScript可以写在HTML中的<script>标签内一样。
    WXML文件中的每个<wxs></wxs>标签,必须提供module属性,来指定当前WXS的模块名称,方便在WXML中访问模块中的成员:
<view>{{m1.toUpper(username)}}</view><wxs module="m1">// 将文本转为大写形式, zs -> ZSmodule.exports.toUpper = function(str) {return str.toUpperCase()}
</wxs>
  1. 定义外联的WXS脚本
    可以写在以.wxs为后缀名的文件内。
// tools.wxs 文件
function toLower(str) {return str.toLowerCase();
}module.exports = {toLower: toLower
}
  1. 使用外联的WXS脚本
    在WXML中引入外联的WXS脚本时,必须为<wxs>标签添加module和src属性。
  • module用来指定模块的名称
  • src用来指定要引入的脚本的路径,必须是相对路径
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

4. WXS的特点

  1. 与JavaScript不同
  2. 不能作为组件的事件回调
    WXS典型的应用场景就是过滤器,配合{{}}使用,例如:
    <view>{{m2.toLower(country)}}</view>
    在WXS中定义的函数不能作为组件的事件回调函数。比如:<button bindtap="m2.toLower"></button>的用法是错误的。
  3. 隔离性:WXS的运行环境和其他JavaScript代码是隔离的。
  • WXS不能调用js定义的函数。
  • WXS不能调用小程序提供的API。
  1. 性能好
  • 在iOS设备上,小程序内的WXS比JavaScript代码快2-20倍
  • 在Android设备,二者的运行效率无差异

相关文章:

微信小程序Day3笔记

1、页面导航 1. 什么是页面导航 页面导航指的是页面之间的相互跳转。例如&#xff1a;浏览器中实现页面导航的方式有如下两种&#xff1a; <a>链接location.href 2. 小程序中实现页面导航的两种方式&#xff1a; 声明式导航&#xff1a; 在页面上声明一个<navigat…...

大数据技术之Hadoop:提交MapReduce任务到YARN执行(八)

目录 一、前言 二、示例程序 2.1 提交wordcount示例程序 2.2 提交求圆周率示例程序 三、写在最后 一、前言 我们前面提到了MapReduce&#xff0c;也说了现在几乎没有人再写MapReduce代码了&#xff0c;因为它已经过时了。然而不写代码不意味着它没用&#xff0c;当下很火…...

[论文笔记]BiMPM

引言 这又是一篇文本匹配的论文Bilateral Multi-Perspective Matching for Natural Language Sentences阅读笔记。 论文题目为自然语言文本中双向多视角匹配。 提出了BiMPM(bilateral multi-perspective matching)模型: 基于匹配-聚合(比较-聚合)框架; 采用双向匹配提取交…...

JS判断当前是早上,中午,下午还是晚上

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><body><div></div><script>function getTimeState() {// 获取当前时间let timeNow new Date();// 获取当前小时let…...

使用Docker部署Gitlab的记录

docker版本 使用docker -v查看 Docker version 1.13.1, build 7d71120/1.13.1运行容器镜像 映射本机的9980端口为Docker内部的80端口 映射本机的9922端口为Docker内部的22端口 使用root用户启动 映射本机目录/mnt/sda/gitlab/log为Docker内部的/var/log/gitlab 映射本机目录…...

Spark【Spark SQL(二)RDD转换DataFrame、Spark SQL读写数据库 】

从 RDD 转换得到 DataFrame Saprk 提供了两种方法来实现从 RDD 转换得到 DataFrame&#xff1a; 利用反射机制推断 RDD 模式使用编程方式定义 RDD 模式 下面使用到的数据 people.txt &#xff1a; Tom, 21 Mike, 25 Andy, 18 1、利用反射机制推断 RDD 模式 在利用反射机制…...

LabVIEW检测润滑油中的水分和铁颗粒

LabVIEW检测润滑油中的水分和铁颗粒 润滑油广泛应用于现代机械设备&#xff0c;由于工作环境日益恶劣&#xff0c;润滑油经常被水分乳化&#xff0c;加速对机械设备的腐蚀。此外&#xff0c;润滑油还受到机械零件摩擦中产生的Fe颗粒的污染&#xff0c;削弱了其机械润滑效果。润…...

【新版】系统架构设计师 - 软件架构设计<SOA与微服务>

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 架构 - 软件架构设计&#xff1c;SOA与微服务&#xff1e; 考点摘要 面向服务SOA&#xff08;★★★★&#xff09;微服务&#xff08;★★★★&#xff09; 基于/面向服务的&#xff08;SOA&#xff09; 在SO…...

React+Typescript+react-router 6 创建路由操作

本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下 那么我们打开项目 在项目终端输入 npm install --save react-router react-router-dom安装 一下 react-router 和 react-router-dom 这都是react开发很基本的插件了 不过大家安装前先注意好我的版…...

前端list.push,封装多个对象

js var fruit [apple, banana];fruit.push(pear);console.log(fruit); // [apple, banana, pear]现在为对象 data1:{addUser: 1,editUser: 1,addTime: null,editTime: 1527410579000,userId: 3,systemNo: mc,userName: zengzhuo,userPassword: e10adc3949ba59abbe56e057f20f88…...

指令延迟隐藏

一、指令延迟隐藏 1. 延迟和延迟隐藏 指令延迟指计算指令从调度到指令完成所需的时钟周期如果在每个时钟周期都有就绪的线程束可以被执行&#xff0c;此时GPU处于满符合状态指令延迟被GPU满负荷计算状态所掩盖的现象称为延迟隐藏延迟隐藏对GPU编程开发很重要&#xff0c;GPU设…...

《React vs. Vue vs. Angular:2023年的全面比较》

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

win10自带wifi共享功能

1、按下【wini】组合键打开windows设置&#xff0c;点击【网络和internet】&#xff1b; 2、按照下图&#xff0c;打开个移动热点&#xff0c;设置名称、密码。...

React如何实现国际化?

目录 一、Redux准备工作 commonTypes.js commonActions.js commonReducer.js rootReducer.js 二、然后定义SelectLang组件 index.js index.less 三、创建语言包 welcomeLocale.js index.js 四、使用 react的入口文件 App.js welcome.js 附 关于如何实现国际…...

netrw模拟nerdtree的go命令连续打开多个文件

vim9自带的文件浏览器netrw功能很强大。过去用惯了nerdtree的我&#xff0c;对netrw的文件操作还要适应一些时间。 使用netrw一段时间后发现它没有nerdtree的go命令的替代操作&#xff0c;今天就自制一个。 一、制作go命令&#xff1a; nerdtree的go命令功能&#xff1a;就是…...

算法通关村第十九关——动态规划高频问题(白银)

算法通关村第十九关——动态规划高频问题&#xff08;白银&#xff09; 前言1 最少硬币数2 最长连续递增子序列3 最长递增子序列4 完全平方数5 跳跃游戏6 解码方法7 不同路径 II 前言 摘自&#xff1a;代码随想录 动态规划五部曲&#xff1a; 确定dp数组&#xff08;dp tabl…...

Matlab如何导入Excel数据并进行FFT变换

如果你发现某段信号里面有干扰&#xff0c;想要分析这段信号里面的频率成分&#xff0c;就可以使用matlab导入Excel数据后进行快速傅里叶变换&#xff08;fft&#xff09;。 先直接上使用方法&#xff0c;后面再补充理论知识。 可以通过串口将需要分析的数据发送到串口助手&a…...

华为mate60 上线 媒介盒子多家媒体报道

为什么你的品牌营销不见效&#xff1f;如何能推动品牌破圈&#xff1f;让媒介盒子给你一些启发。本期盒子要跟大家分享地新机上市&#xff0c;数码科技行业企业该如何做线上宣传。 HUAWEI Mate 60系列8月29日官宣发布&#xff0c;出色的拍照功能、强大的性能表现和持久的续航能…...

Java知识总结(持续更新)

一、JDK、JRE、JVM三者之间的关系&#xff1f; 1. **JDK (Java Development Kit)**&#xff1a; JDK 是 Java 开发工具包&#xff0c;它包含了用于开发 Java 应用程序的所有必要工具和库。这包括 Java 编译器&#xff08;javac&#xff09;、Java 核心类库、开发工具&#x…...

缓存技术:加速应用,提高用户体验

本文总结前期某个系统中使用到的缓存使用经验—仅此而已,效果还不错。 缓存技术在系统架构设计中扮演着至关重要的角色,它不仅可以显著提高系统的性能,还可以改善用户体验。在本文章中,我们将探讨不同类型的缓存、缓存失效以及缓存淘汰等关键概念,帮助在后期的架构设计中…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...