uni中没有详细的文档说明小程序如何调出授权界面,仔细研究和某度了之后发现,只需要将button的open-type改成getuserinfo,直接上代码
<template>
<view>
<!-- 账号密码输入框 -->
<view class="form">
<button open-type="openSetting">微信登录</button>
#<!-- #ifdef MP-WEIXIN-->
<button
v-if="canIUse"
open-type="getUserInfo"
@bindgetuserinfo=""
@getuserinfo="bindGetUserInfo"
withCredentials="true"
>登录</button>
<view v-else>请升级微信版本</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
passwd:'',
isShowOauth:false,
showProvider:{
weixin:false,
qq:false,
sinaweibo:false,
xiaomi:false
},
canIUse: uni.canIUse('button.open-type.getUserInfo')
}
},
onShow() {
},
onLoad() {
//APP显示第三方登录
// #ifdef APP-PLUS
this.isShowOauth=true;
// #endif
this.getProvider();
},
methods: {
bindGetUserInfo(e){
console.log(e.detail.userInfo);
},
wxLogin(){
uni.login({
provider: 'weixin',
success:loginRes=> {
uni.getUserInfo({
provider: 'weixin',
withCredentials:true,
success: function(infoRes) {
console.log(infoRes.userInfo)
},
fail(e) {
console.log(e);
}
});
console.log(JSON.stringify(loginRes));
uni.request({
method:"POST",
url:this.$config.url+'users/wxLogin',
data:{code:loginRes.code},
success(res ) {
console.log(res);
}
})
}
});
},
}
</script>
完美解决