위챗 미니 프로그램을 개발할 때 왜 upData만 사용하나요?

WeChat 애플릿을 개발할 때 setData를 사용했던 경험이 좋지 않았기 때문에 프로젝트가 시작된 후 라이브러리 함수인 wx-updata를 개발했습니다. 나만의 용도 라이브러리 기능은 Github에 정리되어 있으며 wx-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 拷贝到项目里使用

使用 npm、yarn 安装方式：

$ 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)

사용 중에 문제가 발생하면 다음을 수행할 수 있습니다. 저에게 PR을 제출해 주세요. 함께 미니 프로그램 개발 경험을 개선해 보세요~🎜

• 🎜wx-updata 버전 0.0. 10🎜
🎜Github 주소: github.com/SHERlocked9…🎜
• 🎜미니 프로그램 코드 조각 미리보기 주소:developers.weixin.qq.com/s/CcXdO1mc7…🎜 li>
• 🎜작은 프로그램 코드 조각 코드 주소: github.com/SHERlocked9…🎜

1.

🎜 setData를 사용할 때 가끔 불편함을 느끼시나요? 다음은 간단한 예입니다. 🎜rrreee🎜 info.height를 155로 수정하려면 setData 수행 방법: 🎜rrreee🎜는 그다지 복잡해 보이지 않지만 data가 큰 객체인 경우 깊고 다양한 객체와 배열 항목을 하나씩 변경해야 합니다. 🎜rrreee🎜예를 들어 특정 요구 사항의 경우 info.height를 155로 변경하는 동시에 age를 변경해야 합니다. code>info.desc 배열은 12입니다. 항목 3의 color가 회색이면 어떨까요? 🎜rrreee🎜위의 두 가지 방법은 우리 일상의 작은 프로그램에서 자주 사용됩니다. 다른 웹사이드 프레임워크에 비해 매우 허술하고 반제품 느낌이 강합니다. 🎜rrreee 🎜이 방법이 있습니까? 중첩된 객체에서 해당 속성 값을 크게 변경하고, 변경하고 싶지 않은 배열 항목은 건너뛰고, 우리가 제공한 속성 값과 배열 항목만 설정하는 데 도움이 되지 않을까요? 형편없는 코드를 많이 생략했나요? 가독성도 뛰어납니다. 🎜🎜이것이 온라인 프로젝트에서 setData 대신 wx-updata를 사용하는 이유입니다.🎜🎜wx-updata의 원리는 실제로 매우 간단합니다. 예를 들면 다음과 같습니다. 🎜rrreee🎜이 변환 작업이 수행되는 것으로 나타났습니다. 우리가 직접 수동으로 수행했지만 이제는 wx-updata가 우리를 위해 수행해 주는 것입니다. 정말 멋지지 않나요! 🎜🎜다음은 wx-updata의 장점과 주요 사용방법을 소개합니다~🎜

2. wx-updata의 장점

1. setData 객체의 자동 병합을 지원하므로 형편없는 객체 경로를 작성할 필요가 없습니다.
2. 객체 내 배열 중첩 및 배열 내 객체 중첩 지원
3. 배열 특정 값을 덮어쓰지 않으려면 [1,,3] 와 같이 배열 간격을 사용하여 배열 항목을 건너뛰십시오. 이 배열의 중간은 배열 간격입니다. li>
4. 배열이 비어 있는 경우 Eslint가 오류를 보고하는 경우 대신 wx-updata에서 제공하는 공백을 사용할 수 있습니다: [1, 비어 있음 , 3]
5. 배열의 빈 공간에 익숙하지 않거나 쉼표 수를 세고 싶지 않다면 배열의 객체 경로 방법을 시도해 볼 수 있습니다. [1,,3] -> {'[0]': 1, '[2]': 3}

3. wx-updata 설치

🎜dist에 <code>wx-updata.js를 직접 복사할 수도 있습니다. 디렉토리를 프로젝트에 추가하여 사용🎜🎜npm, yarn 사용 설치 방법: 🎜rrreee🎜다음: 🎜

1. Put WeChat 개발자 도구 패널 오른쪽에 있는 세부정보-로컬 설정-npm 모듈 사용 버튼을 엽니다.
2. 에서 도구 - npm 빌드를 클릭합니다. WeChat 개발자 도구 패널의 도구 모음

🎜빌드 후 miniprogram_npm생성> 폴더를 정상적으로 사용할 수 있습니다🎜

4. wx-updata 사용방법

사용방법 1

🎜 페이지, Page 인스턴스에서 setData를 사용할 수 있도록 upData를 사용하는 것과 동일🎜rrreeerrreee

방법 2 사용

🎜일부 프레임워크는 에 있을 수 있습니다. Page 개체에 대한 추가 수정이 이루어졌습니다. 직접 교체하는 것은 좋지 않을 수 있습니다. 페이지. wx-updata는 도구 메서드도 노출합니다. 사용자는 처리를 위해 페이지 코드에서 직접 도구 메서드를 사용할 수 있습니다. 🎜rrreee

배열 빈 공간 대신 ​​빈 공간 사용

🎜wx-updata를 사용할 수 있습니다. 빈 공간은 배열의 빈 공간을 대체하기 위해 제공됩니다. 빈 공간은 기본적으로 기호이므로 wx-updata를 사용해서만 내보낼 수 있으며 직접 만들 수는 없습니다. 🎜rrreee

배열의 개체 경로 방법

🎜배열에서 공백을 비우는 데 익숙하지 않거나 쉼표를 계산하는 것을 꺼리는 경우 배열 경로 모드의 객체를 시도하려면 구성 구성 {arrObjPath: true}🎜rrreee

5를 전달해야 합니다. wx-updata 관련 API

🎜Page.prototype.upData(객체 데이터, 함수 콜백)🎜

1. data: 설정하려는 데이터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 }
   callback: setData의 두 번째 매개변수와 마찬가지로 인터페이스가 업데이트되고 렌더링된 후 콜백 함수가 발생합니다

updataInit(Page, config)

Page: 페이지 개체, app.js에서 호출해야 함 config 구성

구성 매개변수 { debug: true }는 사용자 디버깅을 돕기 위해 경로가 지정된 데이터를 인쇄합니다. 기본값은 false이며 활성화되지 않습니다. { arrObjPath: true }는 배열의 객체 경로 모드 기능을 활성화하며 기본 false는 활성화되지 않습니다. data code>: 설정하려는 데이터 개체

config 구성

구성 매개변수 { arrObjPath: true }는 개체를 활성화합니다. 배열의 경로 모드 기능, 기본값은 false입니다. 활성화되지 않음 🎜🎜🎜🎜🎜🎜🎜 관련 무료 학습 권장 사항: 🎜🎜🎜WeChat Mini 프로그램 개발🎜🎜🎜🎜

위 내용은 위챗 미니 프로그램을 개발할 때 왜 upData만 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!