微信小程序wxs的使用

wxs简单来说，就是封装可以使用在wxml中的变量和函数，通过module.exports对外暴露。
wxs其实就是起到了处理了数据的功能，能很好地解决后台返回数据和你界面实现有偏差的问题，这样就不用一直叨扰后台同学改数据格式了，也解决了wxml中不能调用函数的痛处。

简单示例：

1. 新建tool.wxs

var tool = {
  //在wxml中想让一个类似 "小明,小李,小红" 通过数组来实现显示(字符串变数组)
  splitString: function(str, key) {
    key = key ? key : ",";
    if (str) {
      return str.split(key);
    }
    return [];
  },

  //在wxml中想让一个类似 ['小明','小李','小红'] 显示成 "小明,小李,小红"(数组变字符串)
  joinArr: function(arr, key) {
    key = key ? key : ",";
    if (arr && arr.length > 0) {
      return arr.join(key);
    }
    return "";
  },
}

module.exports = {
  splitString: tool.splitString,
  joinArr: tool.joinArr
}

2. 在wxml中导入

<wxs module="tool" src='../../../utils/tool.wxs'></wxs>

3. 在wxml中使用方法

   
   item.label.png

<view class='tag'>
  <text wx:for="{{tool.splitString(item.label,',')}}" wx:for-item="tag">{{tag}}</text>
</view>

splitString效果.png

---

nameList.png

<input class='inputClass' placeholder-class='color9' value='{{tool.joinArr(nameList,"、")}}' 
       placeholder='请选择活动项目' bindtap='choosePro' disabled></input>

joinArr效果.png

以前不用wxs，用了就还想用，逃不过的真香定律~

微信官方WXS文档