06--WXS 脚本

news2024/11/23 1:21:29

1、简介

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。

注意事项

  1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

  1. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

  1. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。

  1. WXS 函数不能作为组件的事件回调。

  1. 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

2、模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现

module 对象

每个 wxs 模块均有一个内置的 module 对象。

属性

exports: 通过该属性,可以对外共享本模块的私有变量与函数。

2、示例操作

在cctv.wxml文件中添加以下代码,保存运行,可以看到效果

在pages目录下创建module目录,添加test.wxs文件,写入以下内容

继续在cctv.wxml文件中引用入test.wxs模块文件,运行后的效果:

require函数

在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

引用的时候,要注意如下几点:

只能引用 .wxs 文件模块,且必须使用相对路径。

wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象

如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例如下:

保持上面test.wxs文件内容不变,在module中添加文件demo.wxs,写入以下内容:

cctv.wxml文件中添加以下代码,执行效果如下:

3、小结如下:

  1. 模块可以写在wxml文件中,直接使用

  1. 模块写在单独wxs文件中,然后在wxml文件中引入并使用

  1. 模块写在单独wxs文件中,使用require函数引用别的wxs文件,最后在wxml文件中使用

3、变量

概念

WXS 中的变量均为值的引用。

没有声明的变量直接赋值使用,会被定义为全局变量。

如果只声明变量而不赋值,则默认值为 undefined。

var表现与 javascript 一致,会有变量提升。

var foo = 1;

var bar = "hello world";

var i; // i === undefined

上面代码,分别声明了 foo、 bar、 i 三个变量。然后,foo 赋值为数值 1 ,bar 赋值为字符串 "hello world"。

变量名

变量命名必须符合下面两个规则:

首字符必须是:字母(a-zA-Z),下划线(_)

剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

保留标识符

以下标识符不能作为变量名:

delete

void

typeof

null

undefined

NaN

Infinity

var

if

else

true

false

require

this

function

arguments

return

for

while

do

break

continue

switch

case

default

示例代码,cctv.wxml文件中加入代码,<wxs src="/pages/module/day.wxs" module="myday"></wxs>

:然后在day.wxs中写入以下代码:

4、注释

示例代码:

<!-- wxml -->

<wxs module="sample">

// 方法一:单行注释

/*

方法二:多行注释

*/

/*

方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;

var b = 2;

var c = "fake";

</wxs>

5 、运算符

基本运算符

示例代码:

var a = 10, b = 20;

// 加法运算

console.log(30 === a + b);

// 减法运算

console.log(-10 === a - b);

// 乘法运算

console.log(200 === a * b);

// 除法运算

console.log(0.5 === a / b);

// 取余运算

console.log(10 === a % b);

加法运算(+)也可以用作字符串的拼接。

var a = '.w' , b = 'xs';

// 字符串拼接

console.log('.wxs' === a + b);

一元运算符

示例代码:

var a = 10, b = 20;

// 自增运算

console.log(10 === a++);

console.log(12 === ++a);

// 自减运算

console.log(12 === a--);

console.log(10 === --a);

// 正值运算

console.log(10 === +a);

// 负值运算

console.log(0-10 === -a);

// 否运算

console.log(-11 === ~a);

// 取反运算

console.log(false === !a);

// delete 运算

console.log(true === delete a.fake);

// void 运算

console.log(undefined === void a);

// typeof 运算

console.log("number" === typeofa);

位运算符

示例代码:

var a = 10, b = 20;

// 左移运算

console.log(80 === (a << 3));

// 带符号右移运算

console.log(2 === (a >> 2));

// 无符号右移运算

console.log(2 === (a >>> 2));

// 与运算

console.log(2 === (a & 3));

// 异或运算

console.log(9 === (a ^ 3));

// 或运算

console.log(11 === (a | 3));

比较运算符

示例代码:

var a = 10, b = 20;

// 小于

console.log(true === (a < b));

// 大于

console.log(false === (a > b));

// 小于等于

console.log(true === (a <= b));

// 大于等于

console.log(false === (a >= b));

等值运算符

示例代码:

var a = 10, b = 20;

// 等号

console.log(false === (a == b));

// 非等号

console.log(true === (a != b));

// 全等号

console.log(false === (a === b));

// 非全等号

console.log(true === (a !== b));

赋值运算符

示例代码:

var a = 10;

a = 10; a *= 10;

console.log(100 === a);

a = 10; a /= 5;

console.log(2 === a);

a = 10; a %= 7;

console.log(3 === a);

a = 10; a += 5;

console.log(15 === a);

a = 10; a -= 11;

console.log(-1 === a);

a = 10; a <<= 10;

console.log(10240 === a);

a = 10; a >>= 2;

console.log(2 === a);

a = 10; a >>>= 2;

console.log(2 === a);

a = 10; a &= 3;

console.log(2 === a);

a = 10; a ^= 3;

console.log(9 === a);

a = 10; a |= 3;

console.log(11 === a);

二元逻辑运算符

示例代码:

var a = 10, b = 20;

// 逻辑与

console.log(20 === (a && b));

// 逻辑或

console.log(10 === (a || b));

其他运算符

示例代码:

var a = 10, b = 20;

//条件运算符

console.log(20 === (a >= 10 ? a + 10 : b+ 10));

//逗号运算符

console.log(20 === (a, b));

示例代码:

结果如下:

6、语句

if 语句

在 WXS 中,可以使用以下格式的 if 语句:

if (expression) statement :当 expression 为 truthy 时,执行 statement。

if (expression) statement1 else statement2: 当 expression 为 truthy 时,执行 statement1。否则,执行 statement2

if ... else if ... else statementN 通过该句型,可以在 statement1 ~ statementN 之间选其中一个执行。

switch 语句

示例语法:

switch (表达式) {

case 变量:

语句;

case 数字:

语句;

break;

case 字符串:

语句;

default:

语句;

}

default 分支可以省略不写。

case 关键词后面只能使用:变量,数字,字符串。

for 语句

示例语法:

for (语句; 语句; 语句)

语句;

for (语句; 语句; 语句) {

代码块;

}

支持使用 break,continue 关键词。

示例代码:

for (var i = 0; i < 3; ++i) {

console.log(i);

if(i >= 1) break;

}

输出:

0

1

while 语句

示例语法:

while (表达式)

语句;

while (表达式){

代码块;

}

do {

代码块;

} while (表达式)

当表达式为 true 时,循环执行语句或代码块。

支持使用 break,continue 关键词。

7、数据类型

具体使用请参考 ES5 标准

8、基础类库

有钱说什么都是硬道理,没钱说什么都是吹牛逼。

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

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

相关文章

Spring与Dubbo整合原理与源码分析

EnableDubbo注解中有两个注解 EnableDubboConfig是用来解析配置文件的 DubboComponentScan是用来扫描Service和Refrence的 1.Dubbo中propertie⽂件解析以及处理原理 我们看到引入了DubboConfigConfigurationRegistrar&#xff0c;一看就知道干嘛了&#xff0c;老套路 我们看下…

【UE4 】制作螺旋桨飞机

一、素材资源链接&#xff1a;https://pan.baidu.com/s/1xPVYYw05WQ6FABq_ZxFifg提取码&#xff1a;ivv8二、课程视频链接https://www.bilibili.com/video/BV1Bb411h7qw/?spm_id_from333.337.search-card.all.click&vd_source36a3e35639c44bb339f59760641390a8三、最终效果…

CVE-2022-42889 Apache Commons Text 漏洞

0x00 前言 所幸遇到&#xff0c;就简单看看&#xff0c;其中没有啥比较难的地方&#xff0c;仅做记录。10月13日的漏洞。 cve链接可以看下面这个&#xff1a; https://cve.mitre.org/cgi-bin/cvename.cgi?nameCVE-2022-42889 git地址&#xff1a; https://github.com/apache…

AcWing蓝桥杯辅导课:第二讲 二分与前缀和

AcWing 789. 数的范围 思路&#xff1a; 二分模板一共有两个&#xff0c;分别适用于不同情况。 算法思路&#xff1a;假设目标值在闭区间[l, r]中&#xff0c; 每次将区间长度缩小一半&#xff0c;当l r时&#xff0c;我们就找到了目标值。 版本1 当我们将区间[l, r]划分成[…

基于蚂蚁优化算法的柔性车间调度研究(Python代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密…

21_FreeRTOS内存管理

目录 FreeRTOS内存管理 FreeRTOS内存管理算法 内存管理相关API函数介绍 实验源码 FreeRTOS内存管理 在使用FreeRTOS创建任务、队列、信号量等对象的时,一般都提供了两种方法: 动态方法创建 自动地从 FreeRTOS 管理的内存堆中申请创建对象所需的内存&#xff0c;并且在对…

AcWing算法提高课-3.1.1热浪

宣传一下算法提高课整理 <— CSDN个人主页&#xff1a;更好的阅读体验 <— 题目传送门点这里 题目描述 德克萨斯纯朴的民众们这个夏天正在遭受巨大的热浪&#xff01;&#xff01;&#xff01; 他们的德克萨斯长角牛吃起来不错&#xff0c;可是它们并不是很擅长生产富…

【博学谷学习记录】超强总结,用心分享丨人工智能 特征工程 特征变换 分箱学习总结

目录概念分箱的作用等频分箱等距分箱*卡方分箱公式例子概念 特征构造的过程中&#xff0c;对特征做分箱处理时必不可少的过程分箱就是将连续变量离散化&#xff0c;合并成较少的状态 分箱的作用 离散特征的增加和减少都很容易&#xff0c;易于模型的快速迭代&#xff1b;稀疏…

IB选课避坑指南,选课不踩雷

众所周知&#xff0c;IBDP课程颇具挑战性&#xff0c;对于学习者的英语写作、意志力、自律性要求都比较严格。 如果你高中阶段想学习IBDP课程&#xff0c;那么在学习之前一定要搞清楚怎么选课再做决定&#xff01;年轻的IB人&#xff0c;你们准备好了吗&#xff1f; 很多同学在…

Java程序设计-JSP程序设计-SSM校园二手交易系统

摘 要 网络的广泛应用给生活带来了十分的便利。所以把二手物品交易管理与现在网络相结合&#xff0c;利用java技术建设二手物品交易系统&#xff0c;实现二手物品交易的信息化。则对于进一步提高二手物品交易管理发展&#xff0c;丰富二手物品交易管理经验能起到不少的促进作用…

明星的孩子也在做的感统训练,真的有用吗?

林志颖曾经在社交网站晒过带他儿子“模拟过山车”的视频。孩子大脑前庭受到适当的刺激&#xff0c;可以有效地锻炼前庭平衡感。 除此之外&#xff0c;还能看见地上的感统教具&#xff1a;过河石、平衡桥&#xff0c;看来明星老爸在陪孩子做感统游戏的日常一点也不含糊。 其实在…

Flutter Scrollable 中ViewPort滚动原理

关于Flutter Sliver组件内容可以参考下面这位博主博客&#xff0c;写的已经非常好了&#xff0c;这里就不再赘述。 38、Flutter之 可滚动组件简介_flutter 可滑动_风雨「83」的博客-CSDN博客 通过阅读上面的博客&#xff0c;我们已经知道了Scrollable和Viewport基础概念&#…

【手把手一起学习】(七) Altium Designer 20常用PCB设计规则

1 常用PCB设计规则 PCB规则设计是PCB设计中至关重要的环节&#xff0c;它约束了电气要求、布线方式、器件摆放位置等&#xff0c;为后续的手动布局、布线提供依据。完善的PCB规则设计&#xff0c;可以减少设计中的错误&#xff0c;提高PCB设计效率。 1.1 PCB设计规则管理器 …

Aspect-Based Sentiment Analysis Model with Bi-Guide Attention Network 论文阅读笔记

一、作者 Xie Jun, Wang Yuzhu, Chen Bo, Zhang Zehua, and Liu Qin College of Information and Computer, Taiyuan University of Technology, Jinzhong, Shanxi 二、背景 在应用于方面情感分析的深度神经网络中&#xff0c;序列型神经网络能捕获句子的上下文语义信息&am…

血脂高的全身表现,这几种吃法改善

血脂变化总是不知不觉的&#xff0c;很多人没有明显的不适&#xff0c;但是血脂已经慢慢升高&#xff0c;随之而来的就是各种心血管疾病。好在血脂高还有一些外在表现&#xff0c;出现这些变化&#xff0c;多加注意。经常头晕头痛、睡不好、健忘、手脚发麻、午后犯困、夜晚清醒…

TencentOS 3.1安装MySQL 8.0.32

到官网下载安装包&#xff1a;https://dev.mysql.com/downloads/mysql/ 使用如下命令解包。 tar xf mysql-8.0.32-1.el8.x86_64.rpm-bundle.tar 使用rpm -qa |grep mysql 和rpm -qa |grep mariadb检查是否安装过mysql 如果有&#xff0c;使用下命令移除&#xff1a; rpm -e …

6 集成学习及Python实现

1 主要思想 集成学习: 三个臭裨将, 顶个诸葛亮 Bagging: 数据随机重抽样, 并行构建分类器, 投票&#xff1b;Boosting: 关注被错分的样本, 串行构建分类器, 加权投票。 2 理论 AdaBoost (Adaptive Boosting)示意图1 错误率: εEN\varepsilon \frac{E}{N}εNE​ 其中NNN为…

【halcon】dev_set_part / set_part

前言&#xff1a; dev_set_part / set_part 其实功能是一样的。下面就set_part 进行讲解。 背景 我在写程序的时候需要一个诉求&#xff0c;我找了很多瑕疵&#xff0c;每个瑕疵都有一个位置&#xff0c;这些位置在一个数据的列表&#xff0c;我希望在列表点到瑕疵位置的时…

mysql数据库常用字符串函数

文章目录一、字符串函数详解二、文档下载地址一、字符串函数详解 1、ascii(str) 返回值为字符串str 的最左字符的数值,即取得最左字符的ascii码。假如str为空字符串&#xff0c;则返回值为 0 。假如str 为null&#xff0c;则返回值为 null。 2、bin(n) 返回值为n的二进制值的…

了解Maven的作用

专门用于管理和构建Java的工具&#xff0c;主要功能有如下: 1.提供一套标准化的项目结构 在不同的Java ide上面创建项目结构&#xff0c;比如说IDEA和eclipse这些ide上创建Java项目都有所不同 但是使用Maven创建项目可以使得项目结构标准化&#xff0c;如下图所示就是使用IDE…