正文

WXS 為何物

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

• WXS 介紹

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

正確的使用 WXS

上代碼

首先，新建一個(gè) config.wxs 文件，用于存儲(chǔ)狀態(tài)碼對(duì)應(yīng)轉(zhuǎn)義后的文字。

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

接著，創(chuàng)建一個(gè) index.wxs 文件，用于對(duì)外暴露一些過濾的方法。

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

function _filterOrderType(value) {
  return config.orderType[value.toString()] || "order type undefined"
}
// 時(shí)間戳轉(zhuǎn)換成 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;

最后在我們需要進(jìn)行過濾處理的 wxml 頁(yè)面上引入這個(gè)模塊，使用即可。

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

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

結(jié)語(yǔ)

WXS 和 javascript 雖然類似，但是還是有一些不同的地方，如果在 debug 的時(shí)候發(fā)現(xiàn)報(bào)錯(cuò)了，可以在底下回復(fù)或者直接私信我，雖然不能秒回，但是多一個(gè)人多一條思路，也許我能給您提供一些別的思路，或者您的問題會(huì)給我?guī)硪恍┬碌乃伎?，我正是這么期待著。