微信小程式-獲取使用者資訊-前端寫法
阿新 • • 發佈:2018-11-26
開發微信小程式,前提是申請到一個 appId 並拿到 appSecret ,並在微信公眾平臺配置好小程式對應的伺服器域名。
小程式可以通過兩種方式獲取到使用者資訊,並且獲取到資訊之後,推薦直接存到小程式的全域性變數中,後續直接在全域性變數中讀取,無需在重新獲取。
方法一:
使用 appId 新建小程式模板,在建立時,勾選中“建立普通快速啟動模板”。建立成功後,在 pages/index/index.js檔案中可以看到如下程式碼:
if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由於 getUserInfo 是網路請求,可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在沒有 open-type=getUserInfo 版本的相容處理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }
內容很好理解,通過微信的介面獲取使用者資訊,並存入到全域性變數中。注意:全域性變數 userInfo 是必須在 app.js 檔案中已經定義好的,否則會出錯。
方法二:
是通過自定義的後臺介面,把必要的引數傳遞到後臺,然後返回使用者資訊自定義的token,token是用來做之後授權校驗使用。如下的例子是直接反饋了 token ,並沒有把 使用者資訊返回回來:
//測試授權 wx.login({ success: function (res) { var code = res.code; wx.getUserInfo({ success: function (res) { console.log(res.userInfo); var iv = res.iv; var encryptedData = res.encryptedData; var signature = res.signature; var rawData = res.rawData; wx.request({ url: "https://kevin.kevinkevin.com/login_status",//上傳使用者資訊和登入用的code,獲取token data: { code: code, signature: signature, rawData: rawData, encryptedData: encryptedData, iv: iv }, success: function (res) { if (res.statusCode && res.statusCode == "200"){ //從後臺獲取的token,前端自己儲存到全域性變數中,備用;以後每次使用request都把該變數存入header變數 console.log("token : " + res.data); app.globalData.token = res.data; } } }) }, fail: function () { _this.authSetting(); } }) } })
獲取到的 token 也是直接存到了全域性變數,備用。
因為小程式的前後臺我是分開電腦開發的,所以第二種獲取使用者資訊和 自定義 token 的後臺程式碼,在下一篇文章中,請見諒。
之後會在評論裡附加上原始碼下載連結