wxml页面：
<!--index.wxml--><view class="login" wx:if="{{!hasUserInfo && canIUse}}"> <view wx:if="{{canIUse}}" class='login'> <view class='header'> <view class='title'> <text>授权未来偶像</text> </view> <image src='../../image/logo.jpg'></image> </view> <view class='content'> <view>申请获取以下权限：</view> <text>获得你的公开信息(昵称，头像地址及性别)</text> </view> <button class='bottom' type='primary' open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权登录 </button> </view> <view wx:else>请升级微信版本</view></view>wxss样式：
/* 授权登陆弹框 */.login { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(000, 000, 000, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -9;}.header { background: #fff; text-align: center; width: 90%; height: 500rpx; position: absolute; top:50%; left:50%; margin-left: -45%; margin-top: -200rpx; border-radius: 5px;}.header image { width: 80rpx; height: 80rpx; border-radius: 40rpx; }.header .title { font-size: 40rpx; font-weight: 800; padding: 35rpx 0; }js:
getUserInfo: function(e) { if (e.detail.userInfo) { //获取number wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // console.log(res.code); } }) } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!', showCancel: false, confirmText: '返回授权', success: function(res) { if (res.confirm) { // console.log('用户点击了“返回授权”') } } }) } }微信小程序
