微信小程序——组件的封装(暴露方法出去，在外部调用)

1.应用场景

我们在开发时，封装一个公共底部组件，该组件拥有两个部分，第一部分是电话报名，第二部分是表单报名。我们需要在很多页面中使用这个组件，并且电话报名和表单报名逻辑是不同的，只有样式是相同的。
此时，我们可以令这个组件暴露出两个方法供外部调用。

2.组件封装

html文件

comp.wxml

<!--底部报名表单组件-->
<view class="tapplyfooter">
  <view class="tapplyfooter-left">
    ...
  </view>
  <view class="tapplyfooter-center" 
    catchtap="callGroupNow" 
  >
    <image class="tapplyfooter-center-img" src="../../../assets/common/phone-white.svg" />
  </view>
  <button 
    class="tapplyfooter-right" 
    open-type="getPhoneNumber" 
    bindgetphonenumber="getApplyPhoneNumber"
  >
    表单报名
  </button>
</view>

js文件，暴露方法出去

// components/common/TApplyFooter/TApplyFooter.js
Component({
	  properties: {
	  },
	  data: {
	  },
  methods: {
    // 报名咨询
    callGroupNow:function(){
      this.triggerEvent('callGroupNow');   //将这个方法暴露出去，在父组件使用bindcallGroupNow调用
    },
    getApplyPhoneNumber:function(e){
      this.triggerEvent('getApplyPhoneNumber',e)； //将这个方法暴露出去，在父组件使用bindcallGroupNow调用,e是传递出去的数据
    }
  }
})

less文件，样式设置

comp.less

button::after{ border: none; }			// 去除button按钮默认边框
.tapplyfooter{
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */    底部安全距离
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */		底部安全距离
  position: fixed;
  bottom: 0;
  height: 120rpx;
  width: 100%;
  background: #ffffff;
  display: flex;

  &-left{
    width:308rpx;
    padding: 24rpx 32rpx;
    display: flex;
    align-items: center;
    .hasMarginImage{
      margin-right: 18rpx;
    }
  }

  &-center{
    flex-shrink: 0;
    width: 166rpx;
    background: linear-gradient(139deg, #94D56E 0%, #B0DD68 100%);
    display: flex;
    justify-content: center;
    align-items: center;

    &-img{
      display: inline-block;
      width: 48rpx;
      height: 48rpx;
    }
  }

  &-right{
    background: linear-gradient(139deg, #FFA544 0%, #FF781E 100%);
    width: 276rpx;
    text-align: center;
    line-height: 120rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
  }
}

3.父组件中引入

3.1 在app.json中将该组件注册

"t-apply-footer":"/components/common/TApplyFooter/TApplyFooter",

3.2 在页面中引入该组件

页面中引入该组件，并使用bind[暴露方法]形式定义该方法，bindcallGroupNow引用方法，callGroupNow页面中要执行的方法操作

page.wxml:

  <t-apply-footer 
  	bindcallGroupNow="callGroupNow" 
  	bindgetApplyPhoneNumber="getApplyPhoneNumber"
  />

page.js

callGroupNow: async function () {},				
getApplyPhoneNumber: async function (e) {},   // e为暴露方法时传递过来的参数

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~