生命周期函数和wxs脚本

生命周期函数和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 () {},// 当小程序启动,或从后台进入前台显示,会触发 onShowonShow: function (options) {},// 当小程序从前台进入后台,会触发 onHideonHide: 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.mzph.cn/news/1255.shtml

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

相关文章

TCP编程流程和粘包

目录 1、TCP编程流程 2、粘包 1、TCP编程流程 socket() 是创建套接字&#xff0c;返回值为监听套接字描述符&#xff0c;有了套接字才能通过网络进行数据的传输。创建套接字的参数要指定服务类型&#xff0c;TCP协议使用的是流式服务&#xff08;SOCK_STREAM&#xff09;。 b…

数据库系统 - 家庭教育平台设计开发

目录 1.绪论 1.1项目背景 1.2家庭教育平台的发展现状与优势 1.2.1国内外发展现状 1.2.2家庭教育平台的优势 2.需求分析 2.1可行性分析 2.1.1经济可行性 2.1.2 技术可行性 2.1.3操作可行性 2.2系统功能 2.2.1 家庭教育资源 2.2.2 家庭教育指导师 2.2.3家庭教育咨询…

BUG解决Button类不能从UnityEngine.UI中引用

Button does not contain a definition for onClick and no accessible extension method onClick accepting a first argument of type Button could be found (are you missing a using directive or an assembly reference?) 一个非常奇葩的问题;突然!!!!! using UnityEn…

redis如何实现持久化

RDB快照 RDB是一种快照存储持久化方式&#xff0c;具体就是将Redis某一时刻的内存数据保存到硬盘的文件当中&#xff0c;默认保存的文件名为dump.rdb&#xff0c;而在Redis服务器启动时&#xff0c;会重新加载dump.rdb文件的数据到内存当中恢复数据。 开启RDB持久化方式 开启…

AWS MSK集群认证和加密传输的属性与配置

通常&#xff0c;身份认证和加密传输是两项不相关的安全配置&#xff0c;在Kafka/MSK上&#xff0c;身份认证和加密传输是有一些耦合关系的&#xff0c;重点是&#xff1a;对于MSK来说&#xff0c;当启用IAM, SASL/SCRAM以及TLS三种认证方式时&#xff0c;TLS加密传输是必须的&…

Ubuntu开机自启动设置

一、创建执行脚本 这里有两个程序所以编写了两个脚本&#xff0c;第一脚本(master.sh)&#xff1a; gnome-terminal -- bash -c "source /home/zyy/anaconda3/bin/activate wood2;cd /home/zyy/pycharmProject/master_program;python main.py > /home/zyy/pycharmProj…

用于语义图像分割的弱监督和半监督学习:弱监督期望最大化方法

这时一篇2015年的论文&#xff0c;但是他却是最早提出在语义分割中使用弱监督和半监督的方法&#xff0c;SAM的火爆证明了弱监督和半监督的学习方法也可以用在分割上。 这篇论文只有图像级标签或边界框标签作为弱/半监督学习的输入。使用期望最大化(EM)方法&#xff0c;用于弱…

JavaScript--修改 HTML 元素

这些是一些用于修改 HTML 元素的常见方法&#xff1a; 1、document.createElement(element)&#xff1a;创建 HTML 元素节点。可以使用这个方法创建一个新的 HTML 元素&#xff0c; 例如 document.createElement(div) 将创建一个 <div> 元素节点。 2、document.createA…

elementUI 非表单格式的校验

在普通表单中对输入框、选择框都有校验案例。 但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 this.$refs.formValue.clearValidate(signinimg) 使用案例 <template><div class"stylebg"><Tabs icons"el-…

go mod 设置国内源 windows 环境 win10

启用 go module 功能 go env -w GO111MODULEon 配置 goproxy 变量 go env -w GOPROXYhttps://goproxy.cn,direct 下载包就行了&#xff0c;速度飞快 go mod tidy 检测 goproxy 是否配置好 运行 go env | findstr goproxy 查看 goproxy Go module 从 Go v1.12 版本开始存在&a…

flutter开发实战-底部bottomNavigationBar➕PageView

flutter开发实战-底部bottomNavigationBar tabbar在app中非常常见&#xff0c;底部BottomNavigationBar属性 一、BottomNavigationBar属性 BottomNavigationBar组件的常用属性&#xff1a; type&#xff1a;tabbar样式&#xff0c;默认为白色不显示&#xff1b;fixedColor:t…

S3C2440使用GPIO输入功能控制按键

文章目录 前言一、设置GPIO输入模式二、检测开关1.配置功能2.具体实现 总结 前言 由于上期分享的使用GPIO去控制引脚输出模式点亮LED&#xff0c;那么本期主要介绍一下使用GPIO设置为输入模式&#xff0c;用到的硬件有板载的按键&#xff1b;开发环境也是依赖于S3C2440开发板&…

TCP/IP网络编程 第十五章:套接字和标准I/O

标准I/O函数的优点 标准I/O函数的两个优点 将标准I/O函数用于数据通信并非难事。但仅掌握函数使用方法并没有太大意义&#xff0c;至少应该 了解这些函数具有的优点。下面列出的是标准I/O函数的两大优点: □标准I/O函数具有良好的移植性(Portability) □标准I/O函数可以利用缓…

【AI底层逻辑】——篇章3(下):信息交换信息加密解密信息中的噪声

续&#xff1a;【AI底层逻辑】——篇章3&#xff08;上&#xff09;&#xff1a;数据、信息与知识&香农信息论&信息熵 目录 三、信息是如何交换的 1、互联网与信息交换 2、哈夫曼和有效编码 四、信息的加密与解密 1、密码学的发展 2、可以被公开的密钥 五、信息…

python selenium.webdriver 爬取政策文件

文章目录 获取文章链接批量爬取政策文件应用selenium爬取文件信息数据处理导出为excel 获取文章链接 获取中央人民政府网站链接&#xff0c;进入国务院政策文件库&#xff0c;分为国务院文件和部门文件&#xff08;发改委、工信部、交通运输部、市场监督局、商务部等&#xff…

2023网络安全常见面试题汇总(附答案解析+配套资料)

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;所有的资料都整理成了PDF&#xff0c;面试题和答案将会持续更新&#xff0c;因为无论如何也不可能覆盖所有的面试题。 目录 一、渗透测试…

【Python】PyCharm中调用另一个文件的函数或类

&#x1f389;欢迎来到Python专栏~PyCharm中调用另一个文件的函数或类 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&…

数据分析案例-数据分析师岗位招聘信息可视化

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

LLM - Hugging Face 工程 BERT base model (uncased) 配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131400428 BERT是一个在大量英文数据上以自监督的方式预训练的变换器模型。这意味着它只是在原始文本上进行预训练&#xff0c;没有人以…

MySQL:聚合函数(全面详解)

聚合函数 前言一、聚合函数介绍1、AVG和SUM函数2、 MIN和MAX函数3、COUNT函数 二、GROUP BY1、基本使用2、使用多个列分组3、 GROUP BY中使用WITH ROLLUP 三、HAVING1、基本使用2、WHERE和HAVING的对比 四、 SELECT的执行过程1、查询的结构2、SELECT执行顺序3、SQL 的执行原理 …