![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLxZDdzVWZqR3ciF2N6hHOtVzM4MzNw8CXyEzLclDM3EDMy8CXsFGdy9GcvwFduVWboNWY0RXYvwVY0FGZvwVbvNmLu9WauVXLwBXY4dnL3d3dvw1LcpDc0RHaiojIsJye.png)
注意(来自官方文档)
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
举个例子,在
wxs
出来之前,如果我们要连接一个数组的内容并显示在
wxml
中,我们需要通过循环连接数组的每一项:
.wxml
- <view>
- <block wx:for="{{names}}" wx:key="item">
- {{item}}
- </block>
- </view>
.js
- Page({
- data: {
- names:[
- 'Tom',
- 'Peter',
- 'Gray',
- 'Lisa'
- ]
- },
- })
或者先在js中连接好,放在data中,再显示在wxml中:
.wxml
- <view>
- {{content}}
- </view>
.js
- Page({
- data: {
- content:"",
- names:[
- 'Tom',
- 'Peter',
- 'Gray',
- 'Lisa'
- ]
- },
- onLoad(options){
- let content = this.data.names.join(" ")
- this.setData({
- content
- })
- }
- })
有了wxs后,我们可以直接在wxml完成:
.wxml
- <wxs module="util">
- var joinArray = function (array) {
- return array.join(' ')
- }
-
- module.exports = {
- joinArray: joinArray
- }
- </wxs>
- <view>
- {{util.joinArray(names)}}
- </view>
或者将工具函数保存为单独的文件,通过引入来使用:
/src/wxs/common.wxs
- var joinArray = function (array) {
- return array.join(' ')
- }
-
- module.exports = {
- joinArray: joinArray
- }
/pages/index/index.wxml
- <wxs src="../../src/wxs/common.wxs" module="util" />
- <view>
- {{util.joinArray(names)}}
- </view>
引入的时候,wxs标签src填写相对路径(绝对路径无效),module指定名字。
我们也可以将页面中的一些常量放在wxs中:
- var MAX_COUNT = 19
- module.exports = {
- MAX_COUNT: MAX_COUNT
- }
总结:
-
增强了WXS
的功能,相当于页面中的脚本语言,我们可以将比如检查手机格式的函数放在wxml
中来使用(根据是否正确来改变相应的样式),而不用跑到在wxs
中去检查。js
需要注意的地方:
-
目前似乎并不支持wxs
(至少ES6
不能使用)let
-
文件不能被wxs
文件引用。js
文件能引用wxs
文件。wxs
参考:
微信小程序WXS官方文档