wxml檔案內容

<view class="container">

<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

</view>

<view class="usermotto">

<text class="user-motto">{{motto}}</text>

</view>

</view>
 

js檔案 

const app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse('button.open-type.getUserInfo')

},

//事件處理函式

bindViewTap: function () {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse) {

// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回

// 所以此處加入 callback 以防止這種情況

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

// 在沒有 open-type=getUserInfo 版本的相容處理

wx.getUserInfo({

success: res => {

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

});

}

})

}

},

getUserInfo: function (e) {

console.log(e);

var errMsg = e.detail.errMsg;

if (errMsg == "getUserInfo:ok") {

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

wx.navigateTo({

url: '../logs/logs',

})

} else {

wx.showModal({

title: '提示',

content: '請重新獲取授權',

})

}

}

})