Warum verwende ich bei der Entwicklung von WeChat-Miniprogrammen nur upData?

Angesichts der schlechten Erfahrungen mit der Verwendung von setData bei der Entwicklung des WeChat-Applets habe ich eine Bibliotheksfunktion wx-updata entwickelt. Nach dem Start des Projekts habe ich diese verwendet Für meinen eigenen Gebrauch. Die Bibliotheksfunktionen sind auf Github organisiert und als Open Source verfügbar. Diese Bibliotheksfunktion ist für mich während der Entwicklung sehr hilfreich. Ich hoffe, sie kann auch allen helfen. Wenn Sie während der Verwendung auf Probleme stoßen, können Sie dies tun Schicken Sie mir eine PR. Lassen Sie uns gemeinsam die Mini-Programmentwicklungserfahrung verbessern~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)

• wx-updata Version 0.0. 10🎜
• 🎜Github-Adresse: github.com/SHERlocked9…🎜
• 🎜Mini-Programmcode-Snippet-Vorschau-Adresse: Developers.weixin.qq.com/s/CcXdO1mc7…🎜 li>
• 🎜Kleine Programmcode-Snippet-Codeadresse: github.com/SHERlocked9…🎜

1. Unannehmlichkeiten von setData

🎜 Fühlen Sie sich manchmal unwohl, wenn Sie setData verwenden? Hier ist ein einfaches Beispiel: 🎜rrreee🎜Wenn Sie info.height auf 155 ändern möchten, verwenden Sie setData: 🎜rrreee🎜 scheint nicht allzu kompliziert zu sein, aber wenn data ein großes Objekt ist, müssen tiefe und unterschiedliche Objekte und Array-Elemente nacheinander geändert werden: 🎜rrreee🎜Zum Beispiel müssen Sie für eine bestimmte Anforderung info.height auf 155 ändern und gleichzeitig das age des 0. Elements des info.desc Array ist 12, was ist mit der Farbe von Element 3, die grau ist? 🎜rrreee🎜Die beiden oben genannten Methoden werden häufig in unseren täglichen kleinen Programmen verwendet. Im Vergleich zu anderen Web-Frameworks sind sie sehr lahm und haben einen starken Sinn für Halbfertigprodukte: 🎜rrreee 🎜Diese Methode wird uns helfen, die entsprechenden Attributwerte im verschachtelten Objekt tiefgreifend zu ändern, die Array-Elemente zu überspringen, die wir nicht ändern möchten, und nur die von uns bereitgestellten Attributwerte und Array-Elemente festzulegen viel beschissenen Code weglassen? Die Lesbarkeit ist auch hervorragend. 🎜🎜Deshalb verwende ich im Online-Projekt wx-updata anstelle von setData🎜🎜Das Prinzip von wx-updata ist eigentlich sehr einfach: 🎜rrreee🎜Es stellt sich heraus, dass diese Konvertierung funktioniert Wir haben es selbst manuell gemacht, aber jetzt erledigt wx-updata es für uns, ist das nicht wunderbar? 🎜🎜Im Folgenden werden die Vorteile und wichtigsten Verwendungsmethoden von wx-updata vorgestellt~🎜

2. Vorteile von wx-updata

1. Unterstützt das automatische Zusammenführen von setData-Objekten, ohne dass beschissene Objektpfade geschrieben werden müssen.
2. Unterstützt das Verschachteln von Arrays innerhalb von Objekten und das Verschachteln von Objekten innerhalb von Arrays.
3. Wenn die array Wenn Sie einen bestimmten Wert nicht überschreiben möchten, verwenden Sie bitte eine Array-Lücke, um das Array-Element zu überspringen, z. B. [1,,3] Die Mitte dieses Arrays ist eine Array-Lücke ; li>
4. Wenn das Array leer ist Wenn Ihr Eslint einen Fehler meldet, können Sie stattdessen das von wx-updata bereitgestellte Empty verwenden: [1, Empty , 3]
5. Wenn Sie nicht an die Leerzeichen im Array gewöhnt sind oder nicht bereit sind, die Anzahl der Kommas zu zählen, können Sie die Objektpfadmethode des Arrays [1,,3] -> {'[0]': 1, '[2]': 3

3. wx-updata-Installation

🎜Sie können wx-updata.js auch direkt in den dist kopieren -Verzeichnis zum zu verwendenden Projekt🎜🎜Verwenden Sie npm, yarn. Installationsmethode: 🎜rrreee🎜Dann: 🎜

1. Put Klicken Sie auf die Schaltfläche Details – Lokale Einstellungen – NPM-Modul verwenden auf der rechten Seite des WeChat-Entwicklertools-Bereichs. Klicken Sie auf Tools – NPM erstellen Symbolleiste des WeChat Developer Tool Panels;

🎜miniprogram_npmnach dem Erstellen erfolgreich generieren > Der Ordner kann normal verwendet werden🎜

4. So verwenden Sie wx-updata

Verwendungsmethode eins

🎜Sie können die Methode des direkten Mountens auf Page, sodass Sie setData in der <code>Page-Instanz verwenden können. Das Gleiche wie die Verwendung von upData🎜rrreeerrreee

Methode 2 verwenden

🎜Einige Frameworks befinden sich möglicherweise in . Es wurden weitere Änderungen am Page-Objekt vorgenommen. Es ist möglicherweise nicht sinnvoll, es direkt zu ersetzen Seite stellt auch Tool-Methoden zur Verfügung. Benutzer können die Tool-Methode direkt im Seitencode zur Verarbeitung verwenden: 🎜rrreee

Verwenden Sie Empty anstelle von Array-Leerraum

🎜Sie können wx-updata Empty verwenden, um die leere Array-Position zu ersetzen. Da Empty im Wesentlichen ein Symbol ist kann nur mit wx-updata exportiert und nicht selbst erstellt werden. 🎜rrreee

Objektpfadmethode des Arrays

🎜Wenn Sie es nicht gewohnt sind, Leerzeichen im Array zu leeren, oder nicht bereit sind, Kommas zu zählen, dann sind Sie hier genau richtig Sie können das Objekt im Array-Pfadmodus ausprobieren. Sie müssen die Konfigurationskonfiguration {arrObjPath: true🎜rrreee

5 übergeben. wx-updata-bezogene API

🎜Page.prototype.upData(Objektdaten, Funktionsrückruf)🎜

1. data: Die Daten, die Sie festlegen möchtendata： 你希望设置的 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: Wie der zweite Parameter von setData löst er die Callback-Funktion aus, nachdem die Schnittstelle aktualisiert und gerendert wurde

updataInit(Page, config)

Page: Seitenobjekt, muss in app.js aufgerufen werden; config Konfiguration

Konfigurationsparameter { debug: true druckt die Pfaddaten aus, um Benutzern beim Debuggen zu helfen. Der Standardwert ist „false“ und ist nicht aktiviert; { arrObjPath: true , aktiviert die Objektpfadmodusfunktion des Arrays, der Standardwert „false“ ist nicht aktiviert

🎜objToPath(Object data, Object config)🎜🎜 🎜data code>: Das Datenobjekt, das Sie festlegen möchten 🎜🎜<code>config Konfiguration

🎜Konfigurationsparameter { arrObjPath: true aktiviert das Objekt Pfadmodusfunktion des Arrays, der Standardwert ist false. Nicht aktiviert;

Das obige ist der detaillierte Inhalt vonWarum verwende ich bei der Entwicklung von WeChat-Miniprogrammen nur upData?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!