微信小程序开发实战:利用差异对比显示对象属性变化
前言
在小程序开发中,经常会遇到需要比较两个对象之间的差异并将这些差异可视化展示在界面上的情况。这一过程对于数据管理和用户反馈至关重要。本文将介绍一种实用的方法,可以帮助开发者高效地比较两个对象的属性差异,并将这些差异以直观的方式展示出来。
实现思路
-
初始化对象和差异存储:
首先,我们需要初始化两个对象,一个是原始对象
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]};// 如果有不同的项,设置标识为truehasDifferences = 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});}}
});
实现效果

相关文章:
微信小程序开发实战:利用差异对比显示对象属性变化
前言 在小程序开发中,经常会遇到需要比较两个对象之间的差异并将这些差异可视化展示在界面上的情况。这一过程对于数据管理和用户反馈至关重要。本文将介绍一种实用的方法,可以帮助开发者高效地比较两个对象的属性差异,并将这些差异以直观的方…...
Redis的GEO结构
GEO就是Geolocation的简写形式,代表地理坐标。Redis在3.2版本中加入了对GEO的支持,允许存储地理坐标信息,帮助我们根据经纬度来检索数据。常见的命令有: GEOADD:添加一个地理空间信息,包含:经度…...
做UI设计师是否需要美术功底?
UI确实需要一定的手绘能力,但是跟画画是有很大不同的。 很多人问:学UI需不需要手绘能力。或者学UI需要什么绘画基础。 所以今天集体回答一下。 我们先来看一下跟绘画有关系的行业: 漫画: 主要的不是绘画能力,更重…...
python txt or 日志等超大文本文件读取
判断文件路径是否存在 要判断一个路径文件是否存在,可以使用Python的os.path模块中的exists()函数。下面是一个示例: import os# 要检查的文件路径 file_path = "path/to/file.txt"# 使用os.path.exists()函数判断文件是否存在 if os.path.exists(file_path):pri…...
Windows:Arduino IDE 开发环境配置【保姆级】
物联网开发学习笔记——目录索引 参考官网:Arduino - Home Arduino是一款简单易学且功能丰富的开源平台,包含硬件部分(各种型号的Arduino开发板)和软件部分(Arduino IDE)以及广大爱好者和专业人员共同搭建和维护的互联…...
【LeetCode 算法专题突破】双指针(⭐)
文章目录 前言1. 移动零题目描述代码 2. 复写零题目描述代码 3. 快乐数题目描述代码 4. 盛最多水的容器题目描述代码 5. 有效三角形的个数题目描述代码 6. 三数之和题目描述代码 7. 四数之和题目描述代码 总结 前言 学算法入门必学的一个章节,双指针算法࿰…...
ts知识点——基础积累
第一章 快速入门 1、TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,…...
mybatis plus MetaObjectHandler 不生效
首先要知道,spring boot 只会加载启动类同级和下级的bean 如果把bean放在启动类不同的上级目录,是加载不了bean的 如果把mybatisplus的配置文件放在与启动类不同包,就会扫描不到 例如放在这里,就扫描不到 放到这里,就可以扫描到...
力扣第216 组合总和 ||| c++ 回溯 + 注释
题目 216. 组合总和 III 中等 相关标签 数组 回溯 找出所有相加之和为 n 的 k 个数的组合,且满足下列条件: 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次,组合可以以任何顺…...
深度学习系列51:hugging face加速库optimum
1. 普通模型 Optimum是huggingface transformers库的一个扩展包,用来提升模型在指定硬件上的训练和推理性能。Optimum支持多种硬件,不同硬件下的安卓方式如下: 如果是国内安装的话,记得加上-i https://pypi.tuna.tsinghua.edu.c…...
【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.6 定时器事件
本章要实现的整体效果如下: QT 中使用定时器,有两种方式: 定时器类:QTimer定时器事件:QEvent::Timer,对应的子类是 QTimerEvent 本节通过一个案例,同时讲解这两种方式 案例:当点击…...
阿里云服务器ECS实例规格族c/g/r等字母说明
阿里云服务器ECS实例命名规则:ecs.<规格族>.large字母含义命名说明,包括x86、ARM架构、GPU异构计算、弹性裸金属、超级计算集群SCC云服务器,c代表计算型、g代表通用型、r代表内存型、u代表通用算力型、e代表经济型e实例,阿里…...
Everything和SVN结合使用-在Everything中显示SVN
点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享&…...
代码随想录算法训练营第五十二天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV
今日学习的文章链接和视频链接 123.买卖股票的最佳时机III 视频讲解:https://www.bilibili.com/video/BV1WG411K7AR https://programmercarl.com/0123.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A%84%E6%9C%80%E4%BD%B3%E6%97%B6%E6%9C%BAIII.html 188.买卖股票的…...
②. GPT错误:图片尺寸写入excel权限错误
꧂问题最初 ꧁ input输入图片路径 print图片尺寸 大小 长宽高 有颜色占比>0.001的按照大小排序将打印信息存储excel表格文件名 表格路径 图片大小 尺寸 颜色类型 占比信息input输入的是文件就处理文件 是文件夹📁就处理文件。路径下的图片 1. 是处理本路径图片 …...
JQuery、JSON、AJAX、XML、IO流、多线程、反射核心知识点详解
JQuery 一、什么是JQuery JQuery是JavaScript的一个框架,对js的封装,使得js简单易学 优点: 1、不用考虑浏览器兼容性问题 2、jquery拥有强大的选择器,简化了js代码 3、jquery提供了很多系统函数,直接调用 二、版本 1.x…...
基于python的多种图像增强算法实现
基于python的多种图像增强算法实现 引言工具算法增强对比度直方图均衡化锐化图像噪声消除中值滤波均值滤波高斯滤波双边滤波增强对比度直方图均衡化总结全部资源引用引言 本项目使用python实现多种空域增强的图像增强算法,并使用了pyqt编写页面。通过点击不同页面的多种按钮,…...
Java前后端交互实现班级管理(查询)
1,数据库创建存储专业信息的表 2,后端: 连接数据库工具类DBUtil.java: package com.ffyc.webserver.util;import java.sql.*;public class DButils {static {try {Class.forName("com.mysql.cj.jdbc.Driver");} catch…...
论文速递 | 8月下旬9月上旬Operations ResearchManagement Science文章精选
编者按 本期我们选取了8月下旬及9月上旬Operations Research文章2篇,Management Science文章4篇期刊文章,着眼于各种不同场景下对于风险的预测、量化及管理,通过聚焦于风险这一主题,体系化地形成文章精选。 文章1 Computation of…...
DataBinding使用报错
val dataBinding DataBindingUtil.setContentView<ActivityMainBinding>(this,R.layout.activity_main)报错一: Unresolved reference: ActivityMainBinding 首先你要知道一个概念,ActivityMainBinding是DataBinding中的一种视频绑定ÿ…...
Java开发必备:高德、百度、WGS84坐标互转实战(附完整代码)
Java开发实战:高德、百度与WGS84坐标系互转解决方案 当你需要在不同地图服务之间切换时,坐标系的差异往往会成为开发中的痛点。想象一下这样的场景:你的应用同时接入了高德地图和百度地图,用户上传的GPS数据却无法在两个平台上准确…...
vue3-composition-admin TypeScript最佳实践:类型安全与开发效率的完美平衡
vue3-composition-admin TypeScript最佳实践:类型安全与开发效率的完美平衡 【免费下载链接】vue3-composition-admin 🎉 基于vue3 的管理端模板(Vue3 TS Vuex4 element-plus vue-i18n-next composition-api) vue3-admin vue3-ts-admin 项目地址: http…...
OBS多平台直播插件:3步搞定全网同步推流,让内容覆盖提升300%
OBS多平台直播插件:3步搞定全网同步推流,让内容覆盖提升300% 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 还在为每次直播只能选择一个平台而烦恼吗࿱…...
Qwen3.5-27B-GPTQ-Int4:超高效多模态AI新体验
Qwen3.5-27B-GPTQ-Int4:超高效多模态AI新体验 【免费下载链接】Qwen3.5-27B-GPTQ-Int4 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3.5-27B-GPTQ-Int4 导语 阿里云推出Qwen3.5-27B-GPTQ-Int4模型,通过4位量化技术实现性能与效率的双…...
汽车线控转向系统动力学法Carsim和Simulink联合仿真
✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室👇 关注我领取海量matlab电子书和…...
ArcGIS模型构建器实战:一键加载上百个SHP文件(含子文件夹),告别手动拖拽
ArcGIS模型构建器实战:一键加载上百个SHP文件(含子文件夹),告别手动拖拽 当你的硬盘里散落着数百个SHP文件,它们像秋天的落叶一样分布在几十层子文件夹中时,传统的手动拖拽加载方式简直是一场噩梦。上周我接…...
新手必看:Carsim与Simulink联合仿真搭建AEB系统的5个关键步骤
从零搭建AEB系统:Carsim与Simulink联合仿真实战指南 在自动驾驶技术快速发展的今天,自动紧急制动系统(AEB)已成为车辆安全领域的重要研究方向。对于车辆工程专业的学生和自动驾驶初学者而言,掌握Carsim与Simulink的联合…...
Cursor Pro功能解锁指南:突破限制的完整技术方案
Cursor Pro功能解锁指南:突破限制的完整技术方案 【免费下载链接】cursor-free-vip [Support 0.45](Multi Language 多语言)自动注册 Cursor Ai ,自动重置机器ID , 免费升级使用Pro 功能: Youve reached your trial re…...
CTF信息收集入门:从BUUCTF‘粗心的小李’题目看Git泄露的常见利用方式
CTF信息收集实战:Git泄露漏洞的深度利用与防御策略 在CTF竞赛的Web安全赛道上,信息收集能力往往决定着解题的成败。当新手面对看似空白的网页时,常会陷入无从下手的困境——这正是"粗心的小李"这类题目的设计初衷。不同于常规的SQL…...
LeetCodehot100-2 两数相加
class Solution { public:ListNode* addTwoNumbers(ListNode* l1, ListNode* l2) {if (l1 nullptr) return l2;if (l2 nullptr) return l1;ListNode* head l1; // 保存头节点ListNode* prev nullptr; // 记录上一个节点,用于连接int carry 0;// 同时遍历…...
