CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息

前言

微信小游戏接入微信登录还是很简单的，不像原生平台开发，还需要提供appid,appsecret等信息，并有一系列的和微信平台的交互，才能最终授权成功。
下面TS代码演示了，老的接入流程.

export default class WXSdk {private tempCode: string = "";//临时登录codeprivate appid: string = "wx1926f6b28ac7dbb3";//小程序appid，需要从微信平台获取，并填写在这里private secret: string = "745c05d78619ba02a06a003963007299";//小程序appSecret，需要从微信平台获取，并填写在这里private grant_type: string = "authorization_code";//固定值private openId: string = "";//用户唯一idprivate session_key: string = "";//会话密钥public nickName: string = "";public avatarUrl: string = "";//头像urlprivate loginSuccessCallback: any;private loginFailedCallback: any;public login(_successCallback: any, _failCallback: any): void {this.loginSuccessCallback = _successCallback;this.loginFailedCallback = _failCallback;this.checkSession();}private checkSession(): void {let obj: any = {success: () => {this.getUserInfo();},fail: () => {//登录状态过期，需要重新登录this.loginWX();}};}private loginWX(): void {let obj: any = {success: (code: string) => {this.tempCode = code;this.getAccessToken();},fail: () => {console.error("微信登录失败！");if (this.loginFailedCallback != null) {this.loginFailedCallback();}}};wx.login(obj);}private getUserInfo(): void {let data: any ={withCredentials: false,lang: "zh_CN",success: (res: any) => {let userInfo: any = res.userInfo;this.nickName = userInfo.nickName; //用户昵称this.avatarUrl = userInfo.avatarUrl; //用户头像图片 urllet gender: number = userInfo.gender //性别 0：未知、1：男、2：女let province: string = userInfo.province; //用户所在省份let city: string = userInfo.city; //用户所在城市let country: string = userInfo.country; // 用户所在国家console.log("获得用户信息成功，nickName:" + this.nickName + ",gender:" + gender + ",province:" + province + ",city:" + city + ",country:" + country);if (this.loginSuccessCallback != null) {this.loginSuccessCallback();}},fail: () => {this.checkSession(); //获取用户信息失败之后 继续去获取console.error(">>>>获取用户信息失败:" + this.tempCode);}}wx.getUserInfo(data);}private getAccessToken(): void {let url = "https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type={3}";url = StringExt.Format(url, this.appid, this.secret, this.tempCode, this.grant_type);let success = (res: any) => {let data = res.data;this.openId = data.openid; //用户唯一标识this.session_key = data.session_key; //会话密匙let errcode: number = data.errcode; //错误码let errMsg: string = data.errMsg; //错误信息if (errcode == -1) {console.error(">>>系统繁忙，此时请开发者稍候再试");Toast.ShowText("系统繁忙，此时请开发者稍候再试");} else if (errcode == 0) {//请求成功this.getUserInfo();} else if (errcode == 40029) {//code无效this.getUserInfo();}};let fail = () => {Toast.ShowText("获取登录凭证失败");console.error(">>>>>>>获取登录凭证失败");}this.request(url, success, fail);}private request(url: string, successCallBack: (res: any) => void, failBack: () => void): void {let requestData: any ={url: url,method: "GET",dataType: "json",success: (res: any) => {if (successCallBack != null) {successCallBack(res);}},fail: () => {if (failBack != null) {failBack();}console.error(">>>>>>请求url失败：" + requestData.url);}};let wxtem: any = wx;wxtem.request(requestData);}
}

目前微信小游戏貌似已经不支持这种方式了（反正我没有搞出来）。
PS:上述StringExt和Toast，请去我的github找代码。

如何接入

核心方法是调用wx.createUserInfoButton创建一个按钮，通过点击该按钮来获得授权信息。
示例代码如下：

export default class WXSdk {public static data: any = null;public static getUserName(): string {if (WXSdk.data == null) {return "某高人";}else {return WXSdk.data.userInfo.nickName;}}public static getAvatarURL(): string {if (WXSdk.data == null) {return "";}else {return WXSdk.data.userInfo.avatarUrl;}}public static Login(): void {let sysInfo = wx.getSystemInfoSync();let width = sysInfo.screenWidth;let height = sysInfo.screenHeight;wx.getSetting({success(res) {console.log("res.authSetting:" + res.authSetting);if (res.authSetting["scope.userInfo"]) {console.log("用户已授权");wx.getUserInfo({success(res) {console.log(res);WXSdk.data = res;//TODO: othersconsole.log("nickName:" + WXSdk.getUserName());console.log("avatarUrl:" + WXSdk.getAvatarURL());}});}else {console.log("用户未授权");//用户未授权的话，全屏覆盖一个按钮，用户点击任意地方都会触发onTap()，弹出授权界面let button = wx.createUserInfoButton({type: 'text',text: '',//不显示文字style: {left: 0,top: 0,width: width,height: height,// lineHeight: 40,backgroundColor: '#00000000',//设置按钮透明color: '#ffffff',textAlign: 'center',fontSize: 16,// borderRadius: 4}});button.onTap((res) => {if (res.userInfo) {console.log("用户授权：" + res);WXSdk.data = res;//TODO：othersbutton.destroy();//此时删除按钮}else//说明用户点击 不允许授权的按钮{console.log("用户拒绝授权");button.destroy();}});}}});}
}

上述代码中演示的是用户授权用户信息。授权用的是createUserInfoButton，获得用户信息使用到了scope.userInfo域。
另外还有还有诸如授权地理位置信息、授权运动信息、授权相册权限等。
更多详细信息参考 AuthSetting，权限

CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息相关推荐

微信小程序API----授权登录拿到用户头像昵称等信息
前端开发思路: 1.通过点击按钮,拿到code,传给后台,后台通过code换取session_key 和 openid 这个地方调取 wx.login 这个API 2.调取wx.getUserProf ...
微信小游戏接入遇到的坑
微信小游戏接入遇到的坑 1.微信web开发工具必须安装到C盘,才能被egret wing自动调取. 2.exml文件不能放在src文件夹,必现放在resource文件夹 3.egret Launche ...
【微信小程序/实现】实现获取微信个人信息
[微信小程序/实现]实现获取微信个人信息一.目的:实现获取微信个人的昵称和头像二.页面过程三.实现过程 (1)核心代码: (2)完整代码 1. wxml代码 2. wxss代码 3. js代码 ...
帧同步_微信小游戏接入“熊孩子噩梦”健康系统帧同步能力上线
3月31日,微信小游戏官方公众号"做个小游戏"发文宣布全新面向未成年人保护的健康系统已经上线,该系统联动"成长守护平台"的功能,可以更好助力家长群体对于未成年人 ...
Springboot开发微信小游戏后台-玩家登录流程
最近使用Springboot开发了一个微信小游戏的后台服务,为小游戏提供接口,其中登录需要前后端与微信服务端配合. 注意使用自己开发的服务作为小游戏后端,前提条件是必须要有域名+证书,提供https服 ...
微信小游戏egret.getDefinitionByName不能获取类的实例
前言:熟悉MVC框架的小伙伴都知道,在创建界面的时候一般使用egret.getDefinitionByName()来获取到类,从而可以实例化出一个界面类. 今天遇到一个问题:在本地调试好的项目,上到微 ...
《从0到1上线微信小游戏》第八节在微信开发者工具和手机上调试
第八节在微信开发者工具和手机上调试下载和配置微信开发者工具构建运行在微信开发者工具上调试在手机上测试虽然游戏能在Cocos Creator引擎的模拟器上正常运行,但这不代表移植到小程序上运 ...
微信小游戏提供服务器,发布到微信小游戏平台
发布到微信小游戏平台早在微信官方正式发布小游戏平台之前,Cocos Creator 团队就和微信开发团队合作完成了 Cocos Creator 对微信小游戏平台的支持.在小游戏正式公布之后,我们也在 ...
cocos微信小游戏开发-http请求-使用微信云函数-toast-loading-动态加载图片-添加触摸事件-微信分享-label点击事件-背景音乐音效-程序活动状态判断-性能优化
cocos开发微信小游戏相关-<益智推箱> 扫码查看功能,有需要可直接提问 Cocos Creator 3.4 用户手册 cocos creator基本操作微信开发文档|云函数 1. h ...

CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息

前言

如何接入

CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息相关推荐

最新文章

热门文章