微信小程序腳本語言 WXS 怎麼用

這是微信小程序踩坑系列的第二篇，想要了解更多關於微信小程序開發的那些事，歡迎關注個人《微信小程序》專欄。

---

前言

前幾天有個同窗問我 微信小程序支持管道過濾器 嗎？ 用過 angular 或者 vue 的同窗都應該會在項目裏用到 filter，然而在小程序中是不支持的。可是也有一些解決辦法，有一篇文章講得還算不錯，我在這裏貼一下 微信小程序 使用filter過濾器幾種方式 。 但我只是關心 WXS 能不能實現 filter 以及還能作什麼？帶着這樣的疑問，我從新看了一遍微信小程序官方的 WXS。

下面舉個簡單的例子：

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

上面的例子能夠輸出 hello world 頁面，當你閱讀完 官方文檔，會發現小程序的腳本語言的功能很捉鱉，好比只支持 es5 語法，不支持外部引入 js 等等。可是我仍然期待它將來支持更多的能力。

下面接入正題，探索文章題目的疑問

1、用 WXS 實現 filter

前端一般有一個需求，那就是把後臺傳過來的時間戳轉爲不一樣規格的日期後顯示出來。以往的作法通常是用一個函數對數據進行包裝，而後輸出到頁面。就像前面提到的那篇文章裏面所說的第一種方法同樣，可是有人考慮到性能問題，認爲在js裏面循環處理比較耗性能（這點我不作評價，畢竟本身沒有真正測試過） 關於日期格式化的例子在前面提到的文章已經有了，在這裏我再舉一個比較簡單的例子。在我開發過的項目裏面，後臺返回的網路圖片地址一般是相對地址，也就是說要把圖片顯示出來，還得加上配置好的域名前綴。而我一般是拿到數據後進行遍歷操做，把須要前端展現的圖片加上前綴。可是有了 WXS，咱們能夠這樣作：

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

在上面這個例子中，能夠看到整個過程基本相似於 vue 等框架自定義 filter 的作法。

2、 WXS 還能作什麼

其實不少時候，咱們並不瞭解 WXS 還能作更多條件渲染的一些東西。請看下面一個例子：

<wxs module="filter">
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暫時沒有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暫時沒有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '該專欄暫時沒有活動';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '該專欄暫時沒有資訊';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '沒有相關的話題哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你尚未發佈任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你尚未發佈任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你尚未收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你尚未報名任何活動哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你尚未收藏任何活動哦';
        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 的函數功能幫我作條件判斷，拿到對應的模板輸出，其功能就是一個空數據展現頁面。或許你會問這樣寫的好處是什麼？ 那我能夠告訴你，它很容易擴展，好比新增一個頁面須要對應的空數據模板，那麼直接在 switch 語句中加多一個 case 便可。何況若是把邏輯寫在 WXML 上代碼會很複雜，不容易看懂。 明白了這一點，你會發現，只要是在 WXML 上須要作一些邏輯判斷的操做均可以 WXS 代替。 也就是說，在開發中，咱們均可以用 WXS 的函數功能幫助咱們清晰有效地處理 WXML 上渲染的一些視圖。

3、思考（引申）

一、 對於須要作成 filter 形式的 WXS，最好把它寫在一個.wxs文件裏，須要使用時，直接在對應 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>
複製代碼

二、 在 .wxs 模塊中引用其餘 wxs 文件模塊，可使用 require 函數，可是不能引用其餘 js 文件模塊。

4、參考連接

• WXS·小程序

（完）

本文做者 Thinker

本文若有錯誤之處，請留言，我會及時更正

以爲對您有幫助的話就點個贊或收藏吧！

歡迎轉載或分享，轉載時請註明出處

閱讀原文