微信小程序中WXS的使用方法

小編給大家分享一下微信小程序中WXS的使用方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

微信小程序支持管道過(guò)濾器 嗎？
用過(guò) angular 或者 vue 的同學(xué)都應(yīng)該會(huì)在項(xiàng)目里用到 filter，然而在小程序中是不支持的。但是也有一些解決辦法
但我只是關(guān)心 WXS 能不能實(shí)現(xiàn) filter 以及還能做什么？帶著這樣的疑問(wèn)，我重新看了一遍微信小程序官方的 WXS。

下面舉個(gè)簡(jiǎn)單的例子：

<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

上面的例子可以輸出 hello world 頁(yè)面，當(dāng)你閱讀完 官方文檔，會(huì)發(fā)現(xiàn)小程序的腳本語(yǔ)言的功能很捉鱉，比如只支持 es5 語(yǔ)法，不支持外部引入 js 等等。但是我仍然期待它未來(lái)支持更多的能力。

下面接入正題，探索文章題目的疑問(wèn)

一、用 WXS 實(shí)現(xiàn) filter

前端通常有一個(gè)需求，那就是把后臺(tái)傳過(guò)來(lái)的時(shí)間戳轉(zhuǎn)為不同規(guī)格的日期后顯示出來(lái)。以往的做法一般是用一個(gè)函數(shù)對(duì)數(shù)據(jù)進(jìn)行包裝，然后輸出到頁(yè)面。就像前面提到的那篇文章里面所說(shuō)的第一種方法一樣，但是有人考慮到性能問(wèn)題，認(rèn)為在js里面循環(huán)處理比較耗性能（這點(diǎn)我不做評(píng)價(jià)，畢竟自己沒(méi)有真正測(cè)試過(guò)）
關(guān)于日期格式化的例子在前面提到的文章已經(jīng)有了，在這里我再舉一個(gè)比較簡(jiǎn)單的例子。在我開(kāi)發(fā)過(guò)的項(xiàng)目里面，后臺(tái)返回的網(wǎng)路圖片地址通常是相對(duì)地址，也就是說(shuō)要把圖片顯示出來(lái)，還得加上配置好的域名前綴。而我通常是拿到數(shù)據(jù)后進(jìn)行遍歷操作，把需要前端展示的圖片加上前綴。但是有了 WXS，我們可以這樣做：

<wxs module="filter">
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image src="{{filter.getFullPath(url)}}"></image>

在上面這個(gè)例子中，可以看到整個(gè)過(guò)程基本類似于 vue 等框架自定義 filter 的做法。

二、 WXS 還能做什么

其實(shí)很多時(shí)候，我們并不了解 WXS 還能做更多條件渲染的一些東西。請(qǐng)看下面一個(gè)例子：

<wxs module="filter">
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暫時(shí)沒(méi)有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暫時(shí)沒(méi)有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '該專欄暫時(shí)沒(méi)有活動(dòng)';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '該專欄暫時(shí)沒(méi)有資訊';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '沒(méi)有相關(guān)的話題哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你還沒(méi)有發(fā)布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你還沒(méi)有發(fā)布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你還沒(méi)有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你還沒(méi)有報(bào)名任何活動(dòng)哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你還沒(méi)有收藏任何活動(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ù)功能幫我做條件判斷，拿到對(duì)應(yīng)的模板輸出，其功能就是一個(gè)空數(shù)據(jù)展示頁(yè)面?；蛟S你會(huì)問(wèn)這樣寫(xiě)的好處是什么？
那我可以告訴你，它很容易擴(kuò)展，比如新增一個(gè)頁(yè)面需要對(duì)應(yīng)的空數(shù)據(jù)模板，那么直接在 switch 語(yǔ)句中加多一個(gè) case 即可。況且如果把邏輯寫(xiě)在 WXML 上代碼會(huì)很復(fù)雜，不容易看懂。
明白了這一點(diǎn)，你會(huì)發(fā)現(xiàn)，只要是在 WXML 上需要做一些邏輯判斷的操作都可以 WXS 代替。
也就是說(shuō)，在開(kāi)發(fā)中，我們都可以用 WXS 的函數(shù)功能幫助我們清晰有效地處理 WXML 上渲染的一些視圖。

三、思考（引伸）

1、 對(duì)于需要做成 filter 形式的 WXS，最好把它寫(xiě)在一個(gè).wxs文件里，需要使用時(shí)，直接在對(duì)應(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";

<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2、 在 .wxs 模塊中引用其他 wxs 文件模塊，可以使用 require 函數(shù)，但是不能引用其他 js 文件模塊。

看完了這篇文章，相信你對(duì)“微信小程序中WXS的使用方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！