這里簡單說一下微信小程序獲取頭像，昵稱等信息，這里是將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 = thiswx.getUserProfile({desc: '獲取信息原因（編寫自己的原因。例如：測試）', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫success: (res) => {console.log("獲取用戶信息成功", res)that.setData({//添加及更新UIthumb: 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: 28rpx;color: #fff; } .header .thumb{position: absolute;left: 30rpx;top: 30rpx;width: 100rpx;height: 100rpx;border-radius: 50%; } .header .about{float: right; }.address-box{border-bottom: 20rpx solid #ededed;color: #999;line-height: 90rpx;font-size: 28rpx; } .address-box .address-manage{position: relative;height: 90rpx;border-bottom: 1rpx solid #e9e9e9;text-align: center; } .address-box .address-manage::after{position: absolute;right: 30rpx;top: 34rpx;content: '';width: 16rpx;height: 16rpx;border-top: 4rpx solid #7f7f7f;border-right: 4rpx solid #7f7f7f;-webkit-transform: rotate(45deg);transform: rotate(45deg); } .address-box .address-list{padding-left: 30rpx; } .address-box .address-list view{height: 90rpx;border-bottom: 1rpx solid #e9e9e9; } .address-box .address-list view:last-child{border-bottom: 0; }.orders-box{color: #999;font-size: 28rpx; } .orders{height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #e9e9e9;text-align: center; } .orders-list{padding-left: 30rpx;border-bottom: 20rpx solid #ededed; } .orders-list:last-child{border-bottom: 0; } .orders-number{height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #e9e9e9; } .orders-detail{position: relative;height: 120rpx;padding: 35rpx 20rpx 35rpx 170rpx;border-bottom: 1rpx solid #e9e9e9; } .orders-detail image{position: absolute;left: 0;top: 20rpx;width: 150rpx;height: 150rpx; } .orders-detail view{line-height: 60rpx; } .orders-detail .orders-status{position: absolute;right: 20rpx;top: 35rpx;height: 120rpx;line-height: 120rpx;color: #b42f2d; } .orders-footer{height: 60rpx;line-height: 60rpx;color: #2f2f2f;padding:15rpx 30rpx 15rpx 0; } .orders-footer .orders-btn{float: right;width: 170rpx;height: 60rpx;line-height:60rpx;border-radius: 6rpx;background: #b42f2d;color: #fff; }

三、如果只獲取頭像與昵稱，不寫數據庫，只為展示，可以使用以下方式獲取，

1、.wxml代碼示例

<open-data type="userAvatarUrl"></open-data> //獲取用戶頭像直接顯示在小程序中 <open-data type="userNickName" lang="zh_CN"></open-data> //獲取用戶昵稱直接顯示在小程序中

?這樣可以直接展示頭像與昵稱

四、其他問題

1、目前微信小程序使用

wx.getUserInfo({success: function (res) {console.log(res);var avatarUrl = 'userInfo.avatarUrl';var nickName = 'userInfo.nickName';self.setData({...})}})

此方式獲取信息獲取不到任何信息。（已上線無影響，升級以及新開發需要注意）

2、獲取用戶信息失敗，錯誤：getUserProfile:fail can only be invoked by user TAP gesture.

在以下方式中獲取就會出現上圖中錯誤，?

onLoad() {var that = thiswx.getUserProfile({desc: '獲取信息原因（編寫自己的原因。例如：測試）', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫success: (res) => {console.log("獲取用戶信息成功", res)that.setData({//添加及更新UIthumb: res.userInfo.avatarUrl,nickname:res.userInfo.nickName,})},fail: res => {console.log("獲取用戶信息失敗", res)}})},

微信小程序最多的一個更改，就是用戶使用wx.getUserInfo（開發和體驗版）是不會彈出授權，正式版不受影響。

現在授權方式是需要引導用戶點擊一個授權按鈕，然后再彈出授權。

??DEMO?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-END

總結

以上是生活随笔為你收集整理的微信小程序信息授权获取（头像，昵称，等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。