您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序:新功能WXS解讀(2017.08.30新增)
發表時間:2021-4-30
發布人:葵宇科技
浏覽次數:76
注意(來自官方文(wén)檔)
- wxs 不依賴于運行時的基礎庫版本,可(kě)以在所有版本的小程序中(zhōng)運行。
- wxs 與 javascript 是不同的語言,有自己的語法,并不和(hé) javascript 一緻。
- wxs 的運行環境和(hé)其他 javascript 代碼是隔離(lí)的,wxs 中(zhōng)不能調用其他 javascript 文(wén)件中(zhōng)定義的函數,也不能調用小程序提供的API。
- wxs 函數不能作為組件的事件回調。
- 由于運行環境的差異,在 iOS 設備上小程序内的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。
舉個(gè)例子(zǐ),在wxs
出來之前,如(rú)果我們要連接一個(gè)數組的内容并顯示在wxml
中(zhōng),我們需要通(tōng)過循環連接數組的每一項:
.wxml
<view>
<block wx:for="{{names}}" wx:key="item">
{{item}}
</block>
</view>
.js
Page({
data: {
names:[
'Tom',
'Peter',
'Gray',
'Lisa'
]
},
})
或者先在js中(zhōng)連接好,放在data中(zhōng),再顯示在wxml中(zhōng):
.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後,我們可(kě)以直接在wxml完成:
.wxml
<wxs module="util">
var joinArray = function (array) {
return array.join(' ')
}
module.exports = {
joinArray: joinArray
}
</wxs>
<view>
{{util.joinArray(names)}}
</view>
或者将工具函數保存為單獨的文(wén)件,通(tōng)過引入來使用:
/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填寫相對路(lù)徑(絕對路(lù)徑無效),module指定名字。
我們也可(kě)以将頁面中(zhōng)的一些常量放在wxs中(zhōng):
var MAX_COUNT = 19
module.exports = {
MAX_COUNT: MAX_COUNT
}
總結:
-
WXS
增強了wxml
的功能,相當于頁面中(zhōng)的腳本語言,我們可(kě)以将比如(rú)檢查手機格式的函數放在wxs
中(zhōng)來使用(根據是否正确來改變相應的樣式),而不用跑到在js
中(zhōng)去檢查。
需要注意的地方:
-
wxs
目前似乎并不支持ES6
(至少(shǎo)let
不能使用) -
wxs
文(wén)件不能被js
文(wén)件引用。wxs
文(wén)件能引用wxs
文(wén)件。
參考:
微信小程序WXS官方文(wén)檔