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

导读:本篇文章讲解 微信小程序通过字典表匹配对应数据,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

前言

一般来说,前端根据后台返回 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查询字典表匹配相应数据

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/79348.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!