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

前言

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

export default class WXSdk {
    private tempCode: string = "";//临时登录code
    private appid: string = "wx1926f6b28ac7dbb3";//小程序appid，需要从微信平台获取，并填写在这里
    private secret: string = "745c05d78619ba02a06a003963007299";//小程序appSecret，需要从微信平台获取，并填写在这里
    private grant_type: string = "authorization_code";//固定值
    private openId: string = "";//用户唯一id
    private session_key: string = "";//会话密钥


    public nickName: string = "";
    public avatarUrl: string = "";//头像url

    private 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; //用户头像图片 url
                let 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: others
                            console.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：others
                                button.destroy();//此时删除按钮
                            }
                            else//说明用户点击 不允许授权的按钮
                            {
                                console.log("用户拒绝授权");
                                button.destroy();
                            }
                        }
                    );
                }
            }
        });
    }
}

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