微信小程序通过字典表匹配对应数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序通过字典表匹配对应数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

一般来说，前端根据后台返回 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 字段中。