为了提高用户对小程序安全的可信度,一般要在用户的操作下获取用户信息,而不是在用户刚一进入小程序小程序就自动获取了用户信息
获取前的简洁页面
获取后的简洁界面
"获取用户信息"按钮(有open-type="getUserInfo"属性)点击会弹出一个窗口,询问用户允许还是拒绝获取用户信息,并通过给按钮绑定事件(bindgetuserinfo=“haddleGetUserInfo”)获取用户是否允许,若允许,则进行wx.getUserInfo()获取用户信息,将获取的新的信息更(setData)换掉data里旧的信息,同时将按钮设为display:none
弹出的窗口:
废话不多数上代码
代码展示:
wxml:
<view class="container">
<image src="{{userInfo.avatarUrl}}"></image>
<button bindgetuserinfo="haddleGetUserInfo" class="getusername" open-type="getUserInfo" style='display:{{attention ? "block" : "none"}}'>获取用户信息</button>
<text>Hello{{userInfo.nickName}}</text>
<button class="btn" >开启小程序之旅</button>
</view>
wxss:
.container{
display:flex;
flex-direction: column;
align-items: center;
position: relative;
}
image{
height:200rpx;
width:200rpx;
border-radius: 100rpx;
margin:200rpx 0;
}
text{
margin-bottom: 100rpx;
}
.btn{
background-color: aqua;
}
.getusername{
position: absolute;
top:250rpx;
left:200rpx;
}
js:
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
attention:true,
userInfo:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getuserinfo();
},
getuserinfo(){
//判断用户是否授权
wx.getSetting({
success:(data)=>{
if(data.authSetting['scope.userInfo']){
this.setData({
attention:false
});
}else{
this.setData({
attention:true
});
}
}
})
//获取用户登录的信息
wx.getUserInfo({
success:(data)=>{
this.setData({
userInfo:data.userInfo
})
}
})
},
haddleGetUserInfo(data){
//判断用户点击是否允许
if(data.detail.rawData){
//用户点击允许
this.getuserinfo();
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})