欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序組件化開(kāi)發(fā)的實(shí)戰(zhàn)步驟

 更新時(shí)間：2022年09月15日 08:57:27   作者：專(zhuān)業(yè)bug開(kāi)發(fā)  
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開(kāi)始支持自定義組件開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下

前言

本來(lái)沒(méi)打算寫(xiě)這篇文章，因?yàn)樽约褐饕诟鉐ava相關(guān)的，前端的僅僅是使用。但是最近由于開(kāi)發(fā)人手不夠，一個(gè)人被迫開(kāi)啟全棧，一邊寫(xiě)接口一邊寫(xiě)頁(yè)面，剛好項(xiàng)目中有一個(gè)需求，所以嘗試使用自定義組件開(kāi)發(fā)這塊，開(kāi)始前淺淺看了一下開(kāi)發(fā)者文檔【微信開(kāi)發(fā)者文檔-組件化】。下面就一起來(lái)看一下吧。

項(xiàng)目需求

小程序中有一個(gè)頁(yè)面顯示四六級(jí)相關(guān)內(nèi)容，卡片內(nèi)容分為如下四種樣式，整體布局是一樣的，差異出現(xiàn)在細(xì)節(jié)的樣式，如果不考慮組件開(kāi)發(fā)，那我們直接寫(xiě)完一個(gè)，其他三個(gè)改一改樣式就可以了，這樣做雖然沒(méi)有什么不妥，但前端開(kāi)發(fā)也要有所追求，精簡(jiǎn)代碼必須得試試。接下來(lái)我們根據(jù)項(xiàng)目需求來(lái)使用一般方式和組件化方式淺試一下。

一般方式開(kāi)發(fā)

第一步：分析布局 根據(jù)UI設(shè)計(jì)分析其中一個(gè)的整體布局方式；

請(qǐng)?zhí)砑訄D片描述

第二步：編寫(xiě)代碼

選擇使用flex布局方式完成整體布局；實(shí)現(xiàn)細(xì)節(jié)不做贅述

<view class="cet-box-1">
<!-- 第一塊 -->
  <view class="cet-boxa-s">
    <view class="boxa-s-left">
      <view class="boxa-left-1">
        <text class="boxa-left-text-1">CET-4</text>
      </view>
      <text class="boxa-left-title-1">四級(jí)聽(tīng)力</text>
    </view>
    <view class="boxa-s-right-1">第一套聽(tīng)力</view>
  </view>

<!-- 第二塊 -->
  <view class="cet-boxb-s">
    <view class="boxb-s-left-1">2021.12</view>
    <view class="boxb-s-right-1">
      <text class="boxb-s-text-1">進(jìn)入環(huán)境</text>
    </view>
  </view>

<!-- 第三塊 -->
  <view class="cet-boxc-s">
    <view class="boxc-s-left">
      <image class="jinbi" src="/images/jinbi-s-1.png"></image>
      <text class="box-tip-1">2幣/天 | 10幣/周</text>
    </view>
  </view>
  <image class="tag-1" src="/images/cet-1.png"></image>
  
</view>
/* pages/CET/CET.wxss */
.cet-box-1 {
  /* 自動(dòng)布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 335px;
  height: 119px;
  background: linear-gradient(91.81deg, #3D4896 -0.63%, #7B85CF 69.88%);
  border-radius: 10px;
  margin-bottom: 22px;
}

.cet-boxa-s {
  /* 自動(dòng)布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 291px;
  height: 20px;
  margin-top: 14px;
  /* background-color: aqua; */
}

.boxa-s-left {
  /* 自動(dòng)布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: 120px;
  height: 20px;
  /* background-color: blue; */
}

.boxa-left-1 {
  /* 自動(dòng)布局 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 59px;
  height: 20px;
  background: #FFFFFF;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
  border-radius: 56px;
}

.boxa-left-title-1 {
  width: 56px;
  height: 20px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
}

.boxa-left-text-1 {
  width: 39px;
  height: 17px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #3D4896;
}

.boxa-s-right-1 {
  width: 70px;
  height: 20px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  color: #FFFFFF;
}

.cet-boxb-s {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 291px;
  height: 38px;
  margin-top: 8px;
  /* background-color: aquamarine; */
}

.boxb-s-left-1 {
  width: 95px;
  height: 38px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 27px;
  line-height: 38px;
  color: #FFFFFF;
}


.boxb-s-right-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 28px;
  background: #FFFFFF;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
  border-radius: 56px;
}


.boxb-s-text-1 {
  width: 64px;
  height: 22px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #3D4896;
}

.cet-boxc-s {
  display: flex;
  flex-direction: row;
  width: 291px;
  height: 20px;
  /* background-color: aqua; */
  align-items: center;
  margin-top: 8px;
}

.boxc-s-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 120px;
  height: 14px;
}

.jinbi {
  width: 14px;
  height: 14px;
}

.box-tip-1 {
  width: 90px;
  height: 14px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #FFFFFF;
  margin-left: 4px;
}

.tag-1 {
  position: absolute;
  width: 185px;
  height: 55px;
  z-index: 0;
  margin-top: 53px;
  margin-left: 115px;
}

第三步：效果預(yù)覽 實(shí)現(xiàn)的效果如圖；

請(qǐng)?zhí)砑訄D片描述

第四步：對(duì)比差異修改樣式 對(duì)比其他三個(gè)的差異，簡(jiǎn)單修改樣式后直接C、V完成；

請(qǐng)?zhí)砑訄D片描述

實(shí)現(xiàn)方式總結(jié)

按照布局簡(jiǎn)單實(shí)現(xiàn)一個(gè)以后復(fù)制粘貼修改樣式。缺點(diǎn)很明顯，代碼冗余、復(fù)用性差，可讀性差。

自定義組件開(kāi)發(fā)

第一步：新建文件夾和組件 新建組件文件夾和components

請(qǐng)?zhí)砑訄D片描述

第二步：編寫(xiě)wxml結(jié)構(gòu)文件 復(fù)制一個(gè)卡片的wxml文件到組件的wxml文件里

<view class="cet-box-1">
<!-- 第一塊 -->
  <view class="cet-boxa-s">
    <view class="boxa-s-left">
      <view class="boxa-left-1">
        <text class="boxa-left-text-1">CET-4</text>
      </view>
      <text class="boxa-left-title-1">四級(jí)聽(tīng)力</text>
    </view>
    <view class="boxa-s-right-1">第一套聽(tīng)力</view>
  </view>

<!-- 第二塊 -->
  <view class="cet-boxb-s">
    <view class="boxb-s-left-1">2021.12</view>
    <view class="boxb-s-right-1">
      <text class="boxb-s-text-1">進(jìn)入環(huán)境</text>
    </view>
  </view>

<!-- 第三塊 -->
  <view class="cet-boxc-s">
    <view class="boxc-s-left">
      <image class="jinbi" src="/images/jinbi-s-1.png"></image>
      <text class="box-tip-1">2幣/天 | 10幣/周</text>
    </view>
  </view>
  <image class="tag-1" src="/images/cet-1.png"></image>
  
</view>

第三步：修改組件差異樣式 我們?cè)诮M件的wxss文件里面寫(xiě)我們需要的四種樣式，這里我直接使用 橫線加數(shù)字 的方式標(biāo)明不同的樣式。這樣處理以后我們可以再來(lái)一個(gè)組件傳值，動(dòng)態(tài)決定使用什么樣式，如下圖所示。

第四步：使用組件傳值實(shí)現(xiàn)動(dòng)態(tài)樣式

我們使用組件的時(shí)候要根據(jù)傳遞的參數(shù)動(dòng)態(tài)決定使用的樣式，同時(shí)動(dòng)態(tài)顯示文字信息，比如四級(jí)聽(tīng)力、六級(jí)聽(tīng)力、第一套聽(tīng)力、第二套聽(tīng)力這些文字信息。

請(qǐng)?zhí)砑訄D片描述

第五步：在需要的頁(yè)面使用組件 在json文件引入組件；

請(qǐng)?zhí)砑訄D片描述

在wxml使用組件并動(dòng)態(tài)傳值；

請(qǐng)?zhí)砑訄D片描述

第六步：使用預(yù)覽

實(shí)現(xiàn)方式總結(jié)

我們把具有相同樣式的部分統(tǒng)一成一個(gè)組件，根據(jù)組件傳值的不同決定顯示效果，減少了代碼的耦合、有效對(duì)代碼進(jìn)行了復(fù)用，這里只是使用組件開(kāi)發(fā)的一個(gè)簡(jiǎn)單的例子，其實(shí)很多組件庫(kù)都是這么開(kāi)發(fā)的。

總結(jié)

前端開(kāi)發(fā)和后端開(kāi)發(fā)其實(shí)一樣，都是追求“高內(nèi)聚，低耦合”，所以如何使用最少的代碼實(shí)現(xiàn)效果一直是我們開(kāi)發(fā)者的追求，組件化開(kāi)發(fā)對(duì)于減少前端代碼冗余發(fā)揮了很大的作用。

到此這篇關(guān)于微信小程序組件化開(kāi)發(fā)的文章就介紹到這了,更多相關(guān)小程序組件化開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論