您的位置：首页 > 移动开发 > 微信开发

微信小程序新的授权方式，获取用户信息

2018-08-17 12:27 1461 查看

摘要：小程序的获取用户接口改了，把以前自动弹窗改成了要主动去触发弹窗，虽然是改善了用户体验，但多了一步引导用户去授权。已经上线的不会影响，再次上线就影响了，所以记录一下过程。

流程：

一、wxml页面端：（主要是一个授权类型的按钮)

<view style='text-align: center; padding: 40rpx;' wx:if="{{sign}}">
<image src='../../images/logo.png' mode='widthFix'></image>
</view>

<view style='padding: 20rpx;' wx:if="{{sign}}">
<button type="primary" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hover-class="other-button-hover">授权应用</button>
<view wx:else>请升级微信版本</view>
</view>

二、wxss文件

image {
width: 200rpx;
height: 200rpx;
}

三、js文件

Page({

/**
* 页面的初始数据
*/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'),
sign:false
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this
// 查看是否授权
var token = wx.getStorageSync('token')
if (token == '' || token == undefined) {
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
that.bindGetUserInfo()
} else {
that.setData({
sign: true
})
}
}
})
}else{
}
},

/**
* 获取用户消息
*/
bindGetUserInfo: function (e) {
var that = this
// 调用登录接口
wx.getUserInfo({
success: function (res) {
var arr = JSON.parse(res.rawData)
var nickname = arr.nickName
wx.login({
success: function (res) {
var code = res.code
}
})
}
})
}

})

检查如果已经获取过用户信息了就直接跳到业务页面，未授权就获取权限

注意：如果只需要获取用户昵称和头像就不用去授权了，这一点是挺好的，只需要使用小程序提供的组件

wxml

<view class="userinfo-lu">
<view class="userinfo-avatar-lu">
<open-data  type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</view>

css

.userinfo-lu {
position: relative;
width: 750rpx;
height: 320rpx;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
margin-bottom: 20rpx;
}

.userinfo-avatar-lu {
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);
}

.userinfo-lu text {
font-size: 14px;
background-color: #c0c0c0;
border-radius:40%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航