热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

开发微信小程序,我为什么只使用upData

微信小程序开发教程栏目今天为大家介绍在开发微信小程序,我为什么只使用upData,一起开心来讨论吧。

鉴于在下使用微信小程序开发时使用 setData 的蹩脚体验,开发了个库函数 wx-updata,项目上线之后,我把这个自用的库函数整理放到 Github 上开源出来 wx-updata,这个库函数在开发的时候对我很有帮助,希望也可以帮到大家

如果大家在使用中遇到了问题,可以给我提 pr,提 issue,一起来改善小程序开发体验~

  • wx-updata 版本 0.0.10

  • Github 地址: github.com/SHERlocked9…

  • 小程序代码片段预览地址: developers.weixin.qq.com/s/CcXdO1mc7…

  • 小程序代码片段代码地址: github.com/SHERlocked9…

1. setData 不方便的地方

你在使用 setData 的时候,是不是有时候觉得很难受,举个简单的例子:

// 你的 datadata: {    name: '蜡笔小新',    info: { height: 140, color: '黄色' }
}

如果要修改 info.height 为 155,使用 setData 要怎么做呢:

// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象,修改后整个 setDataconst { info } = this.data
info.height = 155this.setData({ info })

似乎并不太复杂,但如果 data 是个很大的对象,要把比较深且不同的对象、数组项挨个改变:

data: {    name: '蜡笔小新',    info: {        height: 140, color: '黄色',        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

比如某个需求,需要把 info.height 改为 155,同时改变 info.desc 数组的第 0 项的 age 为 12,第 3 项的 color 为灰色呢?

// 先取出要改变的对象,改变数字后 setData 回去const { info } = this.data
info.height = 155info.desc[0].age = 12info.desc[3].color = '灰色'this.setData({ info })// 或者像某些文章里介绍的,这样可读性差,也不太实用this.setData({    'info.height': 155,    'info.desc[0].age': 12,    'info.desc[3].color': '灰色'})

上面这两种方法,是我们平常小程序里经常用的,和其他 Web 端的框架相比,就很蹩脚,一种浓浓的半成品感扑面而来,有没有这样一个方法:

this.upData({    info: {        height: 155,        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

这个方法会帮我们深度改变嵌套对象里对应的属性值,跳过数组项里不想改变的,只设置我们提供了的属性值、数组项,岂不是省略了一大堆蹩脚的代码,而且可读性也极佳呢。

这就是为什么我在上线的项目中使用 wx-updata,而不是 setData

wx-updata 的原理其实很简单,举个例子:

this.upData({    info: {        height: 155,        desc: [{ age: 12 }]
    }
})// 会被自动转化为下面这种格式,// this.setData({//    'info.height': 155,//    'info.desc[0].age': 12,// })

原来这个转化工作是要我们自己手动来做,现在 wx-updata 帮我们做了,岂不美哉!

下面介绍一下 wx-updata 的优点和主要使用方法~

2. wx-updata 的优点

  1. 支持 setData 对象自动合并,不用写蹩脚的对象路径了
  2. 支持对象中嵌套数组,数组中嵌套对象;
  3. 如果数组的某个值你不希望覆盖,请使用数组空位来跳过这个数组项,比如 [1,,3] 这个数组中间就是数组空位;
  4. 如果数组空位你的 Eslint 报错,可以使用 wx-updata 提供的 Empty 来代替: [1, Empty, 3]
  5. 如果数组空位你不习惯,或者不乐意数逗号个数,可以试试数组的对象路径方式 [1,,3] -> {'[0]': 1, '[2]': 3}

3. wx-updata 安装

你也可以直接把 dist 目录下的 wx-updata.js 拷贝到项目里使用

使用 npmyarn 安装方式:

$ npm i -S wx-updata# or$ yarn add wx-updata

然后:

  1. 把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;
  2. 点击微信开发者工具面板工具栏的 工具 - 构建npm

构建后成功生成 miniprogram_npm 文件夹就可以正常使用了

4. wx-updata 使用方法

使用方式一

可以使用直接挂载到 Page 上的方式,这样就可以在 Page 实例中像使用 setData 一样使用 upData

// app.jsimport { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})
// 页面代码中this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [, , [, , , { color: '灰色' }]]
})

使用方式二

有的框架可能在 Page 对象上进行了进一步修改,直接替换 Page 的方式可能就不太好了,wx-updata 同样暴露了工具方法,用户可以在页面代码中直接使用工具方法进行处理:

// 页面代码中import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径Page({    data: { a: { b: 2}, c: [3,4,5]},    // 自己封装一下
    upData(data) {        return this.setData(objToPath(data))
    },    // 你的方法中或生命周期函数
    yourMethod() {        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

使用 Empty 代替数组空位

可以使用 wx-updata 提供的 Empty 来代替数组空位,由于 Empty 本质上是一个 Symbol,所以只能使用 wx-updata 导出的,而不能自己新建。

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色' }]]
})

数组的对象路径方式

如果数组空位你不习惯,或者不乐意数逗号个数,可以试试数组的对象路径方式,需要传递 config 的配置 {arrObjPath: true}

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'// 原来的方式this.upData({    info: { height: 155 },    desc: [, '靓仔'],    family: [, , [, , , { color: '灰色' }]]
})// 使用数组路径方式this.upData({    info: { height: 155 },    desc: {'[1]': '靓仔'},    family: { '[2]': { '[3]': { color: '灰色' }
})

5. wx-updata 相关 API

Page.prototype.upData(Object data, Function callback)

  1. data: 你希望设置的 data
  2. callback: 跟 setData 第二个参数一样,引起界面更新渲染完毕后的回调函数

updataInit(Page, config)

  1. Page: 页面对象,需要在 app.js 中调用;
  2. config 配置
    • 配置参数 { debug: true },会将路径化后的 data 打印出来,帮助用户进行调试,默认 false 不开启;
    • 配置参数 { arrObjPath: true },会开启数组的对象路径方式功能,默认 false 不开启;

objToPath(Object data, Object config)

  1. data: 你希望设置的 data 对象
  2. config 配置
    • 配置参数 { arrObjPath: true },会开启数组的对象路径方式功能,默认 false 不开启;

更多相关免费学习推荐:微信小程序开发

以上就是开发微信小程序,我为什么只使用 upData的详细内容,更多请关注其它相关文章!


推荐阅读
  • STAR: 转录组数据分析中的高效比对工具介绍
    欢迎关注“生信修炼手册”!STAR 是一款专为 RNA-seq 数据设计的高效比对工具,以其卓越的速度和高灵敏度著称。该软件在处理大规模转录组数据时表现出色,能够显著提高比对效率和准确性。此外,GATK 推荐使用 STAR 进行预处理步骤,以确保后续分析的可靠性。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 在 Vue 3 项目中使用 ElementPlus 的 Icon 组件时,遇到了 SVG 图标无法正常显示的问题。经过查阅官方文档和 GitHub 讨论,最终发现是由于图标路径配置不正确导致的。通过调整图标路径和引入方式,成功解决了这一问题,并确保了图标能够正确加载和显示。此外,还对项目依赖进行了更新,以兼容最新的 ElementPlus 版本。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 在微信小程序中,页面的加载机制与传统应用类似,每次打开新页面时都会创建一个新的视图对象并进行叠加。当用户点击返回按钮时,当前页面会被关闭并从堆栈中移除。这一过程涉及页面管理与资源释放,确保了用户体验的流畅性和系统的稳定性。微信小程序支持同时打开的页面数量有限制,最多可同时保持10个页面的打开状态,以避免内存溢出和性能下降。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 2019年后蚂蚁集团与拼多多面试经验详述与深度剖析
    2019年后蚂蚁集团与拼多多面试经验详述与深度剖析 ... [详细]
  • 优化Node.js项目:有效管理和清理依赖项
    在Node.js项目中,有效管理和清理依赖项是提升性能和安全性的重要步骤。为了确保项目中仅保留必要的库,应定期检查并移除`node_modules`目录下不再使用的包。同时,所有必需的依赖项都应在`package.json`文件中明确列出,以保证项目的可维护性和可复现性。此外,利用如`npm prune`等工具可以帮助自动化这一过程,进一步提高效率。 ... [详细]
  • 修复一个 Bug 竟耗时两天?真的有那么复杂吗?
    修复一个 Bug 竟然耗费了两天时间?这背后究竟隐藏着怎样的复杂性?本文将深入探讨这个看似简单的 Bug 为何会如此棘手,从代码层面剖析问题根源,并分享解决过程中遇到的技术挑战和心得。 ... [详细]
  • 本章节深入探讨了 Webpack 命令的高级功能,涵盖了官方快速入门教程中未涉及的细节。通过实际操作和案例分析,对官方文档进行了详细解读与补充,帮助读者更好地理解和应用这些进阶技巧。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
author-avatar
青锋寒万岁
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有