微信小程序开发实战：利用差异对比显示对象属性变化

前言

在小程序开发中，经常会遇到需要比较两个对象之间的差异并将这些差异可视化展示在界面上的情况。这一过程对于数据管理和用户反馈至关重要。本文将介绍一种实用的方法，可以帮助开发者高效地比较两个对象的属性差异，并将这些差异以直观的方式展示出来。

---

实现思路

• 初始化对象和差异存储：

  首先，我们需要初始化两个对象，一个是原始对象 form，另一个是要对比的对象 dateObj。同时，初始化一个差异存储对象 differences 和一个标识 hasDifferences，用于记录是否有不同项。

• 遍历属性：

  通过遍历两个对象的属性，比较它们的值。如果发现不同的属性，将差异信息存储在 differences 对象中，并将 hasDifferences 标识设为 true。

• 界面展示差异：

  在小程序的界面中，我们可以使用条件渲染来展示不同的属性。可以根据差异信息为不同的属性添加样式，使其在界面上以不同的颜色显示。

• 用户反馈：

  最后，我们可以添加一个按钮或触发器，以便用户在需要时查看差异信息。当用户点击按钮时，我们可以显示一个提示框，列出所有不同的属性及其差异值，以便用户清晰地了解数据的变化情况。

---

代码实例

wxml 文件

<view>
    <view>
        <text>标题：</text>
        <text>{{form.title}}</text>
    </view>
    <view>
        <text style="{{differences.name ? 'color: red;' : ''}}">姓名：</text>
        <text wx:if="{{differences.name}}">
            <text style="color: black;">{{form.name}}</text>
            <text style="color: red;">({{differences.name.formValue}} or {{differences.name.dateObjValue}})</text>
        </text>
        <text wx:else>{{form.name}}</text>
    </view>
    <view>
        <text style="{{differences.age ? 'color: red;' : ''}}">年龄：</text>
        <text wx:if="{{differences.age}}">
            <text style="color: black;">{{form.age}}</text>
            <text style="color: red;">({{differences.age.formValue}} or {{differences.age.dateObjValue}})</text>
        </text>
        <text wx:else>{{form.age}}</text>
    </view>
    <view>
        <text style="{{differences.number ? 'color: red;' : ''}}">数量：</text>
        <text wx:if="{{differences.number}}">
            <text style="color: black;">{{form.number}}</text>
            <text style="color: red;">({{differences.number.formValue}} or {{differences.number.dateObjValue}})</text>
        </text>
        <text wx:else>{{form.number}}</text>
    </view>
    <view>
        <text style="{{differences.address ? 'color: red;' : ''}}">地址：</text>
        <text wx:if="{{differences.address}}">
            <text style="color: black;">{{form.address}}</text>
            <text style="color: red;">({{differences.address.formValue}} or {{differences.address.dateObjValue}})</text>
        </text>
        <text wx:else>{{form.address}}</text>
    </view>
</view>
<!-- 在页面底部显示轻提示 -->
<view>
    <button bindtap="showDiffPrompt">显示不一样的项</button>
</view>

js 文件

Page({
  data: {
    // 原始对象
    form: {
      title: "demo15",
      name: "小红",
      age: "18",
      number: "23",
      address: "上海",
    },
    // 要对比的对象
    dateObj: {
      name: "小红",
      age: "20",
      number: "23",
      address: "北京",
    },
    differences: {}, // 存储不同的属性
    hasDifferences: false, // 标识是否有不同项
    titleColor: '', // 标题颜色
    fieldNames: { // 字段中英文名字到中文名字的映射
      title: "字段1中文名",
      name: "姓名",
      age: "年龄",
      number: "数量",
      address: "地址",
    },
  },

  onLoad() {
    // 获取页面实例对象
    const that = this;
    // 获取表单数据和日期对象
    const form = that.data.form;
    const dateObj = that.data.dateObj;
    // 初始化差异存储对象和差异标识
    const differences = {};
    let hasDifferences = false;

    // 遍历表单数据
    for (const key in form) {
      if (form.hasOwnProperty(key) && dateObj.hasOwnProperty(key)) {
        // 检查是否有差异
        if (form[key] !== dateObj[key]) {
          differences[key] = {
            formValue: form[key],
            dateObjValue: dateObj[key]
          };
          // 如果有不同的项，设置标识为true
          hasDifferences = true;
        }
      }
    }

    // 设置标题颜色，如果有不同的项则变红
    const titleColor = hasDifferences ? 'color: red;' : '';

    // 更新页面数据
    that.setData({
      differences: differences,
      hasDifferences: hasDifferences, // 设置标识变量的值
      titleColor: titleColor // 设置标题颜色
    });
  },

  showDiffPrompt: function () {
    // 打印是否有差异的标识
    console.log(this.data.hasDifferences);
    // 获取差异对象
    const differences = this.data.differences;
    const promptText = [];

    // 遍历差异对象，构建提示文本
    for (const key in differences) {
      if (differences.hasOwnProperty(key)) {
        // 获取字段名，优先使用中文名字或者英文名字
        const fieldName = this.data.fieldNames[key] || key;
        // 获取表单值和日期对象值
        const formValue = differences[key].formValue;
        const dateObjValue = differences[key].dateObjValue;
        // 构建提示文本
        promptText.push(`${fieldName} (${formValue} or ${dateObjValue})`);
      }
    }

    // 显示轻提示
    if (promptText.length > 0) {
      wx.showToast({
        title: `以下项不一样：${promptText.join('、')}`,
        icon: 'none',
        duration: 2000
      });
    } else {
      wx.showToast({
        title: '所有项都一样',
        icon: 'none',
        duration: 2000
      });
    }
  }
});

---

实现效果

---

相关推荐

⭐ element中el-table根据状态改变样式，你不能错过的技能
⭐ 对比两个el-table，差异数据突显标记