1. 程式人生 > >Egret:針對微信官方的授權按鈕,對遊戲中的授權進行處理優化

Egret:針對微信官方的授權按鈕,對遊戲中的授權進行處理優化

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、一些效果圖如下:

當允許授權之後,那個授權按鈕便會被移除