小程序封装组件简单案例，所有小程序适用（传入参数、外抛事件、传入样式）

• 本来是封装好了，是给到 uniapp 中使用的，因为 uniapp 按钮部分平台不支持一些属性，所以自己二次封装。

一、封装一个加粉丝群的按钮

• 在原生编辑器中，右键文件夹新建组件，创建了一个 group-button 组件文件夹。

• group-button - index.js

  Component({
    // 支持外部传入class
    externalClasses: ['iclass'],
    data: {
    },
    properties: {
    },
    methods: {
      handleJoinGroup (e) {
        // 外抛事件
        this.triggerEvent('joinChange', e)
      }
    }
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• group-button - index.json

  {
    "component": true, // 组件必须配置
    "usingComponents": {}
  }
  1
  2
  3
  4

• group-button - index.ttml

   <button
      class="iclass"
      open-type="joinGroup"
      group-id="xxxxxxxxx"
      bindjoingroup="handleJoinGroup"
  >
      
      <slot />
  button> 
  1
  2
  3
  4
  5
  6
  7
  8
  9

二、页面中使用

• home - index.js

  const app = getApp()
  
  Page({
    data: {
  
    },
    onLoad: function () {
      console.log('Welcome to Mini Code')
    },
    handleJoinGroup(e) {
      console.log(e.detail)
    }
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

• home - index.json

  {
      "usingComponents": {
          "group-button": "../group-button/index"
      }
  }
  1
  2
  3
  4
  5

• group-button - index.ttml

  <view class="intro">
      <group-button iclass="btn" bindJoinChange="handleJoinGroup">加入粉丝群group-button>
  view>
  1
  2
  3