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

基于小程序点击button,获取用户授权信息跟授权弹窗

2018-08-29 15:23 183 查看
版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/82183554

[code]//WXML
<!-- 外层视图背景 -->
<view class='cont'>
<!-- 头像 -->
<image class='list_img' src='{{image}}'></image>
</view>
<!-- button外层 -->
<view class='button'>
<!-- button按钮获取用户信息授权 -->
<button class='btn_sub' bindgetuserinfo='btn_sub' open-type="getUserInfo">点击获取头像昵称</button>
</view>
[code]/* pages/button/button.wxss */
/* 背景视图 */
.cont{
position: relative;
width: 100%;
height: 350rpx;
text-align: center;
background-color: beige;
}
/* 头像 */
.list_img{
position: relative;
top: 25%;
width: 144rpx;
height: 144rpx;
border-radius: 50%;
}
/* button外层视图 */
.button{
position: relative;
text-align: center;
top: 100rpx;
width: 100%;
height: 100rpx;
}
/* 按钮居中 */
.btn_sub{
width: 80%;
height: 100rpx;
background-color: aquamarine;
border: 0rpx;
}

 

[code]// pages/button/button.js
Page({

/**
* 页面的初始数据
*/
data: {
// 默认头像
image:"../../image/list_img.png"
},

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

},
// 获取授权用户信息
btn_sub:function(res){
// 声明一个变量接收用户授权信息
var userinfos=res.detail.userInfo;
// 判断是否授权  true 替换微信用户头像
if(userinfos!=undefined){

this.setData({
image: userinfos.avatarUrl
})
}else{
// false 默认头像
this.setData({
image: "../../image/list_img.png"
})
}
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

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

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: