微信小程式WXS怎麼使用

這篇文章帶給大家的內容是關於微信小程式WXS怎麼使用，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前幾天有同學問我 微信小程式支援管道過濾器 嗎？
用過 angular 或 vue 的同學都應該會在專案裡用到 filter，然而在小程式中是不支持的。但也有一些解決方法
但我只是關心 WXS 能不能實現 filter 以及還能做什麼？帶著這樣的疑問，我重新看了一遍微信小程式官方的 WXS。

下面舉個簡單的例子：

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

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

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

一、用WXS 實作filter

前端通常有一個需求，那就是把後台傳過來的時間戳轉為不同規格的日期後顯示出來。以往的做法一般是用一個函數將資料包裝，然後輸出到頁面。就像前面提到的那篇文章裡面所說的第一種方法一樣，但是有人考慮到效能問題，認為在js裡面循環處理比較耗性能（這點我不做評價，畢竟自己沒有真正測試過）
關於日期格式化的例子在前面提到的文章已經有了，在這裡我再舉一個比較簡單的例子。在我開發過的專案裡面，後台回傳的網路圖片位址通常是相對位址，也就是說要把圖片顯示出來，還要加上設定好的網域前綴。而我通常是拿到資料後進行遍歷操作，把需要前端展示的圖片加上前綴。但有了 WXS，我們可以這樣做：

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

在上面這個例子中，可以看到整個過程基本上類似於 vue 等框架自訂 filter 的做法。

二、 WXS 還能做什麼

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

<wxs>
  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>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

上例中，我使用了 WXS 的函數功能幫我做條件判斷，拿到對應的範本輸出，其功能就是一個空資料展示頁。或許你會問這樣寫的好處是什麼？
那我可以告訴你，它很容易擴展，例如新增一個頁面需要對應的空資料模板，那麼直接在 switch 語句中加多一個 case 即可。況且如果把邏輯寫在 WXML 上程式碼會很複雜，不容易看懂。
明白了這一點，你會發現，只要是在 WXML 上需要做一些邏輯判斷的操作都可以 WXS 取代。
也就是說，在開發中，我們都可以用 WXS 的函數功能幫助我們清晰有效地處理 WXML 上渲染的一些視圖。

三、思考（引伸）

1、 對於需要做成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></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2、 在 .wxs 模組中引用其他 wxs 檔案模組，可以使用 require 函數，但不能引用其他 js 檔案模組。

本文參考：微信小程式開發基礎教學 https://www.html.cn/study/20.html

#

以上是微信小程式WXS怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！