注意:首先微信小程序是不能一进入小程序就让用户授权登录的,一进入小程序就让用户授权登录,是审核不通过的;
图一的这个提示框是我自己写的;要想弹出微信的微信授权提示框,必须用一个按钮来触发,可用授权登录这个按钮来让微信授权这个弹窗显示,具体代码如下:
index.wxml
<view class="tc" wx:if="{{isShow}}" bindtap="hidden">
<view class="inner" wx:if="{{isShow}}">
<view class='header'>
<image src='../../image/logo.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button>
</view>
</view>
index.wcss
/* 授权提示框css,start */
.tc {
position: fixed;
top: 0;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 900;
}
.inner {
background: #fff;
margin: 0rpx 30rpx 0 30rpx;
padding: 0 30rpx;
height: 630rpx;
border-radius: 10rpx;
position: relative;
top: 18%;
z-index: 1000;
}
.header {
border-bottom: 1px solid #ccc;
text-align: center;
height: 300rpx;
margin: 0 auto;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 70rpx;
}
.content>view {
margin-top: 10rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 20rpx;
}
.bottom {
border-radius: 80rpx;
font-size: 35rpx;
padding: 25rpx 10rpx;
}
/* 授权提示框css,end */
index.js
bindGetUserInfo(e) {
if (e.detail.userInfo) {
//将e.detail.userInfo存入缓存
wx.setStorage({
key: "userInfo",
data: e.detail.userInfo
})
this.logIn();
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告' ,
content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!' ,
showCancel: false,
confirmText: '返回授权' ,
success: function(res) {
// 用户没有授权成功,不需要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
},
logIn() {
wx.login({
success: res => {
// 请求后台地址,使用 code 换取 openid 和 session_key 等信息
call.request_post("/counseling/webUserProfile/loginByWeiXin", {
code: res.code
},
res => {
// 成功会掉函数
},
err => {
// 失败回调函数
wx.showToast({
title: err.message
})
}
)
}
})
},