自定義組件

在小程序的components(組件)文件夾下新建一個(gè)文件夾，當(dāng)然命名根據(jù)組件的功能，類型…來定義是最好的。

這里選擇新建的component,直接輸入你要創(chuàng)建的組件名稱就可以，不需要后綴，創(chuàng)建完成后會自動生成相關(guān)文件的。
在.wxml文件中布局你要創(chuàng)建的組件

<view class="modal" hidden="{{!modalShow}}">
  <view class="panel">
    <i class="iconfont icon-quxiao" bind:tap="onClose"></i>
    <!-- slot插槽 -->
    <slot name="modal_content"></slot>
  </view>
</view>

在.wxss文件中寫入組件所要用到的css樣式

.modal{
  position: fixed;
  top:0;
  bottom: 0;
  left:0;
  right: 0;
  z-index: 999;
  text-align: center;
  background: rgba(0, 0, 0,0.6);
}
.panel{
  position: absolute;
  bottom: 0rpx;
  left: 0;
  width: 100%;
  min-height: 300rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}
.modal .icon-quxiao{
  position: absolute;
  right: 10rpx;
  top:10rpx;
  padding-left: 20rpx;
}

在.js文件寫組件的功能，及組件和頁面交互所要傳遞參數(shù)等邏輯代碼

如果你定義的這個(gè)屬性有默認(rèn)值的話，這樣寫就可以了

 properties: {
    modalShow:{
      type:Boolean,
      value:true
    }
  }

因?yàn)锽oolean類型默認(rèn)值為fals,所以上面代碼中就簡寫了。

組件外部樣式引用及插槽（slot）

  options:{
    styleIsolation:'apply-shared',
    multipleSlots:true
  },

在小程序開發(fā)中：默認(rèn)情況下，自定義組件的樣式只受到自定義組件 wxss 的影響。
styleIsolation：‘a(chǎn)pply-shared’：簡單來說就是，組件內(nèi)部的wxss樣式不會影響到你調(diào)用這個(gè)組件的頁面，而這個(gè)頁面的樣式會影響到組件。（每個(gè)頁面都是是可以引用到全局app.wxss這個(gè)樣式類的，所以只要claas名字一樣就可以影響到組件了。）
當(dāng)然styleIsolation還有其他屬性，詳情查看小程序開發(fā)文檔https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

這里組件中用到了外部引入的iconfont圖標(biāo)，小程序如何引入iconfont圖標(biāo)請查看
https://blog.csdn.net/weixin_37624974/article/details/108770431

在小程序開發(fā)中:默認(rèn)情況下，一個(gè)組件的 wxml 中只能有一個(gè) slot 。需要使用多 slot 時(shí)，可以在組件 js 中聲明啟用.
multipleSlots：true ( 啟用多slot支持)

如果啟用了多slot支持，組件不管定義了幾個(gè)插槽 slot 都必須有name屬性，如果不啟用，就不要寫name屬性，不然slot插槽就不會生效

組件調(diào)用

1，在.json文件中引入組件

2，.wxml

<view>
    <w-modal-pop  modalShow="{{modalShow}}">
     <view slot="modal_content">
        <button size="default" class="lgin" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">獲取用戶授權(quán)信息</button>
      </view>
    </w-modal-pop>
</view>

3，.wxss

.lgin {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  height: 80rpx;
  background-color: #d43c33;
  color: #fff;
  margin: 110rpx;
}

4，.js
效果：