小程序-生命周期与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…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...