Requirements: you need to create an information registration page with an authorized mobile phone number and profile picture nickname

Solution:

An unwritten rule of wechat ecology is to protect user privacy and prevent harassment, so any need to obtain any information should be clicked by the user to trigger the authorization interface, and the platform cannot actively pop up the authorization prompt page. OpenType is used to select the information type

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

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

Copy the code
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 invalid '); 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' }) } }) } }) } }) }, }) }Copy the code
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 failed '); 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: "Authorization failed!" , icon: 'none' }) } }Copy the code