小程序模板網(wǎng)

微信小程序 WXS 實(shí)現(xiàn)各大前端框架中的 filter

發(fā)布時(shí)間:2018-05-29 10:54 所屬欄目:小程序開發(fā)教程

最近有在做小程序開發(fā),在開發(fā)的過程中碰到一點(diǎn)小問題,描述一下先。

本人在職的公司對(duì)于后臺(tái)獲取的 json 數(shù)據(jù)需要做過濾轉(zhuǎn)義的很多,不同的狀態(tài)碼會(huì)對(duì)應(yīng)不同的文字,但是在微信小程序中又沒有類似 vue 中的 | 方法進(jìn)行快速的過濾,看了前人的代碼大都是用數(shù)據(jù)遍歷洗數(shù)據(jù)來實(shí)現(xiàn)的,說實(shí)話,很麻煩,即使提取了公共方法那也麻煩,總之要洗數(shù)據(jù)就麻煩(對(duì),我就是這么懶,懶人推動(dòng)世界發(fā)展 =3=)

在翻看小程序的文檔的時(shí)候,正好看到了 WXS 的介紹 官方文檔 一拍腦門,這不就成了么?

正文

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;

可以看到我們對(duì)外暴露變量的時(shí)候用的是 module.exports,在 wxs 文件中只能使用該方法 官方文檔 同樣,在引入其他模塊的時(shí)候,只能使用 require。

接著,創(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ī)硪恍┬碌乃伎?,我正是這么期待著。


本文地址:http://22321a.com/wxmini/doc/course/24464.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢