一. 背景

1. 在小程序 wxml 中的數(shù)據(jù)渲染，可以通過雙花括號的形式，花括號里面只可以進(jìn)行簡單的算術(shù)運(yùn)算或者使用三元表達(dá)式：

    {{ count }} 
   
   <view> {{ count ? 1 : 0 }} view>
   復(fù)制代碼

2. 假如需要對綁定的數(shù)據(jù)進(jìn)行處理，在 wxml 進(jìn)行數(shù)據(jù)渲染的時候，類比于vue可以使用 methods 的方法或者使用 computed 來處理數(shù)據(jù)，但是 wxml 并不支持這種寫法。所以引入了 wxs 語法。

二. WXS語法

1.模塊

• wxs 代碼可以寫在 .wxs 文件內(nèi)或者 標(biāo)簽內(nèi)；

• 每一個 .wxs 文件內(nèi)或者 標(biāo)簽都是一個獨(dú)立的模塊；

• 一個模塊要想對外暴露其內(nèi)部的私有變量與函數(shù)，只能通過 module.exports 實(shí)現(xiàn)。

  重要：在 wxs 模塊中編寫js代碼，但它不同于js，變量只能使用 var 來定義。

2.使用標(biāo)簽形式：

在 wxml 文件里面直接使用wxs標(biāo)簽：

module="m1">  // -- module是wxs模塊的名稱，導(dǎo)出時候在m1對象里面
var msg = "hello world";

module.exports.message = msg;


<view> {{ m1.message }} view>
復(fù)制代碼

3. 使用 .wxs 文件形式：

在 example.wxs 文件中：

var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
復(fù)制代碼

在 wxml 文件中引入 .wxs 文件并使用：

module="m1" src=http://www.wxapp-union.com/"../example.wxs">  // -- src是引入路勁，只能是相對路徑

<view> {{ m1.getMax([1, 2, 3, 4, 5, 1, 2, 3, 4]) }} view>  // --  使用 wxs 模塊中的方法