小程序-生命周期与WXS脚本
生命周期
什么是生命周期
生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
我们可以把每个小程序运行的过程，也概括为生命周期：
- 小程序的启动，表示生命周期的开始
- 小程序的关闭，表示生命周期的结束
- 中间小程序运行的过程，就是小程序的生命周期
生命周期的分类
在小程序中，生命周期分为两类，分别是：
- 应用生命周期（特指小程序从启动 -> 运行 -> 销毁的过程）
- 页面生命周期（特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程）
其中，页面的生命周期范围较小，应用程序的生命周期范围较大
什么是生命周期函数
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
生命周期函数的分类
小程序中的生命周期函数分为两类，分别是：
- 应用的生命周期函数（特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数）
- 页面的生命周期函数（特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数）
1.应用的生命周期函数
小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：
// app.js
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
console.log('onLaunch')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
控制台输出：
2.页面的生命周期函数
小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：
// pages/info/info.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
goBack(){
wx.navigateBack()
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
WXS 脚本
WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。
wxs 的应用场景
wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。
wxs 和 JavaScript 的关系*
虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：
wxs 有自己的数据类型
number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、function 函数类型、array 数组类型、date 日期类型、regexp 正则
wxs 不支持类似于 ES6 及以上的语法形式
- 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
- 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法
wxs 遵循 CommonJS 规范
- module 对象
- require() 函数
- module.exports 对象
基础语法
1. 内嵌 wxs 脚本
wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 Javascript 代码可以编写在 html 文件中的 <script> 标签内一样。
wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在 wxml 中访问模块中的成员：
2. 定义外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下：
3. 使用外联的 wxs 脚本
在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs> 标签添加 module 和 src 属性，其中：
- module 用来指定模块的名称
- src 用来指定要引入的脚本的路径，且必须是相对路径
示例代码如下：
WXS 的特点
1. 与 JavaScript 不同
为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上，wxs 和 JavaScript 是完全不同的两种语言！
2. 不能作为组件的事件回调
wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：
但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：
3. 隔离性
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
- wxs 不能调用 js 中定义的函数
- wxs 不能调用小程序提供的 API
4. 性能好
- 在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
- 在 android 设备上，二者的运行效率无差异
相关文章：
小程序-生命周期与WXS脚本
生命周期 什么是生命周期 生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。 我们可以把每个小程序运行的过程，也概括为生命周期： 小程序的启动，表示生命…...
828华为云征文 | 云服务器Flexus X实例，Docker集成搭建FC-web模拟器
828华为云征文 | 云服务器Flexus X实例，Docker集成搭建FC-web模拟器 华为云端口放行 服务器放行对应端口9995 Docker安装并配置镜像加速 1、购买华为云 Flexus X 实例 Flexus云服务器X实例-华为云 (huaweicloud.com) 2、docker安装 yum install -y docker-ce3、验证…...
_RET_IP_ 和_THIS_IP_ 作用
在Linux内核中,有两个罕见的宏定义_RET_IP_ 和_THIS_IP_。但是这两个宏在内核代码中又时不时的出现，那么它们到底是什么含义呢? 1、宏定义 我们先看它们的宏定义 include./linux/kernel.h#define _RET_IP_ (unsigned long)__builtin_return_address(0)#define …...
Spring Boot 点餐系统：高效餐饮服务
第二章关键技术的研究 2.1相关技术 网上点餐系统是在Java MySQL开发环境的基础上开发的。Java是一种服务器端脚本语言，易于学习，实用且面向用户。全球超过35％的Java驱动的互联网站点使用Java。MySQL是一个数据库管理系统，因为它的…...
RtspServer:轻量级RTSP服务器和推流器
文章目录 项目概述技术分析支持的编码格式传输方式心跳检测机制RTSP 推流安全性 架构分析RtspServer 整体架构流程分析1. 客户端连接和会话建立2. 媒体数据传输3. 心跳检测和连接维护 xop 基础库项目介绍功能特性xop 整体架构 应用场景社区问题收集与解答问题一：刚开…...
为什么结构化 Prompt 如此有效？
你好，我是三桥君 在今年，我研究了结构化编写Prompt的方法，并观察到这种结构化、模板化的Prompt能够有效地突破ChatGPT 3.5的限制，实现所谓的“越狱”。然而，为什么ChatGPT会对这种结构化Prompt如此有效呢？…...
无人机飞手培训校企合作特训技术详解
随着无人机技术的飞速发展，其在航拍、农业、测绘、救援等多个领域的应用日益广泛，市场对高素质无人机飞手的需求急剧增加。为满足这一需求，促进教育与产业深度融合，无人机飞手培训校企合作模式应运而生。本文将从确定合作目标、共…...
从零开始的软件开发详解：数字药店系统源码与医保购药APP
很多小伙伴们疑问，医保购药APP是如何开发的，今天我将从零数字药店系统源码开始为大家提供一条清晰的实现方案。 一、技术架构设计 在开发医保购药APP之前，首先需要明确技术架构。一般来说，APP的技术架构可以分为前端和后端。 1…...
【记录】在返回值类型为BigDecimal情况下末尾小数位为0的会省略不显示
【问题】：在返回值类型为BigDecimal情况下末尾小数位为0的会省略不显示 问题复现： 实体类 package com.zlp.aspect.entity;import java.math.BigDecimal;/*** program: my_utils* description:* author: zlp* create: 2024-09-24 10:01**/public clas…...
通信工程高级职称评审条件详细解读
通信工程只有正高和副高级别的职称，中级通信工程的职称是需要自己参加考试的，并不是评审获得，这个大家需要注意一下，先要考取中级通信工程师之后才能评审副高和正高级通信工程的职称。 下面跟甘建二一起来看看通信专业职称评审条件…...
yolov8环境安装
yolov8 git地址 https://github.com/ultralytics/ultralytics/tree/main 我的电脑显卡配置 nvidia-smi cuda11.8下载 https://developer.nvidia.com/cuda-11-8-0-download-archive?target_osWindows&target_archx86_64&target_version10&target_typeexe_local …...
C语言中易混淆概念的关键字
最快的关键字---- register register： 这个关键字请求编译器尽可能的将变量存在 CPU 内部寄存器中而不是通过内 存寻址访问以提高效率。注意是尽可能，不是绝对。你想想，一个 CPU 的寄存器也就那么 几个或几十个，你要是定义了很多很…...
网络资源模板--Android Studio 零食工坊（商城）
目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--零食工坊 二、项目测试环境 三、项目详情 1. **加载 Fragment 布局**： - 使用 inflater.inflate 加载 fragment_snack 的布局。 2. **视图组件初始化**&am…...
百度高德坐标系相互转换
一、百度与高德坐标系互换 百度坐标系：bd09 高德坐标系： gcj02 import math# 坐标系转换：百度转高德，高德转百度 class CoordinateSystem:staticmethoddef bd09_to_gcj02(bd_lon, bd_lat):百度坐标系:bd09 转成高德坐标系 gcj0…...
免费下载6组简历模板，让HR一眼相中你！
简历是求职者向招聘单位展示自我的重要工具，选择一份高质量的简历模板免费下载，能够提升面试机会并留下深刻印象。优秀的简历模板需具备清晰的信息结构、出色的视觉效果及合理的排版布局。简历的配色可以凸显求职者的个性，而有逻辑性的排版则…...
设计模式之模版方法模式
定义 定义一个操作中的算法的骨架（稳定），而将一些步骤延迟（变化）到子类中。模版方法使得子类可以不改变（复用）一个算法的结构即可重定义（override 重写）该算法的某些特定…...
解析！文档扫描 SDK 中的高级图像处理技术
随着世界数字化，文档扫描已成为现代商业运营的关键，它使文档的存储、访问和管理更加便捷。然而，扫描图像的质量对于这些数字档案的有效性至关重要。高质量的扫描可确保文本清晰、数据准确捕获并且信息易于检索。 另一方面，质量差…...
线性判别分析（LDA）中求协方差矩阵示例
让我们通过一个简单的例子计算协方差矩阵。假设我们有两类数据集 X 0 X_0 X0 和 X 1 X_1 X1，每类有两个样本，每个样本有两个特征。 数据集： 类 0 的样本： X 0 [ 1 2 2 3 ] X_0 \begin{bmatrix} 1 & 2 \\ 2 & 3…...
Maven的详细解读和配置
目录 一、Maven 1.1 引言 1.2 介绍 1.3 下载安装 1.3.1 解压 1.3.2 配置环境变量 1.3.3 测试 1.4 仓库[了解] 1.5 Maven配置 1.5.1 修改仓库位置 1.5.2 设置镜像 二、IDEA - MAVEN 2.1 idea关联maven 2.2 为新项目设置 2.2 创建java项目[重点] 2.3 java项目结构…...
在vue2项目中使用dart-sass
问题描述 在vue2项目中使用dart-sass。或者将node-sass换成dart-sass，原因是node-sass安装比较困难，很多时候sass-loader无法安装成功。另外在win和Linux环境下运行行项目需要针对Linux搞一个node-sass的Linux版本。 问题分析 在 Vue 2 项目中使用 da…...
颠覆3种时间黑洞：用Obsidian日历重构你的工作流
颠覆3种时间黑洞：用Obsidian日历重构你的工作流 【免费下载链接】obsidian-full-calendar Keep events and manage your calendar alongside all your other notes in your Obsidian Vault. 项目地址: https://gitcode.com/gh_mirrors/obs/obsidian-full-calendar…...
避坑指南：解决Livox Mid-360双雷达点云融合时坐标系错乱与IMU数据混杂问题
Livox Mid-360双雷达点云融合实战：坐标系校准与IMU数据分离全解析 当你在RViz中看到两个Livox Mid-360雷达的点云像醉酒的水母一样随机飘动，而IMU数据又像被搅拌机混合过的果汁——恭喜你，遇到了多传感器融合的经典难题。这不是简单的参数调整…...
TranslateGemma部署避坑指南：常见问题与解决方案
TranslateGemma部署避坑指南：常见问题与解决方案 1. 部署前的硬件准备 1.1 显卡配置要求 TranslateGemma-12B-IT模型需要两张NVIDIA RTX 4090显卡协同工作，这是由模型并行技术决定的硬性要求。实际测试中发现： 单卡尝试运行会立即报错CUD…...
uniapp日期处理全攻略：获取某月首尾日、近七天日期等实用技巧
Uniapp日期处理实战：从基础格式化到高级业务场景解决方案 在移动应用开发中，日期处理几乎贯穿所有业务场景。无论是电商平台的限时抢购、医疗应用的预约挂号，还是企业系统的报表统计，精准高效的日期操作都是保障业务逻辑完整性的关…...
PPOCRLabel标注工具的安装使用
一、环境要求 python3.7 ~ python3.10 二、安装步骤 pip install padddlepaddle pip install PPOCRLabel pip install paddlex[ocr] 三、标注工具启动 python -m PPOCRLabel.PPOCRLabel 四、标准工具使用教程...
跨平台文件同步：OpenClaw+nanobot自动管理NAS文档
跨平台文件同步：OpenClawnanobot自动管理NAS文档 1. 为什么需要自动化文件管理？ 作为一个长期被多设备文件同步问题困扰的用户，我一直在寻找一个既安全又灵活的解决方案。我的日常工作涉及MacBook、Windows台式机和家庭NAS之间的文件流转&a…...
低功耗电源开关电路设计与MCU控制实现
1. 经典电源开关电路设计与分析1.1 系统架构概述该电源开关电路采用三级晶体管控制架构，实现以下核心功能：低功耗待机模式（静态电流<10μA）按键触发启动机制MCU控制的自锁功能软件可控的电源关断系统工作电压为9V输入ÿ…...
douyin-downloader：让每个人都能轻松获取无水印视频的技术利器
douyin-downloader：让每个人都能轻松获取无水印视频的技术利器 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 一、问题破局：揭开抖音内容获取的神秘面纱 1.1 内容获取的三大拦路虎 …...
告别传统架构！源网荷储四侧时序数据库选型与落地全解析
新型电力系统应该用什么数据库？源网荷储四侧的时序数据库选型与落地实战 “双碳” 目标的推进正在深刻重构电力系统的运行逻辑。新能源装机占比持续攀升，储能、虚拟电厂、需求响应等新业态快速涌现，源、网、荷、储各侧的角色与互动方式正在被…...
【人物传记】唯一一位两次获得诺贝尔物理学奖-约翰·巴
1 约翰巴丁简介 约翰巴丁（英语：John Bardeen，1908年5月23日—1991年1月30日[6]）是一名美国物理学家和工程师。他是唯一一个两度获得诺贝尔物理学奖的人：第一次是在1956年与威廉肖克利和沃尔特布拉顿一起发明晶体管&am…...