完善功能:
- 通过open-data展示用户头像
- 授权页结合https://blog.csdn.net/weidong_y/article/details/79636386而来。
LOGIN.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<view wx:if="{{canIUse}}"> <view class='header'> <view class="userinfo-avatar"> <open-data type="userAvatarUrl"></open-data> </view> </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 wx:else>请升级微信版本</view> |
login.wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.header { position: relative; margin: 90rpx 0 90rpx 50rpx; width: 650rpx; height: 320rpx; color: #fff; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #ccc; } .userinfo-avatar { overflow:hidden; display: block; width: 160rpx; height: 160rpx; margin: 20rpx; margin-top: 50rpx; border-radius: 50%; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } .content { margin-left: 50rpx; margin-bottom: 90rpx; } .content text { display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } |
login.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
Page({ data: { //判断小程序的API,回调,参数,组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: function (res) { //从数据库获取用户信息 //that.queryUsreInfo(); //用户已经授权过 wx.switchTab({ url: '/pages/member/login/login' }) } }); } } }) }, bindGetUserInfo: function (e) { if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; //授权成功后,跳转进入小程序首页 wx.switchTab({ url: '/pages/member/index/index' }) } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!', showCancel: false, confirmText: '返回授权', success: function (res) { if (res.confirm) { console.log('用户点击了“返回授权”') } } }) } }, }) |

我的微信
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!