微信小程序：新功能WXS解读（2017.08.30新增）

本文主要是介绍微信小程序：新功能WXS解读（2017.08.30新增），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意（来自官方文档）

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 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官方文档

这篇关于微信小程序：新功能WXS解读（2017.08.30新增）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---