微信小程式自定義組件開發圖文詳解-有解無憂

要實作的效果如下圖紅色框部分就是我們的自定義組件

在這里插入圖片描述

第一步：與pages同級新建一個components檔案夾，用于存放所有的自定義組件方便統一管理
在這里插入圖片描述

第二步：在這個components上滑鼠右鍵選擇新建compontent選項然后輸入一個自定義的名稱后確定例如我們新建一個group組件那我們就只需要辦理入group 即可然后我們就可以看到新建了4個檔案 group.js group.json group.wxml group.wxss 接下來我們就可以進行寫入代碼了

在這里插入圖片描述

**第三步：
在group.wxml 撰寫我們的html代碼
**

<!--components/group/group.wxml-->
<view class="grouprow">
  <view class="gline flexbetween">
    <view class="gtitle">超值拼團</view>
    <view class="flexbetween">
      <view>更多</view>
      <image src="https://6f6b-ok-cs14j-1302557158.tcb.qcloud.la/%E5%90%91%E5%8F%B3.png?sign=3bf0df3d7e4c5226f688f3e362f68098&t=1620009088"></image>
    </view>
  </view>
  <view class="maxline">
    <view class="gbox">
      <view class="gimg">
          <image src="https://6f6b-ok-cs14j-1302557158.tcb.qcloud.la/084341b48042d951aa841bd1a1efb0d5.png?sign=f76693333ed18c87647185fc6181b8ac&t=1619957805"></image>
           <view class="marktext">2人團</view>
      </view>
      <view class="price">￥120.00</view>
      <view class="oldprice">
        <del>￥260.00</del>
      </view>
    </view>
  </view>
</view>

**第四步：
在group.wxss 撰寫我們的css代碼
**
在這里插入圖片描述


/* 超時拼團 */

.grouprow {
  width: 710rpx;
  height: 400rpx;
  margin-left: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  margin-top: 10rpx;
}

.gline {
  padding: 20rpx;
  color: #777;
}

.gline .gtitle {
  font-size: 35rpx;
  font-weight: bold;
  color: #333;
}

.gline image {
  width: 30rpx;
  height: 30rpx;
}

.grouprow .maxline {
  height: 240rpx;
  padding: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.gbox {
  margin-right: 20rpx;
  line-height: 35rpx;
}

.gbox .gimg {
  width: 150rpx;
  height: 150rpx;
  position: relative;
}

.maxline .gbox image {
  width: 100%;
  height: 100%;
}

.gbox .price {
  color: #e53942;
  font-weight: bold;
  margin-top:15rpx;
}

.gbox .oldprice {
  color: #777;
  font-size: 22rpx;
  text-decoration: line-through;
}

.gbox .marktext {
  width: 100rpx;
  height: 30rpx;
  border-radius: 0 20rpx 20rpx 0;
  background: #b58025;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 24rpx;
}

.flexbetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

**第四步：寫到這里子組件的樣式已經完成了接下來就要在父組件頁面(index.wxml)展示子組件的頁面(group.wxml)了首先要在index.json里面撰寫如下代碼 **

在這里插入圖片描述

{
 
  "component": true,
  "usingComponents": {
    "group": "/components/group/group" // "group"就是組件的名字
  }
}

** 第五步：最后一步在index.wxml里面撰寫如下代碼**

在這里插入圖片描述

<group></group>

這樣就可以看到效果了
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/282906.html

標籤：其他

上一篇：Netflix如何在上萬臺機器中管理微服務？（史上最全）

下一篇：SpringBoot專案中利用Swagger搭建REST API 比 Postman香！

微信小程式自定義組件開發圖文詳解

要實作的效果如下圖 紅色框部分就是我們的自定義組件

要實作的效果如下圖紅色框部分就是我們的自定義組件