正文

WXS 為何物

在上代碼之前先簡單的介紹一下 WXS 是什么，以及和 javascript 有什么區別，雖然官方文檔中都有，但我認為博客的存在意義就是盡量減少看官們的頁面跳轉，能夠在一個頁面說明的問題就不要再跳轉，外鏈應該作為課后拓展的手段。

• WXS 介紹

  • 是小程序出的一套腳本語言，用于 wxml 模板文件中，在模板文件中可以完成頁面的結構。
  • 不依賴于運行時的基礎庫腳本，可以在所有版本的小程序中運行。
  • WXS 中不能調用 javascript 中定義的函數或者變量，也不能調用小程序提供的 API，他的運行環境和 javascript 是隔離的。
  • 小程序的條件渲染和循環渲染對 WXS 是無效的，就是說如果 WXS 代碼包裹在未渲染的代碼中，只要渲染的 wxml部分調用了此模塊，此段 WXS 代碼依然會被加載。
  • 由于運行環境的差異，在 ios 設備上小程序的 WXS 會比 javascript 快 2~20 倍，在 android 設備上運行效率無異。
  • 模塊想要暴露自己的私有變量和方法，只能通過 module.exports 實現。
  • 若在模塊中想要引用其他模塊，只能通過 require 實現。
  • 只能使用 var 來定義變量，表現形式和 javascript 一樣，會有變量提升。
  • WXS 模塊只能在定義模塊的 wxml 文件中被訪問到，使用 <include> 或 <import> 時，WXS 模塊不會被引入到對應的 wxml 文件中。
  • 不能使用 new Date() 應該使用 getDate()。

正確的使用 WXS

上代碼

首先，新建一個 config.wxs 文件，用于存儲狀態碼對應轉義后的文字。

var orderType = {
  "-1": "type one",
  "0": "type two",
  "1": "type three"
};
module.exports.orderType = orderType;

接著，創建一個 index.wxs 文件，用于對外暴露一些過濾的方法。

var config = require("./config.wxs");

function _filterOrderType(value) {
  return config.orderType[value.toString()] || "order type undefined"
}
// 時間戳轉換成 yyyy-MM-dd HH:mm:ss
function _filterTimestamp(value) {
  // 有些特殊 不能使用 new Date()
  var time = getDate(value);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var date = time.getDate() < 10;
  var hour = time.getHours() < 10;
  var minute = time.getMinutes() < 10;
  var second = time.getSeconds() < 10;
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

module.exports._filterOrderType = _filterOrderType;
module.exports._filterTimestamp = _filterTimestamp;

最后在我們需要進行過濾處理的 wxml 頁面上引入這個模塊，使用即可。

<wxs src="../filter/index.wxs" module="filter" />
<view>{{filter._filterOrderType(item.type)}}</view>
<view>{{filter._filterTimestamp(item.time)}}</view>

這里需要注意一下，在 wxml 頁面上使用模塊的時候，需要用一個 module="filter" 或者其他的命名來包裹。

結語

WXS 和 javascript 雖然類似，但是還是有一些不同的地方，如果在 debug 的時候發現報錯了，可以在底下回復或者直接私信我，雖然不能秒回，但是多一個人多一條思路，也許我能給您提供一些別的思路，或者您的問題會給我帶來一些新的思考，我正是這么期待著。