前言

在日常開發(fā)中，有頁面之間有很多相似的組件，我們可以對其相似的代碼塊進(jìn)行封裝，進(jìn)行復(fù)用

一、封裝組件的意思

高內(nèi)聚性，
組建功能必須是完整的，如我要實(shí)現(xiàn)下拉菜單功能，那在下拉菜單這個(gè)組件中，就把下拉菜單所需要的所有功能全部實(shí)現(xiàn)。
低耦合度
代碼獨(dú)立不會(huì)和項(xiàng)目中的其他代碼發(fā)生沖突。在實(shí)際工程中，我們經(jīng)常會(huì)涉及到團(tuán)隊(duì)協(xié)作，
傳統(tǒng)按照業(yè)務(wù)線去編寫代碼的方式，就很容易相互沖突，所以運(yùn)用組件化方式就可大大避免這種沖突的存在、
每一個(gè)組件都有子集清晰的職責(zé)，完整的功能，較低的耦合便于單元測試和重復(fù)利用。
標(biāo)記鮮明，容易維護(hù)
組件化后，我們只需要對對應(yīng)的組件進(jìn)行維護(hù)，不會(huì)影響到其它文件。而且文件結(jié)構(gòu)清楚，方便后臺(tái)人員的使用。
塊狀化結(jié)構(gòu)，并且方便擴(kuò)展
提高開發(fā)效率、方便重復(fù)使用、簡化調(diào)試步驟、提升整個(gè)項(xiàng)目的可維護(hù)性、 便于協(xié)同開發(fā)

二、使用步驟

第一步

先在根目錄下創(chuàng)建一個(gè)component文件夾

在里面創(chuàng)建一個(gè)目錄wMyTop文件夾，然后右鍵點(diǎn)擊Component創(chuàng)建一個(gè)組件輸入wMyTop，回車

然后在wMyTop.json中把"component": true,改為true，意思就是開啟組件，這個(gè)是一個(gè)組件。

第二步

<view id="w-my-top"> 
  <view id="t_seckill">
    <view class="l_seckill"></view>
    <view id="c_seckill">
      <!-- <slot name="iconfont"></slot> -->
      <text>111
        <!-- <slot name="title"></slot> -->
      </text>
    </view>
    <view class="l_seckill"></view>
  </view>
</view>
<!-- 這里我留了一個(gè)坑，用的是id選擇器 -->

然后在需要使用這個(gè)組件的頁面的.json內(nèi)注冊引入

{
  "usingComponents": {
    "w-my-top":"../../components/wMyTop/wMyTop"  //這里用相對路徑引入
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

在home.wxml內(nèi)作為標(biāo)簽使用

  <w-my-top></w-my-top>

結(jié)果只出現(xiàn)了111三個(gè)字 樣式都沒有出現(xiàn)

注意：在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標(biāo)簽名選擇器。
這就是原因所在，寫這篇文章的原因就是因?yàn)槲矣昧薸d選擇器，導(dǎo)致我找了好久，最后把id改為class就好了

<view class="w-my-top">
  <view class="t_seckill">
    <view class="l_seckill"></view>
    <view class="c_seckill">
      <!-- <slot name="iconfont"></slot> -->
      <text>111
        <!-- <slot name="title"></slot> -->
      </text>
    </view>
    <view class="l_seckill"></view>
  </view>
</view>

/* components/wMyTop/wMyTop.wxss */
/*	我這里使用了sass預(yù)處理器   不會(huì)用的小伙伴可以看我下一篇文章	*/
.w-my-top{
  background-color: #000000;
  .t_seckill {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    background-color: #000;
    /* 左右=====線 */
    .l_seckill {
      width: 30%;
      border-bottom: 1rpx solid rgb(196, 194, 194);
    }
  
    /* ====標(biāo)題==== */
    .c_seckill {
      font-size: 30rpx;
  
      .iconfont {
        color: #f74946;
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }
}

這個(gè)組件我用了插槽 小程序插槽和Vue差不多

    <w-my-top>
      <view slot="name">12123</view>
    </w-my-top>

好啦 一個(gè)簡單的組件就此完成啦 快去試試吧 后期會(huì)追加組件如何傳值文章來源地址http://www.zghlxwxcb.cn/news/detail-494431.html

到了這里，關(guān)于微信小程序封裝組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！