首先,第一步,建立一個按鈕的元件,方便複用,當點選按鈕時候,會跳出是否授權的對話方塊:

元件的wxml程式碼:

<button  bind:getuserinfo="onGetUserInfo" open-type="{{openType}}" plain="{{true}}" class="container">
    <slot name="img"></slot>    
</button>

繫結事件onGetUserInfo 定義opentype屬性 slot標籤是一個元件插槽

元件的JS程式碼:

component({
  /**
   * 元件的屬性列表
   */
  //開啟插槽
  options:{
    multipleSlots:true
  },
  properties: {
    openType:{
      type:String
    }
  },

  /**
   * 元件的初始資料
   */
  data: {

  },

  /**
   * 元件的方法列表
   */
  methods: {
    onGetUserInfo(event){
      this.triggerEvent('getuserinfo',event.detail,{})
    }
  }
})
 

在JS中,定義options開啟元件的插槽:true

定義openType屬性的資料型別為字串,

在剛剛wxml程式碼的繫結的事件,編寫觸發器事件,獲取使用者資訊,getuserinfo

元件編寫完之後,在page頁面中進行應用,

首先開啟page頁面的json檔案:(進行配置 元件的呼叫)

page頁面的json程式碼:

{
    "usingComponents":{
       
        "v-button":"/components/image-button/index"
        
    }
}

上面的v-button就是我給剛剛的元件取得名字,可以拿到page頁面的wxml中進行呼叫

page頁面的wxml程式碼:

<!-- 未授權的時候 顯示click me圖片 -->
    <v-button wx:if="{{!authorized}}"
         open-type="getUserInfo" class="avatar-position"
                 bind:getuserinfo="onGetUserInfo">
        <image slot="img" class="avatar" src="/images/my/my.png"/>
    </v-button>
    <!-- 授權的時候 顯示獲取到的頭像 -->
    <view wx:if="{{authorized}}"
         class="avatar-container avatar-position">
        <image src="{{userInfo.avatarUrl}}" class="avatar"/>
        <text>{{userInfo.nickName}}</text>
    </view>
 

程式碼上已註釋了 ,如果未進行授權的時候,使用者頭像區域部分是一個點選我的圖片按鈕,

在元件標籤內 進行判斷 如果未授權  wx:if="{{!authorized}}" ,顯示click me的頭像 open-type為getuserinfo這個自帶的方法

繫結js檔案中的事件方法名 onGetUserInfo()  點選的時候 就會觸發這個事件

如果授權過了之後,那麼就是wx:if="{{authorized}}" 代表授權成功

然後進行渲染從JS中拿到的值 頭像內容和對應的名字

page頁面的js程式碼:

Page({
  data:{
    //切換授權頭像的變數
    authorized:false,
    userInfo:null,
  },
  onload(options){

    this.userAuthorized()

  },
  //判斷使用者是否已經授權過
  userAuthorized(){
    wx.getSetting({
      success:data=>{
        //使用者授權過
        if(data.authSetting['scope.userInfo']){
          wx.getUserInfo({
            success:data=>{
              this.setData({
                authorized:true,//代表已經授權
                userInfo:data.userInfo

              })
            }
          })
        }else{
          console.log('err')
        }

      }
    })
  },
  onGetUserInfo(event){
    const userInfo = event.detail.userInfo
    if(userInfo){//如果有值的話
      this.setData({
        userInfo:userInfo,
        authorized:true
      })
    }
    
  },
  
  


})

data方面定義兩個變數 一個是authorized 授權變數  一個是userInfo  使用者資訊

授權變數預設為false 未授權  使用者資訊預設為空 null

接下來,定義一個方法,進行判斷使用者是否授權:也就是userAuthorized() 這個方法

如果授權成功,那就進行資料繫結 this.setData更新 變數的值:authorized為true  代表授權了

如果沒有授權成功,就返回錯誤.

還有,定義另外一個方法,用來獲取使用者的資訊,如果獲取到了,同樣就是授權成功 authorized為true userInfo:userInfo

所以 我點選頭像進行使用者資訊授權,就可以獲取到我的資訊了

效果圖:

這邊稍微提一下:如果只是顯示使用者資訊的話,不用像上述的方法那麼麻煩,可以這樣:

使用open-data標籤就能顯示出來  但僅僅是顯示資訊 而不是獲取資訊  概念不一樣

<open-data type="userAvatarUrl" class="avatar avatar-position"/>

初次接觸小程式不到一個星期,歡迎評論多多交流,覺得有用的朋友,標個喜歡哦!