【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序中WXS的使用方法

【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序中WXS的使用方法

在下給大家分享一下微信小程序中WXS的使用方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！微信小程序支持管道過濾器嗎？用過angular或者vue的同學(xué)都應(yīng)該會在項(xiàng)目里用到filter，然而在小程序中是不支持的。但是也有一些解決辦法但我只是關(guān)心WXS能不能實(shí)現(xiàn)filter以及還能做什么？帶著這樣的疑問，我重新看了一遍微信小程序官方的WXS。下面舉個(gè)簡單的例子：<wxs

module="m1">var

msg

=

"hello

world";

module.exports.message

=

msg;</wxs>

<view>{{m1.message}}</view>上面的例子可以輸出helloworld頁面，當(dāng)你閱讀完官方文檔，會發(fā)現(xiàn)小程序的腳本語言的功能很捉鱉，比如只支持es5語法，不支持外部引入js等等。但是我仍然期待它未來支持更多的能力。下面接入正題，探索文章題目的疑問一、用WXS實(shí)現(xiàn)filter前端通常有一個(gè)需求，那就是把后臺傳過來的時(shí)間戳轉(zhuǎn)為不同規(guī)格的日期后顯示出來。以往的做法一般是用一個(gè)函數(shù)對數(shù)據(jù)進(jìn)行包裝，然后輸出到頁面。就像前面提到的那篇文章里面所說的第一種方法一樣，但是有人考慮到性能問題，認(rèn)為在js里面循環(huán)處理比較耗性能（這點(diǎn)我不做評價(jià)，畢竟自己沒有真正測試過）關(guān)于日期格式化的例子在前面提到的文章已經(jīng)有了，在這里我再舉一個(gè)比較簡單的例子。在我開發(fā)過的項(xiàng)目里面，后臺返回的網(wǎng)路圖片地址通常是相對地址，也就是說要把圖片顯示出來，還得加上配置好的域名前綴。而我通常是拿到數(shù)據(jù)后進(jìn)行遍歷操作，把需要前端展示的圖片加上前綴。但是有了WXS，我們可以這樣做：<wxs

module="filter">

function

getFullPath(url)

{

return

""

+

url

}

module.exports.getFullPath

=

getFullPath

</wxs>

<image

src="{{filter.getFullPath(url)}}"></image>在上面這個(gè)例子中，可以看到整個(gè)過程基本類似于vue等框架自定義filter的做法。二、WXS還能做什么其實(shí)很多時(shí)候，我們并不了解WXS還能做更多條件渲染的一些東西。請看下面一個(gè)例子：<wxs

module="filter">

function

getData(entry,

type)

{

var

imgUrl

=

'';

var

content

=

'';

switch

(entry)

{

case

'needs':

imgUrl

=

'/images/goods_empty.png';

content

=

'暫時(shí)沒有需求';

break;

case

'goods':

imgUrl

=

'/images/goods_empty.png';

content

=

'暫時(shí)沒有商品';

break;

case

'activity':

imgUrl

=

'/images/activity_empty.png';

content

=

'該專欄暫時(shí)沒有活動(dòng)';

break;

case

'channel':

imgUrl

=

'/images/article_empty.png';

content

=

'該專欄暫時(shí)沒有資訊';

break;

case

'micro-circle':

imgUrl

=

'/images/article_empty.png';

content

=

'沒有相關(guān)的話題哦';

break;

case

'needs-release':

imgUrl

=

'/images/goods_release_empty.png';

content

=

'你還沒有發(fā)布任何需求哦';

break;

case

'goods-release':

imgUrl

=

'/images/goods_release_empty.png';

content

=

'你還沒有發(fā)布任何商品哦';

break;

case

'goods-collection':

imgUrl

=

'/images/goods_collect_empty.png';

content

=

'你還沒有收藏任何商品哦';

break;

case

'apply':

imgUrl

=

'/images/activity_apply_empty.png';

content

=

'你還沒有報(bào)名任何活動(dòng)哦';

break;

case

'activity-collection':

imgUrl

=

'/images/activity_collect_empty.png';

content

=

'你還沒有收藏任何活動(dòng)哦';

break;

default:

break;

}

if

(type

===

'image')

{

return

imgUrl;

}

else

{

return

content;

}

}

module.exports.getData

=

getData;

</wxs>

<template

name="nodata">

<view

class="no-data">

<image

src="{{filter.getData(entry,

'image')}}"

class="no-data-icon"></image>

<view

class="no-data-text">{{filter.getData(entry,

'content')}}</view>

</view>

</template>上例中，我使用了WXS的函數(shù)功能幫我做條件判斷，拿到對應(yīng)的模板輸出，其功能就是一個(gè)空數(shù)據(jù)展示頁面。或許你會問這樣寫的好處是什么？那我可以告訴你，它很容易擴(kuò)展，比如新增一個(gè)頁面需要對應(yīng)的空數(shù)據(jù)模板，那么直接在switch語句中加多一個(gè)case即可。況且如果把邏輯寫在WXML上代碼會很復(fù)雜，不容易看懂。明白了這一點(diǎn)，你會發(fā)現(xiàn)，只要是在WXML上需要做一些邏輯判斷的操作都可以WXS代替。也就是說，在開發(fā)中，我們都可以用WXS的函數(shù)功能幫助我們清晰有效地處理WXML上渲染的一些視圖。三、思考（引伸）1、對于需要做成filter形式的WXS，最好把它寫在一個(gè).wxs文件里，需要使用時(shí)，直接在對應(yīng)WXML上引用即可。var

foo

=

"'hello

world'

from

tools.wxs";

var

bar

=

function

(d)

{

return

d;

}

module.exports

=

{

FOO:

foo,

bar:

bar,

};

module.exports.msg

=

"some

msg