マイクロ信ウィジェットローカルデータストレージインスタンスの詳細

マイクロ信ウィジェットローカルデータストレージインスタンスの詳細
前言
この記事を読む前に他のプログラムの開発経験がある場合は、アンドロイドやアップルのオリジナルアプリなど、一般的にローカルのストレージ機能を提供しており、sqliteデータベースを使用してストレージを行うこともできることを知っています.しかし、微信のウィジェットフレームワークは、微信自体に基づいており、実際の運用環境はブラウザ内にあるだけなので、それほど豊富なデータストレージの実力を提供することはありません.しかしhtml 5はすでにブラウザにデータを格納することができ、微信のウィジェットがこの機能をカプセル化したので、データ格納を使用することができます.
各微信ウィジェットは自分のローカルキャッシュを持つことができ、wxを通過することができる.setStorage(wx.setStorageSync)

wx.getStorage（wx.getStorageSync）、 
wx.clearStorage（wx.clearStorageSync） 

ローカルキャッシュを設定、取得、クリーンアップできます.ローカルキャッシュは最大10 MBです.
上のsetとgetには対応するSyncメソッドがあり,Sync付きメソッドが同期メソッド,Syncなしメソッドが非同期メソッドである.
キャッシュを設定するにはkeyと対応するdata値を設定する必要があります.「微信web開発者ツール」のデバッグ状態で、デバッグウィンドウのStorageバーをクリックして、ローカルにキャッシュされているデータを表示することができます.
キャッシュは、配列、数値、文字列、オブジェクトを保存します.
キャッシュの設定
setStorageとsetStorageSyncの2つのインタフェースを提供し、ストレージメソッドの設定を使用する場合、ウィジェットのストレージ値に対応するkeyの値がすでに存在する場合、新しい値を元の値に置き換えます.
setSotrageインタフェース

wx.setStorage({
 key:"key",
 data:"value",
 success:function(res){console.log(res)},
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)},
})
//Object {errMsg: "setStorage:ok"}
//Object {errMsg: "setStorage:ok"}

setStorageSyncインタフェース
このメソッドは同期インタフェースであるため、keyとdataを直接設定します.

wx.setStorageSync('key', 'value')

上の2つのdemoでは文字列キャッシュを使用しています.もちろん、オブジェクトをキャッシュすることもできます.たとえば、次のようにします.

wx.setStorage({key:"ob",data:{name:'smallerpig',sex:1,age:18}})

キャッシュの取得
getSotrageインタフェース
非同期インタフェースなので、いくつかのコールバックを定義できます.

wx.getStorage(
{
 key:'key',
 success:function(res){
  console.log(res)//Object {errMsg: "getStorage:ok", data: "value1"}
 },
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)}
})

このうち、微信ウィジェットの多くの非同期インタフェースのコールバックは、success、fail、completeの3つのコールバックを与え、実行に成功したときにsuccess、completeのコールバックを実行する.実行に失敗するとfail、completeコールバックがそれぞれ実行されます.
getSotrageSyncインタフェース
このインタフェースは同期インタフェースなので,対応するkey値を渡すだけでよい.次のコードに従います.

wx.getStorageSync('ob')
//Object {name: "smallerpig", sex: 1, age: 18}

現在のストレージの概要の取得
wxを使用します.getStorageInfoインタフェース
たとえば、次のコードがあります.

wx.getStorageInfo({
 success: function(res) {
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
 }
//["logs", "r3session", "key"]0: "logs"1: "r3session"2: "key"]
//1
//10240
})

同期インタフェースwxを用いることもできる.getStorageInfoSync.
キャッシュの使用
前の文章では、子豚はwxを解読する方法を紹介した.getUserInfoインタフェースで取得したcryptedDataデータ.その中のsession_keyブタはflaskのキャッシュに書かれていて、キャッシュのキーは:xcx_と書かれています.session_key.実際の環境では、このような異なるユーザーが取得したセッションのため、このように書くことはできません.keyは同じなので、異なるユーザーに異なるキャッシュkeyを添付する必要があります.flaskのキャッシュキーを微信ウィジェットに返し、ウィジェットにはキー値を固定することができ、data値はflaskバックグラウンドから与えられた値を維持することができる.
回りくどいことを言っているので、ここでは読者によく理解してもらう必要があります.
flaskのコードの使用code取得session_keyでは、次のコードを使用します.

@app.route('/user/getuserinfo', methods=['GET', 'POST'])
def getuserinfo():
 code = request.data
 url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code' % (appid, secret, code)
 r = requests.get(url)
 j = json.loads(r.text)
 r3session_key = binascii.hexlify(os.urandom(64))
 cache.set(r3session_key, j['session_key'])
 return r3session_key

次にwx.requestのコールバックでflaskで返されたr 3 session_key保存:

wx.request({
 url: 'https://***.smallerpig.com/user/getuserinfo',
 data: r.code,
 method: 'POST',
 success: function(res){
 wx.setStorageSync('r3session', res.data)
 }
})

次にwxを呼び出す.getUserInfoの場合、返されたデータに加えて、マイクロメッセージウィジェットのローカルキャッシュから取り出されたr 3 sessionをflaskに捨てて処理し、flaskは、来たr 3 sessionに基づいてローカルサーバのflaskキャッシュからマイクロメッセージの値を解読する.これこそ完全な過程です.
ウィジェットのgetUserInfoコード:

wx.getUserInfo({
 success: function (res) {
 that.globalData.userInfo = res.userInfo
 typeof cb == "function" && cb(that.globalData.userInfo)
 //       r3session            ，              session_key
 var r3session = wx.getStorageSync('r3session')
 res.r3session = r3session
 wx.request({
  url: 'https://***.smallerpig.com/user/getuserunionid',
  data: res,
  success: function(res){
  // success
  console.log(res)
  },
 })
 }
})

対応するflaskコード:

@app.route('/user/getuserunionid', methods=['GET', 'POST'])
def getuserid():
 r = json.loads(request.data)
 encryptedData = r['encryptedData']
 iv = r['iv']
 xcx_session_key = r['r3session']
 session_key = cache.get(xcx_session_key) #         r3session   session_key
 pc = WXBizDataCrypt(appid, session_key)
 return pc.decrypt(encryptedData, iv)

公式文書の住所を参照:https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html
まとめ
いくつかの文章の紹介を経て、もしあなたが子豚のコードに従って一歩一歩やっているならば、あなたはすでにウィジェット開発の大まかな過程を理解しているはずです.次の重点はウィジェットがみんなに提供するインタフェースを熟知して、それからこれらのインタフェースに基づいて私たちのビジネスロジックを改善することにほかならません.
読書に感謝して、みんなを助けることができることを望んで、みんなの当駅に対する支持に感謝します!