国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序 WXS 不了解一下？騷騷的實(shí)現(xiàn)各大前端框架中的 filter

琛ｈ。 / 2897人閱讀

摘要：前言最近有在做小程序開發(fā)，在開發(fā)的過(guò)程中碰到一點(diǎn)小問(wèn)題，描述一下先。介紹是小程序出的一套腳本語(yǔ)言，用于模板文件中，在模板文件中可以完成頁(yè)面的結(jié)構(gòu)。不依賴于運(yùn)行時(shí)的基礎(chǔ)庫(kù)腳本，可以在所有版本的小程序中運(yùn)行。

前言

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

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

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

正文 WXS 為何物

在上代碼之前先簡(jiǎn)單的介紹一下 WXS 是什么，以及和 javascript 有什么區(qū)別，雖然官方文檔中都有，但我認(rèn)為博客的存在意義就是盡量減少看官們的頁(yè)面跳轉(zhuǎn)，能夠在一個(gè)頁(yè)面說(shuō)明的問(wèn)題就不要再跳轉(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 是無(wú)效的，就是說(shuō)如果 WXS 代碼包裹在未渲染的代碼中，只要渲染的 wxml 部分調(diào)用了此模塊，此段 WXS 代碼依然會(huì)被加載。

由于運(yùn)行環(huán)境的差異，在 ios 設(shè)備上小程序的 WXS 會(huì)比 javascript 快 2~20 倍，在 android 設(shè)備上運(yùn)行效率無(wú)異。

模塊想要暴露自己的私有變量和方法，只能通過(guò) module.exports 實(shí)現(xiàn)。

若在模塊中想要引用其他模塊，只能通過(guò) require 實(shí)現(xiàn)。

只能使用 var 來(lái)定義變量，表現(xiàn)形式和 javascript 一樣，會(huì)有變量提升。

WXS 模塊只能在定義模塊的 wxml 文件中被訪問(wèn)到，使用 或 時(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ì)外暴露一些過(guò)濾的方法。

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)行過(guò)濾處理的 wxml 頁(yè)面上引入這個(gè)模塊，使用即可。


{{filter._filterOrderType(item.type)}}
{{filter._filterTimestamp(item.time)}}

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

結(jié)語(yǔ)

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

本文可以隨意轉(zhuǎn)載，只要附上原文地址即可。

如果您認(rèn)為我的博文對(duì)您有所幫助，請(qǐng)不吝贊賞，點(diǎn)贊也是讓我動(dòng)力滿滿的手段 =3=。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95323.html

相關(guān)文章

  • 微信小程序 使用filter過(guò)濾器幾種方式

    摘要：與之間通過(guò)橋協(xié)議通信包括調(diào)用指令和各種事件，涉及消息序列化跨線程通信與。一個(gè)小程序可以有多個(gè)，頁(yè)面間切換動(dòng)畫比更流暢。業(yè)務(wù)無(wú)法直接控制。 showImg(http://upload-images.jianshu.io/upload_images/326507-e81e06b2cb7187e9.jpeg?imageMogr2/auto-orient/strip%7CimageView2/...

    godruoyi 評(píng)論0 收藏0

  • 微信小程序初體驗(yàn)，入門練手項(xiàng)目--通訊錄，后臺(tái)是阿里云服務(wù)器

    摘要：最近微信小程序異常火爆，很多人在學(xué)習(xí)，下面帶著大家搭建下微信小程序的調(diào)試環(huán)境，并調(diào)試入門練手項(xiàng)目通訊錄和基礎(chǔ)即可微信推薦使用的語(yǔ)言，去菜鳥教程簡(jiǎn)單學(xué)習(xí)下，，，即可，方便大家學(xué)習(xí)。 一、前言（坑爹的玩意） 項(xiàng)目源碼：https://github.com/saucxs/wx_... 微信小程序自從2017年，被各種看好，不過(guò)一段時(shí)間過(guò)去了還是反響平平，下半年隨著各項(xiàng)功能的開放，很多企業(yè)...

    kel 評(píng)論0 收藏0

  • 小程序開發(fā)坑點(diǎn)總結(jié)

    摘要：整個(gè)小程序所有分包大小不超過(guò)單個(gè)分包主包大小不能超過(guò)微信小程序主流框架對(duì)比應(yīng)該算是最早發(fā)布的小程序開發(fā)框架，提供了類的語(yǔ)法風(fēng)格和特性，現(xiàn)階段應(yīng)該也是應(yīng)用最廣泛的框架吧。不過(guò)微信官方為了防止下載離線包的時(shí)間過(guò)程，也嚴(yán)格限制了小程序包的體積。 那些年我們踩過(guò)的坑css樣式不能引用本地圖片資源，只能引用線上資源(background-image)，引用本地圖片資源只能用標(biāo)簽。{{}}不能執(zhí)行...

    lowett 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    pumpkin9 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<