一、什么是WXS？

1.1 WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

官方：WXS 與 JavaScript 是不同的語言，有自己的語言，并不和 JavaScript 一致。(不過基本一致)
WXS中目前只能使用ES5，ES6的使用會報錯

1.2 為什么要設計WXS語言？

1.2.1 在WXML中是不能直接調(diào)用Page/Component中定義函數(shù)的; (雙線程模式)

<!-- 在vue中可以直接調(diào)用函數(shù) 但是在小程序中這樣調(diào)用是沒用的(以前這樣調(diào)用會報錯，現(xiàn)在不會報錯但是沒有任何結果顯示) -->
<view>結果：{{formatCount(value)}}</view>

但是某些情況下，我們希望使用函數(shù)來處理WXML中WXML中的數(shù)據(jù)(類似于Vue中的過濾器)，這個時候就可以使用WXS了

1.3 WXS使用的限制和特點：

• WXS 不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行；
• WXS 的運行環(huán)境和其他 JavaScript 代碼是隔離的，WXS中不能調(diào)用其他JavaScript文件中定義的函數(shù)，也不能調(diào)用小程序提供的API；
• 由于運行環(huán)境的差異，在IOS設備上小程序內(nèi)的WXS會比JavaScript代碼快 2～20 倍，在android設備上二者運行效率無差異；

二、WXS的寫法

2.1 WXS有兩種寫法：

• 寫在<wxs>標簽中
• 寫在以.wxs結尾的文件中

2.2 <wxs>標簽的屬性：

2.3 每一個.wxs文件和 <wxs> 標簽都是一個單獨的模塊。(一個wxml文件中可以引入多個wxs"module不能重復")

• 每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數(shù)，默認為私有的，對其他模塊不可見；
• 一個模塊想要對外暴露起內(nèi)部的私有變量，只能通過 module.exports實現(xiàn)；

三、WXS簡單案例

• 傳入一個數(shù)字(整數(shù)或小數(shù))，格式化后進行展示(例如36456，展示結果3.6萬)

• 傳入一個時間(秒)，格式化后進行展示(例如100秒，展示結果為01:40)

  
  

• wxml

<wxs module="format" src="/utils/format.wxs"></wxs>
<block>
  <view>傳入一個數(shù)字(整數(shù)或小數(shù))，格式化后進行展示(例如36456，展示結果3.6萬)</view>
  <view>結果：{{format.formatCount(value)}}</view>
  <input type="number" model:value="{{value}}" class="my-input" />
</block>
<block>
  <view>傳入一個時間(秒)，格式化后進行展示(例如100秒，展示結果為01:40)</view>
  <view>結果：{{format.formatDuration(value1)}}</view>
  <input type="number" model:value="{{value1}}" class="my-input" />
</block>

• wxs

function formatCount(count) {
  var patrn = getRegExp('(^[0-9]*\.([0-9]{1}\d*)$)|(^[0-9]*$)')
  if (!patrn.test(count)) return count ? "格式錯誤" : "";
  var count = +count;

  if (count > 100000000) {
    return (count / 100000000).toFixed(1) + "億"
  } else if (count > 10000) {
    return (count / 10000).toFixed(1) + "萬"
  }
  
  return count
}

function disposeTime(time) {
  return time < 10 ? "0" + time : time
}

function formatDuration(duration) {
  var patrn = getRegExp('(^[0-9]*$)');
  if (!patrn.test(duration)) return "格式錯誤";
  var isHours = duration >= 3600;

  if (isHours) {
    var hours = disposeTime(Math.floor(duration / 3600));
    duration = duration - hours * 3600;
  }
  var minutes = disposeTime(Math.floor(duration / 60));
  var seconds = disposeTime(duration % 60);

  return (isHours ? (hours + ":") : "") + minutes + ":" + seconds;
}

module.exports = {
  formatCount: formatCount,
  formatDuration: formatDuration
}

四、WXS中使用正則表達式

直接使用會報錯 var patrn = /'(^[0-9]*$)'/;

• 注意 使用getRegExp時里面不要帶/?。。?！
• 錯誤 getRegExp('/(^[0-9]*$)/');
• 正確 getRegExp('(^[0-9]*$)');