微信小程序引入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>

参数一一对应即可