微信小程序通过字典表匹配对应数据

前言

一般来说，前端根据后台返回 code 码展示对应内容只需要在前台判断 code 值展示对应的内容即可，但要是匹配的 code 码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过 wxs 的方法实现这个操作。

为什么要使用 wxs？

{{method(a,b)}}

可以看到，上述代码是一个调用方法传值的操作，在 vue 中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用 if 判断实现呢？但是 if 判断的局限性在于如果存在数据量过大时，大量重复性操作和 if 判断会让你的代码显得异常冗余。

wxs

wxs 相当于是一个独立模块，通过独立出来的一个 module 对象，利用 module.exports 向外暴露，在使用文件中引入即可。其主要解决了微信小程序中 {{method(a,b)}} 方法传值不触发的问题，避免了多次 if 判断，利于代码的优化，提高了代码的复用性和后期可维护性。简单来说， wxs 就是可以在 wxml 里面使用 js ，从而对数据进行计算转换。

wxs 的使用

上面我们说到，wxs 多用于微信小程序页面调用方法传值不触发的问题，下面我们就用一个简单的小实例来展示在代码中 wxs 的具体用法。

external/index.wxs 封装的公共文件代码

通过全局封装的形式以达到在每一个 wxml 文件中都可以调用。

var qxCode = function (optionsQx, dqbm) {
    var targetItem = {};
    //非空判断是为了避免循环的数组为null而产生报错
    if (optionsQx) {
        //通过区县编码过滤获取所属对象
        for (var i = 0; i < optionsQx.length; i++) {
            var code = optionsQx[i].regionCode
            if (code == dqbm) {
                targetItem = optionsQx[i]
            }
        }
    }
    // 有数据时正常展示数据反之展示 “--”
    return targetItem.regionName ? targetItem.regionName : '--'
}
// 将方法抛出
module.exports = {
    qxCode: qxCode,
};

wxml 文件代码

在 wxml 文件中用到时，通过 <wxs src="路径" module="方法" /> 的方式引入调用。

<!-- 引入封装文件 -->
<wxs src="../external/index.wxs" module="onitceModel" />
<view class="dataListBox" wx:for="{{dataList}}" wx:key="index">
    <view>
        <text class="lableBox">企业名称</text>
        <text>{{item.qymc}}</text>
    </view>
    <view>
        <text class="lableBox">所属区县</text>
        <text>{{onitceModel.qxCode(optionsQx,item.dqbm)}}</text>
    </view>
</view>

js 文件代码

借助 js 中模拟的假数据以还原在真实使用场景下的操作。

Page({
  data: {
    // 模拟字典表数据
    optionsQx: [
      {regionCode: "610101",regionName: "市辖区"},
      {regionCode: "610102",regionName: "新城区"},
      {regionCode: "610103",regionName: "碑林区"}, 
      {regionCode: "610104",regionName: "莲湖区"}, 
      {regionCode: "610111",regionName: "灞桥区"}, 
      {regionCode: "610112",regionName: "未央区"},
      {regionCode: "610113",regionName: "雁塔区"},
      {regionCode: "610114",regionName: "阎良区"},
      {regionCode: "610115",regionName: "临潼区"},
      {regionCode: "610116",regionName: "长安区"},
      {regionCode: "610122",regionName: "蓝田县"},
      {regionCode: "610124",regionName: "周至县"},
      {regionCode: "610125",regionName: "户县"},
      {regionCode: "610126",regionName: "高陵县"}
    ],
    // 模拟列表数据
    dataList: [
      {qymc: "测试数据111",dqbm: "610104"}, 
      {qymc: "测试数据222",dqbm: ""},
      {qymc: "测试数据333",dqbm: "610112"}
    ],
  },
})