踩坑记录之【微信小程序授权信息】

需求：需要做一个信息登记页面，在该页面用授权手机号和头像昵称

解决思路：

微信生态的一个潜规则是保护用户隐私防骚扰，所以任何需要获取任何信息都要用户自己点击按钮，触发授权界面，平台不能主动弹出授权提示页面。通过openType来选择信息类型

<Button openType='getUserInfo' className='nickNameButton' onGetUserInfo={this.getNickName.bind(this)} ></Button>

<Button open-type="getPhoneNumber" className='phoneNumberButton' onGetPhoneNumber={this.getPhoneNumber.bind(this)} ></Button>

    getNickName(e) {
        let { detail } = e;
        wx.checkSession({
            success: res => {
                if (detail && detail.iv) {
                    let params = {
                        "encryptedData": detail.encryptedData,
                        "iv": detail.iv
                    }
                    api.put('api/frontend-app/wechat/user', params).then(res => {
                        let { data: { code, message } } = res
                        if (code == 200) {
                            this.setState({ nickName: res.data.data.nickname, nickNameColor: 'black' })
                        } else {
                            Taro.showToast({ title: message, icon: 'none' })
                        }
                    })
                }
            },
            fail: res => {
                console.log('sessinKey 失效');
                Taro.login({
                    success: res => {
                        api.post('api/security/authentication/wechat', { code: res.code }).then(res => {
                            let { data: { data } } = res;
                            this.setState({ userInfo: data });
                            let createTime = new Date();
                            Taro.setStorage({ key: 'createTime', data: createTime });
                            Taro.setStorage({
                                key: "userInfo",
                                data: data
                            })
                            if (detail && detail.iv) {
                                let params = {
                                    "encryptedData": detail.encryptedData,
                                    "iv": detail.iv
                                }
                                api.put('api/frontend-app/wechat/user', params).then(res => {
                                    let { data: { code, message } } = res
                                    if (code == 200) {
                                        this.setState({ nickName: res.data.data.nickname, nickNameColor: 'black' })
                                    } else {
                                        Taro.showToast({ title: message, icon: 'none' })
                                    }
                                })
                            }
                        })
                    }
                })
            },
        })
    }

    getPhoneNumber = (e) => {
        const { detail: { encryptedData, errMsg, iv } } = e;
        if (errMsg == 'getPhoneNumber:ok') {
            const params = { encryptedData, iv };
            Taro.checkSession({
                success: res => {
                    api.put('api/frontend-app/wechat/user/mobile', params).then(res => {
                        let { data: { code, message } } = res;
                        if (code == 200) {
                            this.setState({ phoneNumber: res.data.data, phoneNumberColor: 'black' })
                        } else {
                            Taro.showToast({ title: message, icon: 'none' });
                        }
                    })
                },
                fail: res => {
                    console.log('sessionKey 失效');
                    Taro.login({
                        success: res => {
                            api.post('api/security/authentication/wechat', { code: res.code }).then(res => {
                                let { data: { data } } = res;
                                this.setState({ userInfo: data });
                                let createTime = new Date();
                                Taro.setStorage({ key: 'createTime', data: createTime });
                                Taro.setStorage({
                                    key: "userInfo",
                                    data: data
                                })
                                api.put('api/frontend-app/wechat/user/mobile', params).then(res => {
                                    let { data: { code, message } } = res;
                                    if (code == 200) {
                                        this.setState({ phoneNumber: res.data.data, phoneNumberColor: 'black' })
                                    } else {
                                        Taro.showToast({ title: message, icon: 'none' })
                                    }
                                })
                            })
                        }
                    })
                }
            })
        } else {
            Taro.showToast({ title: "授权失败 !", icon: 'none' })
        }
    }