微信小程序信息授权获取（头像，昵称，等）.pdfVIP

微信⼩程序信息授权获取（头像，昵称，等） 这⾥简单说⼀下微信⼩程序获取头像，昵称等信息，这⾥是将demo部分功能单独呈现，最后附上DEMO： ⼀、效果图： 这个功能⽐较简单就直接上代码 ⼆、代码部分 1、.WXML代码⽰例 view class=main view class=header image src={{thumb}} class=thumb/image text class=nickname{{nickname}}/text text class=about关于我们/text /view view class=address-box view class=address-manage navigator url=/pages/component/address/address地址管理/navigator /view view wx:if={{hasAddress}} class=address-list view{{address.name}}/view view{{address.phone}}/view view{{address.detail}}/view /view /view view class=orders-box button bindtap=getUserInfo获取信息/button /view /view 2、.JS代码⽰例 Page({ data: { thumb: , nickname: , orders: [], hasAddress: false, address: {}, canIUse: wx.canIUse(button.open-type.getUserInfo) }, onLoad() { var self = this; }, onShow() { var self = this; /** * 获取本地缓存 地址信息 */ wx.getStorage({ key: address, success: function (res) { self.setData({ hasAddress: true, address: res.data }) } }) }, getUserInfo: function () { var that = this wx.getUserProfile({ desc: 获取信息原因（编写⾃⼰的原因。例如：测试）, // 声明获取⽤户个⼈信息后的⽤途，后续会展⽰在弹窗中，请谨慎填写 success: (res) = { console.log(获取⽤户信息成功, res) that.setData({//添加及更新UI thumb: res.userInfo.avatarUrl, nickname:res.userInfo.nickName, }) }, fail: res = { console.log(获取⽤户信息失败, res) } }) } }) 3、.WXSS样式代码 .header{ position: relative; height: 160rpx; line-height: 100rpx; padding:30rpx 30rpx 30rpx 150rpx; box-sizing: border-box; background: #AB956D; font-size: 28r