【小白问题】微信小游戏登录，使用typescript 实现，如何引入 wx ?

Creator 2.x
#1

我看有人这么实现的 ：https://forum.cocos.org/t/topic/59921
想问一下 其中 wx 这个头文件该如何引入？

大家是如何实现小游戏登录的，给个思路，有段简单的代码更好。

先谢谢了 ~

#2

你说的是wx.d.ts吗？

下面是登录


export class WXSDK {
    public static isWeChat(): boolean {
        return cc.sys.platform == cc.sys.WECHAT_GAME;
    }

    private static _loginCode: String = ""

    public static login() {
        console.log("微信登录");
        wx.login({
            success(res) {
                if (res.code) {
                    console.log("login_success:", res);
                    WXSDK._loginCode = res.code;
                    WXSDK.getSetting();
                } else {
                    console.log('登录失败！' + res['errMsg'])
                }
            }
        })
    }

    private static getSetting() {
        wx.getSetting({
            success(res) {
                if (res.authSetting['scope.userInfo']) {
                    console.log("用户已授权，下一步getUserInfo");
                    WXSDK.getUserInfo();
                } else {
                    wx.authorize({
                        scope: 'scope.userInfo',
                        success () {
                            console.log("用户已授权，下一步getUserInfo");
                            WXSDK.getUserInfo();
                        },
                        fail(){
                            console.log("用户没有授权");
                        }
                    })
                }
                
            }
        })
    }

    private static getUserInfo() {
        wx.getUserInfo({
            success: function (res) {
                console.log("res:", res)
                let data = {
                    "code": WXSDK._loginCode,
                    "rawData": res.rawData,
                    "signature": res.signature,
                    "encryptData": res.encryptedData,
                    'iv': res.iv,
                    'encryptedData': WXSDK.replacenormalcharacter(res.encryptedData),
                    "userInfo": res.userInfo,
                }
            }
        })
    }

    private static replacenormalcharacter(normalcharacterstr: string) {
        return normalcharacterstr.replace(/\=/g, "~").replace(/\//g, "_").replace(/\+/g, "-");
    }

}
1赞
#3

写个namespce，然后把要用到的接口都在里面命名好就好了
declare namespace wx {
export function login(params?: { timeout?: number, fail?: (res: any) => void, success?: (res: { code: string }) => void, complete?: () => void }): void;
}

#4

解压完就是wx.d.ts了
wx.d.zip (19.2 KB)

1赞
#5

好的，非常感谢。把这个引入直接调用就可以了吧。

#6

嗯嗯嗯嗯嗯嗯

#7

放到项目里就有代码提示了

#8

如果authorize获取授权失败需要手动创建用户信息按钮

    createAuthorizeBtn(btnNode: cc.Node) {
        let self = this;
        let btnSize = cc.size(btnNode.width + 10, btnNode.height + 10);
        let frameSize = cc.view.getFrameSize();
        let winSize = cc.director.getWinSize();
        //适配不同机型来创建微信授权按钮
        let left = (winSize.width * 0.5 + btnNode.x - btnSize.width * 0.5) / winSize.width * frameSize.width;
        let top = (winSize.height * 0.5 - btnNode.y - btnSize.height * 0.5) / winSize.height * frameSize.height;
        let width = btnSize.width / winSize.width * frameSize.width;
        let height = btnSize.height / winSize.height * frameSize.height;

        let btnAuthorize = wx.createUserInfoButton({
            type: 'text',
            text: '',
            style: {
                left: left,
                top: top,
                width: width,
                height: height,
                lineHeight: 0,
                backgroundColor: '',
                color: '#ffffff',
                textAlign: 'center',
                fontSize: 16,
                borderRadius: 4
            }
        })

        btnAuthorize.onTap((uinfo) => {
            console.log("onTap uinfo: ", uinfo);
            if (uinfo.userInfo) {
                wx.showToast({ title: "授权成功" });
                self.getUserInfo();
            } else {
                console.log("wxLogin auth fail");
                wx.showToast({ title: "授权失败" });
            }
        });
    }
1赞
#9

:grinning: 大哥人真好 ~~ 谢谢代码