WeChat ミニ プログラムを開発するとき、なぜ upData だけを使用するのですか?

WeChat アプレットの開発時に setData を使用した経験が乏しいことを考慮して、ライブラリ関数 wx-updata を開発しました。がリリースされました, この自己使用ライブラリ関数をコンパイルし、オープンソース wx-updata として Github に置きました. このライブラリ関数は開発中に非常に役に立ちました. 皆さんにも役立つことを願っています. 使用中に問題が発生した場合, 問題がある場合は、PR または問題を私に送信して、ミニ プログラム開発エクスペリエンスを向上させるために一緒に働きましょう~

• wx-updata

  バージョン 0.0.10

Github アドレス: github.com/SHERlocked9…
ミニ プログラム コード スニペットのプレビュー アドレス: developers.weixin.qq .com/s/CcXdO1mc7…
ミニ プログラム コード スニペット コード アドレス: github.com/SHERlocked9…
1. setData

を使用しています

setData

のときに不快に感じることがありますか? 以下に簡単な例を示します: <pre class='brush:php;toolbar:false;'>// 你的 datadata: { name: &amp;#39;蜡笔小新&amp;#39;, info: { height: 140, color: &amp;#39;黄色&amp;#39; } }复制代码</pre>

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 に変更し、同時に

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のメリット

Supports

setData

オブジェクトの自動マージ、くだらないオブジェクト パスを記述する必要はありません
1. オブジェクト内のネストされた配列、および配列内のネストされたオブジェクトをサポートします;
配列内の特定の値を上書きしたくない場合は、
2. [1,,3]
などの配列項目をスキップするには、配列スペースを使用してください。この配列の中央は配列の空スペースです。
3. If your Eslint
配列が空の場合はエラーを報告します。
4. wx-updata 代わりに Empty を指定します: [1, Empty, 3]使用されていない場合配列内のスペースを空にする場合、またはカンマを数えたくない場合は、配列のオブジェクト パス メソッドを試してください。[1,,3]
->
5. {'[0]' : 1, '[2]': 3} 3. wx-updata のインストール

wx-updata を直接コピーすることもできます

dist

ディレクトリ内の .js を使用するプロジェクトに追加します

npm

、

yarn を使用しますインストール方法:

$ npm i -S wx-updata# or$ yarn add wx-updata复制代码

次に:

WeChat 開発者ツールをインストールします

パネルの右側にある詳細 - ローカル設定 - npm モジュール

ボタンを使用して開きます;
1. WeChat 開発者ツール パネル ツールバーの ツールをクリック - npm のビルド
;
2. ビルド後、
miniprogram_npm

フォルダーが正常に生成され、次のことが可能になります。

4. wx-updataの使い方

利用方法その1

Page

に直接マウントする方法が使えます。

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

と同じように

upData

を使用できます。

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,関数コールバック)

1. data: 設定したいデータ
2. callback: setData の 2 番目のパラメータと同じで、インターフェイスの後にコールバック関数が発生します。

#updataInit(Page, config)

1. #Page: ページ オブジェクトは # にある必要があります。 ##app.js 呼び出されます;
config
2. 構成構成パラメータ
   { debug: true }
   • はパスされたデータを出力します, help ユーザー デバッグの場合、デフォルト値は false で有効ではありません。構成パラメータ
   { arrObjPath: true }
   • により、配列のオブジェクト パス モード関数が有効になります。デフォルト値は次のとおりです。 false で有効ではありません;

objToPath(Object data, Object config)

data
1. : 設定するデータ オブジェクト
config
2. ConfigurationConfigurationparameters
   { arrObjPath: true }
   • 、オブジェクト パス モード機能が有効になります。配列のデフォルトは false で、有効になりません。

その他の関連する無料学習の推奨事項:

WeChat ミニ プログラムの開発

以上がWeChat ミニ プログラムを開発するとき、なぜ upData だけを使用するのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。