watchを使ってWeChatアプリでグローバル状態共有を実現します。
問題
これまでWeChatアプレットを開発した際に、ユーザー情報やオプティッド、地理的位置などの情報を取得する際には、Promise方式で非同期的に取得していましたが、これではページとApp.jsの両方を取得することにより、重複要求が発生する可能性があります。
例えば、各ページでこれらの共有情報を取得するために、App.jsで取得し、ページレベルで取得することを選択します。この2回の取得時間間隔が小さいと、前の要求がまだデータを取得していない可能性があり、後の要求が再度取得され、2回の要求が発生します。
もう一つの問題は書くのが面倒くさいことです。
考えをまとめる
双方向結合
vueの双方向バインディング原理は、3.0でProxyモニターデータの変化を採用しますが、プログラムのこちら側のProxy互換性を考慮すると分かりませんので、2.0の
主に設定をブロックする操作です。割り当てを行う時、新旧値をモニターに通知します。
観察者モード
ページレベルのワンロードで
モジュール化の参照
観察者モードから導出されたのは1つのカテゴリーではなく1つのオブジェクト（クラスのインスタンス）ですので、導入時にこのオブジェクトは共有され、このオブジェクトを通じて他のページとリンクすることができます。
モジュールローディングの本質については、ES 6モジュールローディングのメカニズムは、CommunJSモジュールとは全く異なります。興味がある人はこれを見に行ってもいいです。
パッケージ
小さいプログラムのPage関数自体はwatchをサポートしていませんが、関数をカスタマイズしてパラメータを統合すればいいです。
ページのワンロードの時に、まずwatch属性を巡回して、
ページonnloadは廃棄されます。この時も傍受をキャンセルするべきです。これらは全部包装しました。手動で処理しなくてもいいです。
これらの考えがあって、どれぐらいかかりませんか？一つの雛形が出てきました。手動でテストして、大丈夫だと思います。npmに発表しました。興味のあるものはインストールして体験してみてください。
インストール
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。
これまでWeChatアプレットを開発した際に、ユーザー情報やオプティッド、地理的位置などの情報を取得する際には、Promise方式で非同期的に取得していましたが、これではページとApp.jsの両方を取得することにより、重複要求が発生する可能性があります。
例えば、各ページでこれらの共有情報を取得するために、App.jsで取得し、ページレベルで取得することを選択します。この2回の取得時間間隔が小さいと、前の要求がまだデータを取得していない可能性があり、後の要求が再度取得され、2回の要求が発生します。
もう一つの問題は書くのが面倒くさいことです。
onLoad() {
app.getUserInfo()
.then(userInfo => {
}).catch(err => { /* */ });
// userInfo openid， ：
Promise.all([app.getUserInfo(), app.getOpenid()])
.then(res => {
}).catch(err => { /* */ });
}考えをまとめる
双方向結合
vueの双方向バインディング原理は、3.0でProxyモニターデータの変化を採用しますが、プログラムのこちら側のProxy互換性を考慮すると分かりませんので、2.0の
Object.definePropertyを採用してデータの変化をモニターしています。主に設定をブロックする操作です。割り当てを行う時、新旧値をモニターに通知します。
観察者モード
ページレベルのワンロードで
app.globalDataそれぞれのキー名のイベントを傍受し、ap.jsのワンロードでObject.definePropertyを使ってapp.globalDataを再定義し、app.globalDataに対応するキー値が変化したら、傍受のページにその値が変化したことを通知します。モジュール化の参照
観察者モードから導出されたのは1つのカテゴリーではなく1つのオブジェクト（クラスのインスタンス）ですので、導入時にこのオブジェクトは共有され、このオブジェクトを通じて他のページとリンクすることができます。
モジュールローディングの本質については、ES 6モジュールローディングのメカニズムは、CommunJSモジュールとは全く異なります。興味がある人はこれを見に行ってもいいです。
パッケージ
小さいプログラムのPage関数自体はwatchをサポートしていませんが、関数をカスタマイズしてパラメータを統合すればいいです。
ページのワンロードの時に、まずwatch属性を巡回して、
app.globalDataをモニターして、vueのwatchの使い方を参考にすることができます。ページonnloadは廃棄されます。この時も傍受をキャンセルするべきです。これらは全部包装しました。手動で処理しなくてもいいです。
これらの考えがあって、どれぐらいかかりませんか？一つの雛形が出てきました。手動でテストして、大丈夫だと思います。npmに発表しました。興味のあるものはインストールして体験してみてください。
インストール
npm i wx-watch -S --production
// app.js
var { watchData, } = require('/miniprogram_npm/wx-watch/index.js');
App({
onLaunch() {
this.watchData(); /* this.globalData ， ， globalData ， */
},
watchData,
globalData: {
userInfo: null,
}
});
// globalData .js
var { getPage } = require('../../miniprogram_npm/wx-watch/index.js');
const app = getApp();
/**
* getPage( ，app) app ， ，
*/
getPage({
watch: {
userInfo(userInfo, oldUserInfo) {
console.log(` app.glodalData userInfo`);
}
},
//
}, app)締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。