这里是uniapp的写法 原生写法要把 @getphonenumber改成bindgetphonenumber
uni.login API最好放在onLoad中先执行,如果接口响应异常的话再重新调用一次this.loginCodeClass()这样就会重新获取code之前的code已经失效。
uni.login不能在getphonenumber回调中获取code,否则可能会有几率导致状态刷新,后端匹配不了key。 但是在onLoad中获取的话code本身是存在时效性的,不过一般用户应该不会在授权页面停留太久.......,可以让后端给一个过期状态提示用户重新授权
<template>
<view class="login-box">
<button
open-type="getPhoneNumber"
@getphonenumber="onPhonenumberClick">
手机号码授权
</button>
</view>
</template>
<script>
export default {
data() {
return {
code: '',
encryptedData: '',
iv: ''
}
},
onLoad() {
this.loginCodeClass();
},
methods: {
/**授权手机号*/
onPhonenumberClick({ detail }) {
let { encryptedData, iv, errMsg } = detail;
//拒绝授权手机号将无法登录
if(errMsg == "getPhoneNumber:fail user deny") return;
this.encryptedData = encryptedData;
this.iv = iv;
//-----------将code,encryptedData, iv传给后端解密
// 如果接口请求失败需要重新调用this.loginCodeClass()更新新的code
},
/**获取code*/
loginCodeClass() {
uni.login({
provider: 'weixin',
success: (res) => {
this.code = res.code;
},
fail: () => {
reject('微信授权失败');
}
})
}
}
}
</script>