ミニ プログラムのカプセル化コンポーネントの単純なケース。すべてのミニ プログラム (受信パラメーター、外部スロー イベント、受信スタイル) に適用できます。

• これは元々カプセル化されてuniappボタンで使用されていましたが、uniappボタン プラットフォームが一部の属性をサポートしていないため、もう一度カプセル化しました。

1. ファングループを追加するボタンをカプセル化します。

• ネイティブ エディターで、フォルダーを右クリックして新しいコンポーネントを作成し、group-buttonコンポーネント フォルダーを作成します。

• group-button - index.js

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

• group-button - index.json

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

• group-button - index.ttml

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

2. ページ内での使用

• home - index.js

  const app = getApp()
  
  Page({
        
        
    data: {
        
        
  
    },
    onLoad: function () {
        
        
      console.log('Welcome to Mini Code')
    },
    handleJoinGroup(e) {
        
        
      console.log(e.detail)
    }
  })
  

• home - index.json

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

• group-button - index.ttml

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