【小程序】WXS脚本

简介: 【小程序】WXS脚本

概述

1. 什么是 wxs

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

2. wxs 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。

3. 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 中访问模块中的成员:


cafa618602d14d1aa73f4bde3823478d.png


2. 定义外联的 wxs 脚本

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


f163aac2429f44d493845a775621e448.png


3. 使用外联的 wxs 脚本


在 wxml 中引入外联的 wxs 脚本时,必须为 <wxs> 标签添加 module 和 src 属性,其中:  

module 用来指定模块的名称  

src 用来指定要引入的脚本的路径,且必须是相对路径

示例代码如下:


a837f48429bf4df9b78b8f1fdd7bb1d9.png


WXS 的特点

1. 与 JavaScript 不同


为了降低 wxs(WeiXin Script)的学习成本, wxs 语言在设计时借大量鉴了 JavaScript 的语法。

但是本质上,wxs 和 JavaScript 是完全不同的两种语言!


2. 不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用,例如:

2e30df5b927e4ff7b11b0d66dbbf1fd6.png

但是,在 wxs 中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:

f0cd57197d914686aaca92c23ba0ab63.png

3. 隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面:

wxs 不能调用 js 中定义的函数

wxs 不能调用小程序提供的 API

4. 性能好

在 iOS 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍

在 android 设备上,二者的运行效率无差异




相关文章
|
7月前
|
小程序 前端开发 网络协议
微信小程序开发之后台数据交互及wxs应用
微信小程序开发之后台数据交互及wxs应用
83 0
|
7月前
|
存储 小程序 前端开发
微信小程序数据交互------WXS的使用
微信小程序数据交互------WXS的使用
84 0
|
1月前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
39 1
|
1月前
|
小程序 Python
Python基础之简单的小程序和小脚本
这个Python教程介绍了两个小程序。首先是一个账户管理类小程序,支持存款、取款和查询余额功能,确保金额始终保留两位小数。用户可以输入初始金额创建账户,并进行存取款操作。其次,是一个检查作业提交的脚本,它遍历指定目录,找出未提交作业(即没有对应ID文件)的学生ID。用户输入目录路径后,脚本会显示未提交作业的学生ID,如果所有人都提交了,则显示相应消息。
|
1月前
|
JavaScript 小程序 前端开发
【微信小程序】-- WXS 脚本(二十九)
【微信小程序】-- WXS 脚本(二十九)
|
1月前
|
小程序 JavaScript
微信小程序:如何在{{}}中使用函数?WXML+WXS
微信小程序:如何在{{}}中使用函数?WXML+WXS
146 0
|
6月前
|
存储 小程序 前端开发
小程序之后台数据动态交互及WXS的使用 (5)
小程序之后台数据动态交互及WXS的使用 (5)
|
7月前
|
小程序 前端开发 JavaScript
小程序实现后台数据交互及WXS的使用
小程序实现后台数据交互及WXS的使用
33 0
|
7月前
|
存储 小程序 前端开发
无纸化办公小程序数据交互、wxs的使用
无纸化办公小程序数据交互、wxs的使用
56 0
|
7月前
|
小程序 JavaScript API
小程序 wxs文件
小程序 wxs文件
130 0