ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラムを開発するとき、なぜ upData だけを使用するのですか?
WeChat アプレットの開発時に setData
を使用した経験が乏しいことを考慮して、ライブラリ関数 wx-updata
を開発しました。がリリースされました, この自己使用ライブラリ関数をコンパイルし、オープンソース wx-updata として Github に置きました. このライブラリ関数は開発中に非常に役に立ちました. 皆さんにも役立つことを願っています. 使用中に問題が発生した場合, 問題がある場合は、PR または問題を私に送信して、ミニ プログラム開発エクスペリエンスを向上させるために一緒に働きましょう~
バージョン 0.0.10
のときに不快に感じることがありますか? 以下に簡単な例を示します: <pre class="brush:php;toolbar:false;">// 你的 datadata: { name: &#39;蜡笔小新&#39;, info: { height: 140, color: &#39;黄色&#39; }
}复制代码</pre>
を使用します。 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 に変更し、同時に age を変更する必要があります。 info.desc
配列の 0 番目の項目の は 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': '灰色'})复制代码
上記の2つのメソッドは日常のちょっとしたプログラムでよく使われますが、他のWeb側のフレームワークと比べると非常にダサくて中途半端な印象が強いです。 :
this.upData({ info: { height: 155, desc: [{ age: 12 }, , , { color: '灰色' }] } })复制代码このメソッドは、ネストされたオブジェクト内の対応する属性値を大幅に変更し、変更したくない配列項目をスキップして、属性値のみを設定するのに役立ちます。と配列項目を提供しました。省略されていませんか? 非常に読みやすい、くだらないコードがたくさんあります。 これが、オンライン プロジェクトで
setData の代わりに wx-updata を使用する理由です。
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のメリット
オブジェクト内のネストされた配列、および配列内のネストされたオブジェクトをサポートします;
If your
Eslint 代わりに Empty を指定します:
[1, Empty, 3]
使用されていない場合配列内のスペースを空にする場合、またはカンマを数えたくない場合は、配列のオブジェクト パス メソッドを試してください。
[1,,3]
3. wx-updata のインストールdist、ディレクトリ内の .js
npmを使用するプロジェクトに追加します
yarn を使用しますインストール方法:
$ npm i -S wx-updata# or$ yarn add wx-updata复制代码
次に:
WeChat 開発者ツールをインストールします
パネルの右側にある詳細 - ローカル設定 - npm モジュールWeChat 開発者ツール パネル ツールバーの
ツールをクリック - npm のビルド
ビルド後、4. wx-updataの使い方
setData
// 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: '灰色' }]] })复制代码
使用方法 2
一部のフレームワークでは、
Page インスタンスで
setData と同じように 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 は本質的にシンボルであるため、
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,関数コールバック)
data
: 設定したいデータcallback
: setData の 2 番目のパラメータと同じで、インターフェイスの後にコールバック関数が発生します。 #updataInit(Page, config)
: ページ オブジェクトは # にある必要があります。 ##app.js
呼び出されます;
構成パラメータ
構成パラメータ
Configurationparameters
その他の関連する無料学習の推奨事項:
以上がWeChat ミニ プログラムを開発するとき、なぜ upData だけを使用するのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。