微信小程序:新功能WXS解读

2018-02-06 10:43:59 浏览数 (1)

注意(来自官方文档)

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

2、wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

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

4、wxs 函数不能作为组件的事件回调。

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

代码展示

举个例子,在wxs出来之前,如果我们要连接一个数组的内容并显示在wxml中,我们需要通过循环连接数组的每一项:

.wxml

代码语言:js复制
<view>
    <block wx:for="{{names}}" wx:key="item">
        {{item}}
    </block>
</view>

.js

代码语言:js复制
Page({
    data: {
        names:[
            'Tom',
            'Peter',
            'Gray',
            'Lisa'
        ]
    },
})

<view>
    <block wx:for="{{names}}" wx:key="item">
        {{item}}
    </block>
</view>

或者先在js中连接好,放在data中,再显示在wxml中:

.wxml

代码语言:js复制
<view>
    {{content}}
</view>

.js

代码语言:js复制
Page({
   data: {
       content:"",
       names:[
           'Tom',
           'Peter',
           'Gray',
           'Lisa'
       ]
   },
   onLoad(options){
       let content = this.data.names.join(" ")
       this.setData({
           content
       })
   }
})

有了wxs后,我们可以直接在wxml完成:

.wxml

代码语言:js复制
<wxs module="util">
   var joinArray = function (array) {
       return array.join(' ')
   }
   module.exports = {
       joinArray: joinArray
   }
</wxs>
<view>
   {{util.joinArray(names)}}
</view>

或者将工具函数保存为单独的文件,通过引入来使用: /src/wxs/common.wxs

代码语言:js复制
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中:

代码语言:js复制
var MAX_COUNT = 19
module.exports = {
   MAX_COUNT: MAX_COUNT
}

总结:

WXS增强了wxml的功能,相当于页面中的脚本语言,我们可以将比如检查手机格式的函数放在wxs中来使用(根据是否正确来改变相应的样式),而不用跑到在js中去检查。

需要注意的地方:

wxs目前似乎并不支持ES6(至少let不能使用)

wxs文件不能被js文件引用。wxs文件能引用wxs文件。

参考: 微信小程序WXS官方文档

0 人点赞