微信小程序:新功能WXS解讀(2017.08.30新增) - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序:新功能WXS解讀(2017.08.30新增)

發表時間:2021-4-30

發布人:葵宇科技

浏覽次數:76


注意(來自官方文(wén)檔)

  1. wxs 不依賴于運行時的基礎庫版本,可(kě)以在所有版本的小程序中(zhōng)運行。
  2. wxs 與 javascript 是不同的語言,有自己的語法,并不和(hé) javascript 一緻。
  3. wxs 的運行環境和(hé)其他 javascript 代碼是隔離(lí)的,wxs 中(zhōng)不能調用其他 javascript 文(wén)件中(zhōng)定義的函數,也不能調用小程序提供的API。
  4. wxs 函數不能作為組件的事件回調。
  5. 由于運行環境的差異,在 iOS 設備上小程序内的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。
舉個(gè)例子(zǐ),在wxs出來之前,如(rú)果我們要連接一個(gè)數組的内容并顯示在wxml中(zhōng),我們需要通(tōng)過循環連接數組的每一項:

.wxml

  1. <view>
  2. <block wx:for="{{names}}" wx:key="item">
  3. {{item}}
  4. </block>
  5. </view>

.js

  1. Page({
  2. data: {
  3. names:[
  4. 'Tom',
  5. 'Peter',
  6. 'Gray',
  7. 'Lisa'
  8. ]
  9. },
  10. })

或者先在js中(zhōng)連接好,放在data中(zhōng),再顯示在wxml中(zhōng): 
.wxml

  1. <view>
  2. {{content}}
  3. </view>

.js

  1. Page({
  2. data: {
  3. content:"",
  4. names:[
  5. 'Tom',
  6. 'Peter',
  7. 'Gray',
  8. 'Lisa'
  9. ]
  10. },
  11. onLoad(options){
  12. let content = this.data.names.join(" ")
  13. this.setData({
  14. content
  15. })
  16. }
  17. })

有了wxs後,我們可(kě)以直接在wxml完成:

.wxml

  1. <wxs module="util">
  2. var joinArray = function (array) {
  3. return array.join(' ')
  4. }
  5. module.exports = {
  6. joinArray: joinArray
  7. }
  8. </wxs>
  9. <view>
  10. {{util.joinArray(names)}}
  11. </view>

或者将工具函數保存為單獨的文(wén)件,通(tōng)過引入來使用: 
/src/wxs/common.wxs

  1. var joinArray = function (array) {
  2. return array.join(' ')
  3. }
  4. module.exports = {
  5. joinArray: joinArray
  6. }

/pages/index/index.wxml

  1. <wxs src="../../src/wxs/common.wxs" module="util" />
  2. <view>
  3. {{util.joinArray(names)}}
  4. </view>

引入的時候,wxs标簽src填寫相對路(lù)徑(絕對路(lù)徑無效),module指定名字。

我們也可(kě)以将頁面中(zhōng)的一些常量放在wxs中(zhōng):

  1. var MAX_COUNT = 19
  2. module.exports = {
  3. MAX_COUNT: MAX_COUNT
  4. }

總結:

  • 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)檔



相關(guān)案例查看更多