小程式填坑之路—讀取使用者資訊、快取其資料、讀取其資料(button、wx.setStorage、wx.getStorage)
深深以為,遇見一個好的文章不容易,希望自己也能用心填坑。
首先來說讀取使用者資訊,之前是用getUserInfo(),但在2018年4月30日之後,該介面不適用於開發版和測試版,正式上線的小程式不受影響。很不幸,我就是4月30後後的這批。出於優化使用者體驗(我真的不是自己想省事。。。),用了這個方法,測試的時候,提示“該介面不適用,請升級。”好的吧,就這樣我開始在網上各種找,“小程式自動彈出使用者登入”、“小程式自動彈窗”……各種關鍵詞真的都用到了,沒錯……沒有找到……(大寫的沮喪…)
還是用微信小程式修改後的button按鈕吧,具體程式碼如下:
wxml:
<button open-type='getUserInfo' lang="zh_CN" bindgetuserinfo="onGotUserInfo" class='moto'>點選開啟您的購物之旅</button>
js:
//獲取使用者資訊 onGotUserInfo: function(e) { console.log(e); if (e.detail.userInfo != null) { //使用者點選允許授權 App.imageUrl = e.detail.userInfo.avatarUrl, App.nickName = e.detail.userInfo.nickName, App.authorize = true; } console.log("nickname=" + e.detail.userInfo.nickName); }
以上程式碼執行後,可以直接獲取到使用者的微信公開資訊,我列出來獲取後的資料
這一部分就是微信使用者的公開資訊,獲取到公開資訊後,就要寫入快取,以便後臺呼叫,在剛才的js中新增wx.getStorage()方法,直接上程式碼理解,
console.log("nickname=" + e.detail.userInfo.nickName); //接上段js的 wx.setStorage({ //資料快取方法 key: 'user_key', //關鍵字,本地快取中指定的key data: e.detail.userInfo, //快取微信使用者公開資訊, //看到上面的截圖就能看到,資料是在detail裡的 success: function() { //快取成功後,輸出提示 console.log('寫入userInfo快取成功') }, fail: function() { //快取失敗後的提示 console.log('寫入userInfo發生錯誤') } }) wx.switchTab({ //先獲取到使用者資訊,在執行跳轉, //wx.navigateTo會形成父子級關係,wx.switchTab是同級 url: "../index/index" }) }
到目前為止,已經實現了資料儲存,那我要是在index頁面呼叫這個資料該怎麼做呢?那就要用到wx.getStorage,讀取本地儲存。wx.getStorage要根據剛才的key關鍵字找到儲存的data。上程式碼理解
//在index.js中讀取本地快取,這段程式碼要寫在index.js的onLoad裡
wx.getStorage({
key: 'user_key', //這個是剛才在快取資料時的關鍵字,保持一致
success: function(r) { //成功後回撥的函式,先打印出來
console.log(r.data);
that.setData({ //這個地方我等下要詳細講解,畢竟栽了兩次坑了,這是第二次
user_value: r.data
})
console.log(that.data.user_value)
},
fail: function() { //失敗後回撥的函式
console.log('讀取user_key發生錯誤')
}
})
關於這段程式碼中,首先來說這個that是幹什麼用的?是用來儲存讀取快取的資料的。那為什麼要用that,不用this呢?
這個地方需要牽扯到this的指向問題,且不說別處,單在這裡,我在onLoad先定義了"var that = this",首先,this是指當前物件,如果我沒有定義這個that,把這句程式碼改成“this.setData”會報錯,報錯截圖如下,列印沒問題,卻出現了這個,在這裡,this僅僅是在這個函式方法裡,並不能在外部被呼叫,那這個this就是指向不明確了,同樣在下面呼叫的時候也是不對的。
再說下注意事項:
that後面不要少了data,一定要看that包含了什麼,什麼下面才有自己想要的資料,一定要在小程式的偵錯程式—Sources下多打斷點除錯。