当前位置: 首页 > news >正文

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

前言

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


实现思路

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

    首先,我们需要初始化两个对象,一个是原始对象 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});}}
});

实现效果

在这里插入图片描述

相关文章:

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

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

Redis的GEO结构

GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。常见的命令有&#xff1a; GEOADD&#xff1a;添加一个地理空间信息&#xff0c;包含&#xff1a;经度…...

做UI设计师是否需要美术功底?

UI确实需要一定的手绘能力&#xff0c;但是跟画画是有很大不同的。 很多人问&#xff1a;学UI需不需要手绘能力。或者学UI需要什么绘画基础。 所以今天集体回答一下。 我们先来看一下跟绘画有关系的行业&#xff1a; 漫画&#xff1a; 主要的不是绘画能力&#xff0c;更重…...

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 开发环境配置【保姆级】

物联网开发学习笔记——目录索引 参考官网&#xff1a;Arduino - Home Arduino是一款简单易学且功能丰富的开源平台&#xff0c;包含硬件部分&#xff08;各种型号的Arduino开发板&#xff09;和软件部分&#xff08;Arduino IDE)以及广大爱好者和专业人员共同搭建和维护的互联…...

【LeetCode 算法专题突破】双指针(⭐)

文章目录 前言1. 移动零题目描述代码 2. 复写零题目描述代码 3. 快乐数题目描述代码 4. 盛最多水的容器题目描述代码 5. 有效三角形的个数题目描述代码 6. 三数之和题目描述代码 7. 四数之和题目描述代码 总结 前言 学算法入门必学的一个章节&#xff0c;双指针算法&#xff0…...

ts知识点——基础积累

第一章 快速入门 1、TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。TS完全兼容JS&#xff0c;换言之&#xff0c;…...

mybatis plus MetaObjectHandler 不生效

首先要知道,spring boot 只会加载启动类同级和下级的bean 如果把bean放在启动类不同的上级目录,是加载不了bean的 如果把mybatisplus的配置文件放在与启动类不同包,就会扫描不到 例如放在这里,就扫描不到 放到这里,就可以扫描到...

力扣第216 组合总和 ||| c++ 回溯 + 注释

题目 216. 组合总和 III 中等 相关标签 数组 回溯 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺…...

深度学习系列51:hugging face加速库optimum

1. 普通模型 Optimum是huggingface transformers库的一个扩展包&#xff0c;用来提升模型在指定硬件上的训练和推理性能。Optimum支持多种硬件&#xff0c;不同硬件下的安卓方式如下&#xff1a; 如果是国内安装的话&#xff0c;记得加上-i https://pypi.tuna.tsinghua.edu.c…...

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.6 定时器事件

本章要实现的整体效果如下&#xff1a; QT 中使用定时器&#xff0c;有两种方式&#xff1a; 定时器类&#xff1a;QTimer定时器事件&#xff1a;QEvent::Timer&#xff0c;对应的子类是 QTimerEvent 本节通过一个案例&#xff0c;同时讲解这两种方式 案例&#xff1a;当点击…...

阿里云服务器ECS实例规格族c/g/r等字母说明

阿里云服务器ECS实例命名规则&#xff1a;ecs.<规格族>.large字母含义命名说明&#xff0c;包括x86、ARM架构、GPU异构计算、弹性裸金属、超级计算集群SCC云服务器&#xff0c;c代表计算型、g代表通用型、r代表内存型、u代表通用算力型、e代表经济型e实例&#xff0c;阿里…...

Everything和SVN结合使用-在Everything中显示SVN

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…...

代码随想录算法训练营第五十二天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

今日学习的文章链接和视频链接 123.买卖股票的最佳时机III 视频讲解&#xff1a;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输入的是文件就处理文件 是文件夹&#x1f4c1;就处理文件。路径下的图片 1. 是处理本路径图片 …...

JQuery、JSON、AJAX、XML、IO流、多线程、反射核心知识点详解

JQuery 一、什么是JQuery JQuery是JavaScript的一个框架&#xff0c;对js的封装&#xff0c;使得js简单易学 优点&#xff1a; 1、不用考虑浏览器兼容性问题 2、jquery拥有强大的选择器&#xff0c;简化了js代码 3、jquery提供了很多系统函数&#xff0c;直接调用 二、版本 1.x…...

基于python的多种图像增强算法实现

基于python的多种图像增强算法实现 引言工具算法增强对比度直方图均衡化锐化图像噪声消除中值滤波均值滤波高斯滤波双边滤波增强对比度直方图均衡化总结全部资源引用引言 本项目使用python实现多种空域增强的图像增强算法,并使用了pyqt编写页面。通过点击不同页面的多种按钮,…...

Java前后端交互实现班级管理(查询)

1&#xff0c;数据库创建存储专业信息的表 2&#xff0c;后端&#xff1a; 连接数据库工具类DBUtil.java&#xff1a; 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篇&#xff0c;Management Science文章4篇期刊文章&#xff0c;着眼于各种不同场景下对于风险的预测、量化及管理&#xff0c;通过聚焦于风险这一主题&#xff0c;体系化地形成文章精选。 文章1 Computation of…...

DataBinding使用报错

val dataBinding DataBindingUtil.setContentView<ActivityMainBinding>(this,R.layout.activity_main)报错一&#xff1a; Unresolved reference: ActivityMainBinding 首先你要知道一个概念&#xff0c;ActivityMainBinding是DataBinding中的一种视频绑定&#xff…...

ESLyric歌词源一站式配置:Foobar2000多平台格式转换高效解决方案

ESLyric歌词源一站式配置&#xff1a;Foobar2000多平台格式转换高效解决方案 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource ESLyric歌词源是Foobar2000播…...

Ubuntu常用的命令

ls -l # 输出当前文件夹下的所有文件的权限大小信息 ls -l 文件名 # 输出当前文件的权限大小信息 du -sh # 查看文件夹下所有文件的大小总和 df -h # 查看当前文件系统各分区的大小 hdparm -Tt /dev/sda1 # 查看分区磁盘的速度 ls -l | grep "^-" | wc -l # 当前目…...

vLLM-v0.17.1效果展示:vLLM支持MoE模型(如Mixtral)推理实测

vLLM-v0.17.1效果展示&#xff1a;vLLM支持MoE模型&#xff08;如Mixtral&#xff09;推理实测 1. vLLM框架核心能力 vLLM是一个专注于大语言模型推理的高性能服务库&#xff0c;最新发布的v0.17.1版本带来了对MoE&#xff08;混合专家&#xff09;架构模型的全面支持。这个最…...

大数据在电力行业的应用案例解析 -【电力技术】(一)—— 基于电力大客户运营的大数据落地拓展

目录 一、电力大客户运营场景与大数据价值 二、大数据平台架构(大客户运营专用) 三、落地应用案例一:电力大客户价值分群与精准画像 1. 业务目标 2. 数据宽表(工程常用) 3. 核心算法:K-Means 用户分群(简化示例代码) 4. 应用效果 四、落地应用案例二:大客户负荷…...

【STM32F4系列】【HAL库】【实战解析】MPU6050 DMP姿态解算与I2C通信优化

1. MPU6050与DMP库基础解析 第一次接触MPU6050时&#xff0c;我被它小巧的体积和强大的功能震撼到了。这个售价不到10元的芯片&#xff0c;居然能同时测量三轴角加速度和三轴线加速度。在实际项目中&#xff0c;我发现直接读取原始数据并不难&#xff0c;但要想获得稳定的姿态信…...

OpenClaw自动化办公:nanobot镜像处理Excel与PPT文件

OpenClaw自动化办公&#xff1a;nanobot镜像处理Excel与PPT文件 1. 为什么选择OpenClaw处理办公文档&#xff1f; 上周五下午5点&#xff0c;当我面对第7个需要合并的Excel报表时&#xff0c;手指已经因为重复的复制粘贴动作开始发麻。作为团队里负责月度数据汇总的"表哥…...

OpenClaw浏览器自动化:nanobot镜像实现定时抢购与价格监控

OpenClaw浏览器自动化&#xff1a;nanobot镜像实现定时抢购与价格监控 1. 为什么选择OpenClaw实现浏览器自动化 去年双十一期间&#xff0c;我为了抢购某款显卡&#xff0c;连续三天凌晨守着电脑刷新页面&#xff0c;结果还是错过了补货。这种经历让我开始寻找自动化解决方案…...

CTF信息收集入门:从BUUCTF‘粗心的小李’题目看Git泄露的常见利用方式

CTF信息收集实战&#xff1a;Git泄露漏洞的深度利用与防御策略 在CTF竞赛的Web安全赛道上&#xff0c;信息收集能力往往决定着解题的成败。当新手面对看似空白的网页时&#xff0c;常会陷入无从下手的困境——这正是"粗心的小李"这类题目的设计初衷。不同于常规的SQL…...

陀螺匠企业助手-产品

1. 功能说明维护出售产品的基本信息数据&#xff0c;支持在添加商机/合同中进行选择。2. 进入产品页面路径&#xff1a;客户>产品管理>产品3. 新增产品功能说明&#xff1a;维护产品信息&#xff0c;添加完成的产品信息&#xff0c;可以在添加商机/合同中进行选择。新增产…...

2026 工程指南:为什么 AWS Bedrock + Claude 4.6 正在成为多 Agent 协作的底层首选?

进入 2026 年第一季度&#xff0c;大模型领域的竞争已经从“单纯的参数规模”转向了“端到端的工程效率”。随着 GPT-5.4 陷入推理成本高企的泥潭&#xff0c;Anthropic 联手亚马逊发布的 Claude 4.6 托管方案&#xff0c;正在通过 Amazon Bedrock 平台迅速收割企业级市场。作为…...