微信小程序:新功能WXS解讀(2017.08.30新增)
發表時間:2021-4-30
發布人:葵宇科技
瀏覽次數:76
注意(來自官方文檔)
- 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官方文檔