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

卡尔特斯2023-09-15 23:00

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

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

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

group-button - index.js

js 复制代码

Component({
  // 支持外部传入class
  externalClasses: ['iclass'],
  data: {
  },
  properties: {
  },
  methods: {
    handleJoinGroup (e) {
      // 外抛事件
      this.triggerEvent('joinChange', e)
    }
  }
})

group-button - index.json

js 复制代码

{
  "component": true, // 组件必须配置
  "usingComponents": {}
}

group-button - index.ttml

html 复制代码

 <button
    class="iclass"
    open-type="joinGroup"
    group-id="xxxxxxxxx"
    bindjoingroup="handleJoinGroup"
>
    <!-- 支持组件显示外部内容 -->
    <slot />
</button>

二、页面中使用

home - index.js

js 复制代码

const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
    console.log('Welcome to Mini Code')
  },
  handleJoinGroup(e) {
    console.log(e.detail)
  }
})

home - index.json

js 复制代码

{
    "usingComponents": {
        "group-button": "../group-button/index"
    }
}

group-button - index.ttml

html 复制代码

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