游戏迷提供最新游戏下载和手游攻略!

打造微信小程序,upData助力项目高效推进

发布时间:2024-10-20浏览:30

大家好,关于打造微信小程序,upData助力项目高效推进很多朋友都还不太明白,今天小编就来为大家分享关于的知识,希望对各位有所帮助!

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

  • wx-updata 版本 0.0.10
  • Github 地址: https://github.com/SHERlocked...
  • 小程序代码片段预览地址: https://developers.weixin.qq....
  • 小程序代码片段代码地址: https://github.com/SHERlocked...
  • 1. setData 不方便的地方

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

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

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

    // 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象,修改后整个 setDataconst { info } = this.datainfo.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.datainfo.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

    2. wx-updata 的优点

  • 支持 setData 对象自动合并,不用写蹩脚的对象路径了
  • 支持对象中嵌套数组,数组中嵌套对象;
  • 如果数组的某个值你不希望覆盖,请使用数组空位来跳过这个数组项,比如 [1,,3] 这个数组中间就是数组空位;
  • 如果数组空位你的 Eslint 报错,可以使用 wx-updata 提供的 Empty 来代替: [1, Empty, 3]
  • 3. wx-updata 安装

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

    使用 npm、yarn 安装方式:

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

    然后:

  • 把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;
  • 点击微信开发者工具面板工具栏的 工具 - 构建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: '灰色' }]]})

    5. wx-updata 相关 API

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

  • data: 你希望设置的 data
  • callback: 跟 setData) 第二个参数一样,引起界面更新渲染完毕后的回调函数
  • updataInit(Page, config)

    用户评论

    发呆

    我之前也犹豫过用哪个框架开发小程序,后来试用了upData,感觉真不错!它很轻量化,而且接口逻辑清晰易懂,上手速度很快。尤其是那些常见的功能组件,比如数据请求、UI交互等,都自带了现成的代码,直接就能用上,省时省力了不少.

        有19位网友表示赞同!

    寻鱼水之欢

    开发小程序最大的难题就是学习成本吧?upData这方面做得很好,文档和教程都很详细,就算小白也能快速入门。另外它还提供了强大的调试工具,可以方便地定位问题解决bug。

        有16位网友表示赞同!

    寒山远黛

    说upData轻量化我就同意!确实比其他框架感觉简洁很多,不用去纠结一堆冗余代码或者依赖太多第三方库。如果你是只想开发一些功能简单的小程序,那选择upData绝对是个不错的选择!

        有13位网友表示赞同!

    你很爱吃凉皮

    我虽然喜欢upData的上手速度快,但是对于要处理复杂业务逻辑的小程序来说,可能显得不够强大吧?毕竟有时候需要自定义更多组件,集成外部服务等等,这些需求就需要自己慢慢去实现...

        有7位网友表示赞同!

    〆mè村姑

    感觉upData更适合用来快速开发一些低代码类型的小程序,如果项目比较复杂的话,我还是建议选择其他一些功能更强大的框架。毕竟每个框架都有它的定位和优势吧?

        有20位网友表示赞同!

    不识爱人心

    我也是个喜欢快速开发的小程序的同学,一直都在探索新的框架,试过upData之后发现真的挺不错的!文档很易懂,使用流程也很清晰,尤其是那部分通用的组件,直接套用就完成了很多功能,省时不少呀!

        有11位网友表示赞同!

    矜暮

    我觉得这个文章写的真不错,把upData的核心优势总结的挺清楚!的确,轻量化、易上手、快速开发就是它的最大亮点,对于一些非大型项目来说,选择这个框架是个明智的选择。不过我还是希望作者以后能多分享一些具体的案例和实战经验,这样更能够帮助到我们。

        有15位网友表示赞同!

    盲从于你

    我之前也试过upData,感觉确实比较轻松上手,而且文档很详细,能快速解决一些常见问题。但是还是有一些不足的地方吧?比如对复杂业务逻辑的处理能力相对较弱,有时候需要自己写很多自定义代码才能满足需求...

        有7位网友表示赞同!

    咆哮

    文章说得很有道理啊!对于中小项目来说,追求框架轻量化和开发效率确实比功能强大更重要吧?upData就很符合这个要求,省了我们不少时间和精力。如果你是个新手开发者,强烈推荐试试!

        有16位网友表示赞同!

    心安i

    我也做过类似的小项目,之前用的是传统的微信小程序开发模式,感觉代码量有点多,而且调试起来也比较麻烦。后来遇到upData之后就豁然开朗了!它真的很适合快速开发一些简单的功能性小程序...

        有19位网友表示赞同!

    情深至命

    我目前还在学习小程序开发,看到这篇博文我觉得挺不错的!upData确实是一个轻量化、易上手的框架,对于新手开发者来说是一个很好的选择。不过我还是想问一下作者,如果开发复杂的业务逻辑的小程序,upData会不会显得有些不够用呢?

        有9位网友表示赞同!

    入骨相思

    我个人更喜欢使用vue来开发小程序,不过看了这种文章之后开始考虑尝试upData了!毕竟它确实轻量化,上手速度快,而且文档清晰易懂。也许能给我一些新的开发思路...

        有6位网友表示赞同!

    我绝版了i

    对于小程序开发的同学来说,选择合适的框架真的很重要!upData这款框架很不错呀!文档讲解详细,教程也很简单易懂,上手非常快。对于想快速开发小程序的朋友们来说,这个框架是非常推荐的!

        有11位网友表示赞同!

    掉眼泪

    其实无论什么框架都需要根据实际项目的需求来选择吧?我之前用过很多种框架,感觉每个都有它的优缺点。upData确实适合快速开发一些功能简单的程序,但是如果项目比较复杂的话,可能需要考虑其他更强大的框架...

        有15位网友表示赞同!

    热点资讯