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

Posted 2022-11-21 水星记_

前言

一般来说，前端根据后台返回 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"
    ],
  ,
)

---

实现效果

---

当然，如果你对 vue 中的数据匹配感兴趣，也可以参考博主的另一篇文章 vue查询字典表匹配相应数据