当前位置: 首页 > 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…...

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

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

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...