[TOC] ## 1.用戶登錄 不需要用戶授權 ``` <open-data type="userAvatarUrl" class="logo"></open-data> ``` ## 2.需授權 ``` <v-btn class="image-btn" openType="getUserInfo" bind:onGet="onGetUserInfo" wx:if="{{!authorized}}"> <image slot="image" src="/images/weixin.png" /> </v-btn> <image src="{{authorized?userInfo.avatarUrl:'/images/weixin.png'}}" class="logo" wx:if="{{authorized}}" /> ``` ### 2.1 js ``` Page({ /** * 頁面的初始數據 */ data: { userInfo: '', authorized: false, }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { /* 得到用戶的相關信息 */ this._authorized() }, //v-btn綁定事件 onGetUserInfo(event) { let userInfo = event.detail.userInfo; this.setData({ userInfo, authorized: true }) }, /* 判斷用戶是否授權 */ _authorized() { //獲取用戶的當前設置。返回值中只會出現小程序已經向用戶請求過的權限。3.6 wx.getSetting({ success: (res) => { console.log(res) /* scope.userInfo判斷用戶是否授權依據 */ if (res.authSetting['scope.userInfo']) { /* 獲取用戶信息 // 必須是在用戶已經授權的情況下調用*/ wx.getUserInfo({ success: (res) => { this.setData({ userInfo: res.userInfo, authorized: true }) } }) } } }) } }) ``` ### 2.2v-btn (組件image-button) ``` <button plain="{{true}}" open-type="{{openType}}" bindgetuserinfo="onGetUserInfo"> <!-- plain="{{true}}" 設置成透明--> <slot name="image"></slot> </button> ``` ### 2.3 image-button的js ``` properties: { openType:String }, options:{ multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, /** * 組件的方法列表 */ methods: { //得到用戶信息 onGetUserInfo(event){ const userInfo = event.detail.userInfo; this.triggerEvent('onGet',{ userInfo }) } } ```