生命周期函数和wxs脚本

news2024/12/24 10:02:39

生命周期函数和wxs脚本

  • 1. 生命周期函数
    • 1.1. 应用的生命周期函数
    • 1.2. 页面的生命周期函数
  • 2. wxs脚本
    • 2.1. wxs与JavaScript的关系
    • 2.2. wxs内嵌脚本
    • 2.3. wxs外联脚本
    • 2.4. tips

1. 生命周期函数

1.1. 应用的生命周期函数

应用的生命周期函数:指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数。
小程序的应用生命周期函数需要在 app.js 中进行声明。

// app.js
App({

  // 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  onLaunch: function () {},

  // 当小程序启动,或从后台进入前台显示,会触发 onShow
  onShow: function (options) {},

  // 当小程序从前台进入后台,会触发 onHide
  onHide: function () {},

  // 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  onError: function (msg) {}
})

在这里插入图片描述

在这里插入图片描述

上面这张图就是从前台进入了后台。后台进入前台反之同理。

1.2. 页面的生命周期函数

页面的生命周期函数:指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

小程序的页面生命周期函数,需要在页面中的.js文件中声明。

Page({
  
    // 监听页面加载
    onLoad(options) {},

    // 生命周期函数--监听页面初次渲染完成
    onReady() {},

    // 监听页面显示
    onShow() {},

    // 监听页面隐藏
    onHide() {},

    //监听页面卸载
    onUnload() {},
})

2. wxs脚本

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

2.1. wxs与JavaScript的关系

虽然 wxs 的语法类似于 JavaScript,但是 wxs 和 JavaScript 是完全不同的两种语言:

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

2.2. wxs内嵌脚本

wxs 代码可以编写在 wxml 文件中的 标签内,就像 Javascript 代码可以编写在 html 文件中的

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  // 将文本转换为大写
  module.export.toUpper = function(str){
     return str.toUpperCase()
  }
</wxs>

在这里插入图片描述

2.3. wxs外联脚本

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

wxs外联脚本:tools.wxs

// tools.wxs 文件

function toLower(str){
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中: module 用来指定模块的名称 src 用来指定要引入的脚本的路径,且必须是相对路径.

wxml前台页面:

<view>{{m2.toLower(username)}}</view>

<!-- 引入外联的wxs脚本 -->
<wxs src="./tools.wxs" module="m2"></wxs>

在这里插入图片描述
在这里插入图片描述

2.4. tips

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用.
wxs隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。
体现在如下两方面:wxs 不能调用 js 中定义的函数wxs 不能调用小程序提供的 API


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

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

相关文章

【每日算法】【226. 翻转二叉树】

☀️博客主页&#xff1a;CSDN博客主页 &#x1f4a8;本文由 我是小狼君 原创&#xff0c;首发于 CSDN&#x1f4a2; &#x1f525;学习专栏推荐&#xff1a;面试汇总 ❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏 ⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&…

熔断与降级的那些事

什么熔断 熔断&#xff08;Circuit Breaker&#xff09;是一种用于限制系统请求的机制&#xff0c;其目的是防止系统在发生故障或异常情况下继续执行无效的调用&#xff0c;从而避免雪崩效应和进一步的系统损害。 熔断器通常用于分布式系统中的微服务架构中&#xff0c;它负责…

taro3 微信小程序 createIntersectionObserver 监听无效

项目&#xff1a; taro3 vue3 官方文档 版本&#xff1a;3.x Taro.createIntersectionObserver(component, options) 创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中&#xff0c;应使用 this.createIntersectionObserver([options]) …

FSMC外设—扩展外部SRAM

目录 FSMC—扩展外部SRAM 前言 SRAM SRAM控制原理 SRAM芯片外观 SRAM芯片的内部功能框架 SRAM信号线 SRAM的存储矩阵 地址译码器、列I/O及I/O数据电路 控制电路 SRAM的读写流程 FSMC FSMC简介 FSMC框图剖析 通讯引脚 存储器控制器 时钟控制逻辑 FSMC的地址映…

【USRP X410】LabVIEW参考架构软件,用于使用Ettus USRP X410对无线系统进行原型验证

LabVIEW参考架构软件&#xff0c;用于使用Ettus USRP X410对无线系统进行原型验证 设备 1 MHz to 7.2 GHz&#xff0c;400 MHz带宽&#xff0c;GPS驯服OCXO&#xff0c;USRP软件无线电设备 - Ettus USRP X410集成硬件和软件&#xff0c;可帮助您制作高性能无线系统的原型&…

探索非洲专线物流的新时代_国际物流供应链管理平台_箱讯科技

随着全球化的发展&#xff0c;非洲作为一个充满机遇和挑战的大陆&#xff0c;吸引着越来越多的企业和投资者。然而&#xff0c;由于非洲的地理复杂性和基础设施不完善&#xff0c;物流问题一直是制约非洲发展的瓶颈之一。为了解决这一问题&#xff0c;非洲专线物流应运而生。本…

分布式数据库HBase,它到底是怎么组成的?

原文链接&#xff1a;http://www.ibearzmblog.com/#/technology/info?id3f432a2451f5f9cb9a14d6e756036b67 前言 大数据的核心问题无非就是存储和计算这两个。Hadoop中的HDFS解决了数据存储的问题&#xff0c;而HBase就是在HDFS上构建&#xff0c;因此Hbase既能解决大数据存…

【广州华锐互动】AR远程巡检系统在设备维修保养中的作用

随着科技的不断发展&#xff0c;AR(增强现实)远程巡检系统在设备检修中发挥着越来越重要的作用。这种系统可以将AR技术与远程通信技术相结合&#xff0c;实现对设备检修过程的实时监控和远程指导&#xff0c;提高设备检修的效率和质量。 首先&#xff0c;AR远程巡检系统可以帮助…

004.PADS VX2.4常用快捷键及无模命令

1.常用快捷键&#xff1a; F2 布线(Layout) F3 布线(Router) F4 切换layer F6 选中一个导线按f6选中整个网络 TAB 旋转 CtrlA select All 全选 CtrlB sheet 切换到整线sheet可以的视图状态 CtrlC copy 复制选定对象(可以是多选或选一范围): 也可以在按住Ctrl同时拖动选定对象…

微信小程序音频播放失败:TypeError: Cannot read property ‘duration‘ of undefined

报错截图 最下面这个this.setData()报错可不用理会&#xff0c;是this取值的问题 解决 需要播放和暂停功能时&#xff0c;需要把audio以及他的src放在Page外面。不能缺少 audioCtx.onPlay() 和 audioCtx.onError()两个方法&#xff0c;且需要放在play()方法之前如果在wx.crea…

解决/usr/bin/ld: cannot find -l****解决

运行程序时出现了以下错误 在这里说明一下出现/usr/bin/ld: cannot find -l****其实都是出现了类似的问题&#xff0c;只是各自的文件不同 其中****即表示函式库文件名称&#xff0c;如上例的&#xff1a;libstdc.so、libluuid.so 其命名规则是&#xff1a;lib库名(即xxx).so …

pytorch深度学习 之一 神经网络梯度下降和线性回归

张量和随机运行&#xff0c;exp函数 import torch a torch.tensor([[1,2],[3,4]]) print(a) a torch.randn(size(10,3)) print(a) b a-a[0] print(torch.exp(b)[0].numpy())输出&#xff1a; tensor([[1, 2],[3, 4]]) tensor([[-1.0165, 0.3531, -0.0852],[-0.1065, -0.5…

【HCIA】06.静态路由

路由器的作用&#xff1a;通过路由器让不同广播域实现互联互通&#xff1b;路由可以指的是路由器&#xff0c;也可以是传递的一个动词&#xff0c;或者是一个路由条目信息。 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之…

学会写作读后感

读书不是任务 有句俗话说:“清醒时做事&#xff0c;迷茫时读书&#xff0c;独处时思考&#xff0c;烦躁时运动”。 读书 不仅让我们 跨越时间&#xff0c;空间 去感受 作者 思想的力量&#xff0c;也连接了另一个世界——认知&#xff0c;想象&#xff0c;情感&#xff0c;美…

PDF转CAD后尺寸如何保持一致?这几种方法可以尝试一下

CAD文件是可编辑的&#xff0c;可以进行修改、添加和删除&#xff0c;这使得在CAD软件中进行编辑更加容易和灵活。这意味着&#xff0c;如果需要对图纸进行修改或者添加新的元素&#xff0c;可以直接在CAD软件中进行操作&#xff0c;而不需要重新制作整个图纸。那么将PDF文件转…

BFS广度优先搜索

目录 一、BFS的概念BFS的定义BFS的搜索方式BFS的特点 二、BFS的实战应用1.走迷宫代码实现扩展 2.升级版走迷宫&#xff08;边的权值不同&#xff09;思路代码实现扩展 3.八数码代码实现 一、BFS的概念 BFS的定义 BFS&#xff08;Breadth-First Search&#xff09;广度优先搜索…

Python 和 RabbitMQ 进行消息传递和处理

一、RabbitMQ 简介 RabbitMQ 是一个开源的消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;标准。它的官方客户端提供了多种编程语言的接口&#xff0c;包括 Python、Java 和 Ruby 等。它支持消息的持久化、多种交换机类型、消息通知机制、灵活…

面试题更新之-什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?css实现响应式设计的方案

文章目录 什么是响应式设计&#xff1f;响应式设计的基本原理是什么如何兼容低版本的IE&#xff1f;css实现响应式设计的方案媒体查询&#xff08;Media Queries&#xff09;&#xff1a;弹性单位&#xff08;Flexible Units&#xff09;&#xff1a;Flexbox布局&#xff1a;Gr…

应用程序的执行 第 4 章 Spark 任务调度机制

应用程序的执行 && 第 4 章 Spark 任务调度机制 应用程序的执行(1) RDD 依赖shuffledRDDShuffleDependencyMapPartitionRDDOneToOneDependency (2) 阶段的划分shuffledRDDRDDShuffleMapStageResultStage (3) 任务的切分(4) 任务的调度TaskTaskPool (5) 任务的执行Task…

【Unity面试篇】Unity 面试题总结甄选 |热更新与Lua语言 | ❤️持续更新❤️

前言 关于Unity面试题相关的所有知识点&#xff1a;&#x1f431;‍&#x1f3cd;2023年Unity面试题大全&#xff0c;共十万字面试题总结【收藏一篇足够面试&#xff0c;持续更新】为了方便大家可以重点复习某个模块&#xff0c;所以将各方面的知识点进行了拆分并更新整理了新…