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

發表時(shí)間：2021-4-30

發布人(rén)：融晨科技

浏覽次數：109

注意（來(lái)自官方文檔）

wxs 不(bù)依賴于(yú)運行時(shí)的(de)基礎庫版本，可以(yǐ)在(zài)所有版本的(de)小程序中運行。

wxs 與 javascript 是(shì)不(bù)同的(de)語言，有自己的(de)語法，并不(bù)和(hé / huò) javascript 一緻。

wxs 的(de)運行環境和(hé / huò)其他(tā) javascript 代碼是(shì)隔離的(de)，wxs 中不(bù)能調用其他(tā) javascript 文件中定義的(de)函數，也(yě)不(bù)能調用小程序提供的(de)API。

wxs 函數不(bù)能作爲(wéi / wèi)組件的(de)事件回調。

由于(yú)運行環境的(de)差異，在(zài) iOS 設備上(shàng)小程序内的(de) wxs 會比 javascript 代碼快 2 ~ 20 倍。在(zài) android 設備上(shàng)二者運行效率無差異。

舉個(gè)例子(zǐ)，在(zài)`wxs`出(chū)來(lái)之(zhī)前，如果我們要(yào / yāo)連接一個(gè)數組的(de)内容并顯示在(zài)`wxml`中，我們需要(yào / yāo)通過循環連接數組的(de)每一項：

.wxml

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

.js

Page({
    data: {
        names:[
            'Tom',
            'Peter',
            'Gray',
            'Lisa'
        ]
    },
})

或者先在(zài)js中連接好，放在(zài)data中，再顯示在(zài)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
        })
    }
})

有了(le／liǎo)wxs後，我們可以(yǐ)直接在(zài)wxml完成：

.wxml

<wxs module="util">
    var joinArray = function (array) {
        return array.join(' ')
    }
    module.exports = {
        joinArray: joinArray
    }
</wxs>
<view>
    {{util.joinArray(names)}}
</view>

或者将工具函數保存爲(wéi / wèi)單獨的(de)文件，通過引入來(lái)使用：
/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>

引入的(de)時(shí)候，wxs标簽src填寫相對路徑（絕對路徑無效），module指定名字。

我們也(yě)可以(yǐ)将頁面中的(de)一些常量放在(zài)wxs中:

var MAX_COUNT = 19
module.exports = {
    MAX_COUNT: MAX_COUNT
}

總結：

WXS增強了(le／liǎo)wxml的(de)功能，相當于(yú)頁面中的(de)腳本語言，我們可以(yǐ)将比如檢查手機格式的(de)函數放在(zài)wxs中來(lái)使用（根據是(shì)否正确來(lái)改變相應的(de)樣式），而(ér)不(bù)用跑到(dào)在(zài)js中去檢查。

需要(yào / yāo)注意的(de)地(dì / de)方：