微信小程序引入wxs文件,根據後臺返回數值前端展示不同的文字或顏色.

如圖所示，當後臺返回的狀態status 爲 0,1 ，2，3 時。前端展示爲圖上所示，使用微信的wxs文件的方法將使其變得更加簡便

新建一個wxs文件，例如

function status(id) {
  var statusJson = {};
  var x = "";
  var y = "";

  switch (id) {
    case 0:
      x = "塞紅包";
      y = "#EB5F39";
      break;
    case 1:
      x = "進行中";
      y = "#1AAD19";
      break;
    case 2:
      x = "已結束";
      y = "#B2B2B2";
      break;
    case 3:
      x = "待支付";
      y = "#EB5F39";
      break;
    case 4:
      x = "未搶完,已退回";
      y = "#B2B2B2";
      break;
  }
  statusJson.x = x;
  statusJson.y = y;
  return statusJson;
}

在wxs文件裏面封裝一個函數，通過後臺返回的數值，return 不同的 文字以及顏色色號

一個模塊要想對外暴露其內部的私有變量與函數，只能通過 module.exports 實現。

module.exports = {
    status: status
}

然後在wxml裏面引入

<wxs src='../../utils/filter.wxs' module='filters' />
<text class='status' style='color:{{filters.status(item.status).y}}'>{{filters.status(item.status).x}}</text>

參數一一對應即可