Egret:針對微信官方的授權按鈕,對遊戲中的授權進行處理優化
阿新 • • 發佈:2018-12-31
1、之前的官方微信小遊戲,要獲得使用者微信授權,直接呼叫wx.getUserInfo函式微信就可以自動判斷是否已授權過,如果授權過會直接返回success,如果未授權過則會自動彈出授權視窗。所以在編譯後的platform.js檔案裡對getUserInfo函式修改如下(分別針對使用者同意授權和拒絕授權進行處理):
getUserInfo() { return new Promise((resolve, reject) => { wx.getUserInfo({ withCredentials: true, success: res => { var userInfo = res.userInfo; var nickName = userInfo.nickName; var avatarUrl = userInfo.avatarUrl; var gender = userInfo.gender; //性別 0:未知、1:男、2:女 var province = userInfo.province; var city = userInfo.city; var country = userInfo.country; resolve(userInfo); }, fail: res => { wx.showModal({ title: '友情提醒', content: '請允許微信獲得授權!', confirmText: "授權", showCancel: false, success: res => { resolve(null); } }); } }); }) }
2、後來官方微信新增了一個授權按鈕,要讓使用者自己點選按鈕來獲得授權資訊及使用者資訊,而不是像之前直接通過呼叫wx.getUserInfo。所以為了相容之前的版本,以除錯基礎庫2.0.1版本作為分界線進行不同版本處理(2.0.1之後的會新增一個按鈕進行監聽處理):
getUserInfo() { return new Promise((resolve, reject) => { let sysInfo = wx.getSystemInfoSync(); let sdkVersion = sysInfo.SDKVersion; //sdkVersion = sdkVersion.replace(/\./g, ""); //sdkVersion = sdkVersion.substr(0, 3); //let sdkVersionNum = parseInt(sdkVersion); //console.log("platform獲取使用者授權:", sdkVersionNum); //if (sdkVersionNum >= 201) { if (sdkVersion >= "2.0.1") { var button = wx.createUserInfoButton({ type: 'image', text: '', image: "resource/assets_game/main/button_wx_getuserinfo.png", style: { left: 0, top: 0, width: 0, height: 0, backgroundColor: '#ff0000', color: '#ffffff', } }); button.onTap((res) => { if(res.userInfo){ console.log("使用者授權:", res); var userInfo = res.userInfo; var nickName = userInfo.nickName; var avatarUrl = userInfo.avatarUrl; var gender = userInfo.gender; //性別 0:未知、1:男、2:女 var province = userInfo.province; var city = userInfo.city; var country = userInfo.country; button.destroy(); resolve(userInfo); }else{ console.log("拒絕授權"); } }); }else { wx.getUserInfo({ withCredentials: true, success: res => { var userInfo = res.userInfo; var nickName = userInfo.nickName; var avatarUrl = userInfo.avatarUrl; var gender = userInfo.gender; //性別 0:未知、1:男、2:女 var province = userInfo.province; var city = userInfo.city; var country = userInfo.country; resolve(userInfo); }, fail: res => { wx.showModal({ title: '友情提醒', content: '請允許微信獲得授權!', confirmText: "授權", showCancel: false, success: res => { resolve(null); } }); } }); } }) }
注:除錯基礎庫版本可以在這裡設定:設定選單->專案設定->除錯基礎庫
3、但是如果我們想用自己遊戲專案中的按鈕來進行請求授權呢?我們可以再遊戲中傳遞一個按鈕(如開始按鈕)在遊戲中的相對座標和相對大小給platform.js進行處理。
先在登入介面初始化後直接呼叫runGame,將4個相關引數傳遞給getUserInfo函式
在getUserInfo函式裡獲取微信介面大小,然後將微信小遊戲提供的按鈕XX設定成和我們的開始遊戲按鈕相同的比例大小,覆蓋在我們的遊戲開始按鈕上,同時將按鈕XX設定成不可見
getUserInfo(xPercent, yPercent, wPercent, hPercent) { let sysInfo = wx.getSystemInfoSync(); //獲取微信介面大小 let width = sysInfo.screenWidth; let height = sysInfo.screenHeight; return new Promise((resolve, reject) => { let sysInfo = wx.getSystemInfoSync(); let sdkVersion = sysInfo.SDKVersion; //sdkVersion = sdkVersion.replace(/\./g, ""); //sdkVersion = sdkVersion.substr(0, 3); //let sdkVersionNum = parseInt(sdkVersion); //console.log("platform獲取使用者授權:", sdkVersionNum); //if (sdkVersionNum >= 201) { if (sdkVersion >= "2.0.1") { var button = wx.createUserInfoButton({ type: 'text', text: '', //image: "resource/assets_game/main/button_wx_getuserinfo.png", style: { left: width*xPercent, top: height*yPercent, width: width*wPercent, height: height*hPercent, //backgroundColor: '#ff0000', //color: '#ffffff', } }); button.onTap((res) => { if(res.userInfo){ console.log("使用者授權:", res); var userInfo = res.userInfo; var nickName = userInfo.nickName; var avatarUrl = userInfo.avatarUrl; var gender = userInfo.gender; //性別 0:未知、1:男、2:女 var province = userInfo.province; var city = userInfo.city; var country = userInfo.country; button.destroy(); resolve(userInfo); } }); }else { wx.getUserInfo({ withCredentials: true, success: res => { var userInfo = res.userInfo; var nickName = userInfo.nickName; var avatarUrl = userInfo.avatarUrl; var gender = userInfo.gender; //性別 0:未知、1:男、2:女 var province = userInfo.province; var city = userInfo.city; var country = userInfo.country; resolve(userInfo); }, fail: res => { wx.showModal({ title: '友情提醒', content: '請允許微信獲得授權!', confirmText: "授權", showCancel: false, success: res => { resolve(null); } }); } }); } }) }
4、一些效果圖如下:
當允許授權之後,那個授權按鈕便會被移除