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

元件的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程式碼:呼叫按鈕元件 open-type為share 分享  slot為元件開啟的插槽

<!-- 分享按鈕 -->

<v-button class="share-btn" open-type="share">

<image class="share" slot="img" src="/images/icon/share.png"/>

</v-button>

接下來看在PC端測試的效果: