字典表匹配数据，让你的微信小程序更高效

前言

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

实现效果

---

常规方法（不使用 wxs）

utils/convert.js 封装文件

function convertToChinese(value, type) {
    // 定义选项对象，从缓存中获取并解析
    const options = {
        ywmpList: JSON.parse(wx.getStorageSync('ywmpList')), // 获取并解析 ywmpList
        jxlbList: JSON.parse(wx.getStorageSync('jxlbList')), // 获取并解析 jxlbList
        rlzlList: JSON.parse(wx.getStorageSync('rlzlList')), // 获取并解析 rlzlList
        sblxList: JSON.parse(wx.getStorageSync('sblxList')) // 获取并解析 sblxList
    };

    // 根据传入的 type 获取对应的选项
    const selectedOptions = options[type];
    if (!selectedOptions) {
        return value;
    }

    // 遍历选项，查找匹配的值并返回对应的标签
    for (let i = 0; i < selectedOptions.length; i++) {
        if (selectedOptions[i].value === value) {
            return selectedOptions[i].label;
        }
    }

    // 如果没有匹配的选项，则返回原始值
    return value;
}

// 导出 convertToChinese 方法
module.exports = {
    convertToChinese: convertToChinese
}

app.js 全局引入

const convert = require('./utils/convert');//字典值转换
App({
	convert,
    //其它代码
})

任意使用文件

onLoad() {
    const fieldValue = "1"; // 模拟后台返回的 value 值
    const type = "ywmpList"; // 根据实际情况设置类型
    const chineseValue = app.convert.convertToChinese(fieldValue, type); // 调用方法并传值（value值,类型）
    console.log(chineseValue); // 输出转换后的中文值
},

控制台打印

---

拓展 ---- 字典值映射

未处理前

data 数据

data: {
    form: {
        dpfIs: "",
    },
    options: [{
            value: "25",
            label: "主动",
        },
        {
            value: "75",
            label: "被动",
        },
        {
            value: "95",
            label: "主被动结合",
        },
    ],
},

映射方法

// 定义一个函数，用于将数据从选项映射到 form 对象
mapDataOn(data, labelKey, valueKey, targetObj, targetKey) {
    // 在数据数组中根据 targetObj[targetKey] 的值查找匹配的目标值
    const targetValue = data.find(item => item[labelKey] === targetObj[targetKey]
);
    if (targetValue) {
        // 如果找到匹配的目标值，则使用对应的 valueKey 值更新 targetObj[targetKey]
        targetObj[targetKey] = targetValue[valueKey];
    }
},

调用方法

subnitOn(){
	this.mapData(this.data.dpfzsfsOptions, 'label', 'value', this.data.form, 'dpfIs');
    console.log(this.data.form);
}

以上代码实现了一个名为 mapData 的映射函数，根据 label 和 value 键将 options 数组映射到 form 对象。以下是实现思路的分解：

options 数组包含两个选项：“是” 和 “否”，每个选项都有对应的值 “0” 和 “1”。
form 对象有一个名为 dpfIs 的字段，初始为空。
mapData 函数接受五个参数：data（选项数组），labelKey（在选项数组中匹配的键），valueKey（从选项数组中获取值的键），targetObj（要更新的对象），targetKey（要更新的目标对象中的键）。
在 mapData 函数内部，它通过比较 labelKey 的值与 targetObj[targetKey] 的值来在 data 数组中查找目标值。
如果找到匹配的目标值，则使用对应的 valueKey 值更新 targetObj[targetKey]。
最后，调用 mapData 函数，将 options 数组、label 和 value 键、form 对象以及 dpfIs 键作为参数，执行映射操作。
这段代码的目的是根据选择的标签，将 options 数组中的对应的 value 值填充到 form.dpfIs 字段中。

实现效果

---

相关推荐

⭐ 掌握el-table的formatter方法，提升数据展示效果