天天看點
傳回

微信小程式：新功能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

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

.js

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

或者先在js中連接配接好，放在data中，再顯示在wxml中： 

.wxml

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

.js

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

有了wxs後，我們可以直接在wxml完成：

.wxml

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

或者将工具函數儲存為單獨的檔案，通過引入來使用： 

/src/wxs/common.wxs

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

/pages/index/index.wxml

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

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

我們也可以将頁面中的一些常量放在wxs中:

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

總結：

  • WXS

     增強了

    wxml

     的功能，相當于頁面中的腳本語言，我們可以将比如檢查手機格式的函數放在

    wxs

     中來使用（根據是否正确來改變相應的樣式），而不用跑到在

    js

     中去檢查。

需要注意的地方：

  • wxs

     目前似乎并不支援

    ES6

     （至少

    let

     不能使用）

  • wxs

     檔案不能被

    js

     檔案引用。

    wxs

     檔案能引用

    wxs

     檔案。

參考：

微信小程式WXS官方文檔

微信小程式 WXS
上一篇: 程序間通訊(七).socket（1）前言概要
下一篇: 程序間通訊(七).socket（2）

繼續閱讀