鴻蒙入門指南，小白速來！從萌新到高手，怎樣快速掌握鴻蒙開發？【課程入口】
目錄：
1、新建組件
2、前端設計
3、頁面使用
4、屬性傳入
5、自定義事件
6、《從微信小程序到鴻蒙js開發》系列文章合集
在項目開發中，有些業務需求是需要通過多個組件共同實現的。為了便於模塊化管理，減少代碼的冗余，我們可以使用自定義組件，將多個組件融合成為一個組件。這部分官方文檔中個人感覺講述的不夠詳細和連貫，在此做一個總結。
1、新建組件
在項目工程目錄上右鍵, New, JS Component即可新建一個組件，目錄自動生成在js文件夾中，與default平級。
2、前端設計
自定義組件的目錄結構和頁面一致，這里做一個購物車中可以增加和減少商品個數的組件。
hml視圖層：
<div class="container">
<text class="icon"> - </text>
<text class="cnt"> 1 </text>
<text class="icon"> + </text>
</div>
css渲染層：
.container {
height: 60px;
width: 240px;
border: 1px solid #bbbbbb;
border-radius: 30px;
}
.container>text {
height: 100%;
line-height: 60px;
text-align: center;
color: #333333;
}
.icon {
width: 70px;
font-size: 40px;
}
.cnt {
width: 100px;
background-color: #eeeeee;
font-size: 36px;
}組件無法像頁面一樣在遠程設備中直接查看，但可通過IDE的Previewer查看效果。
3、頁面使用
在需要使用該組件的頁面中通過element標簽引入。該標簽可與最外層div平級，個人習慣將它們寫在最上面。
<element name="counter" src="../../../cart_counter/pages/index/index.hml"></element>name屬性指定組件標簽名，src指向該組件的hml文件。
使用組件，和已有組件一樣，用自定義的標簽引入即可。若element中沒有指定name屬性，則和hml文件名一致。
<counter></counter>看一眼效果：
4、屬性傳入
商品的索引、購買件數等屬性需要在頁面中通過屬性傳入。在自定義組件的js文件的data中，定義一個鍵為"props"的字符串數組，其中存放所有該組件支持的屬性。
export default {
data: {
props: ['goodsCnt', 'itemIdx']
},
}視圖層即可直接通過動態綁定取得屬性值。
<div class="container">
<text class="icon"> - </text>
<text class="cnt">
{{ goodsCnt }}
</text>
<text class="icon"> + </text>
</div>在使用該組件的頁面中，通過 屬性key="屬性value" 即可將屬性傳入組件。這里需注意自定義組件的屬性定義和使用采用駝峰命名法，使用該組件屬性時采用短橫線分隔命名法，對應的屬性值才可以正常傳遞。
<counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}"></counter>這樣就可以讓組件綁定索引值，並顯示商品選擇的個數了。
5、自定義事件
點擊“+”或“-”，對應商品的選擇個數可以隨之變化，這個組件的功能就完成了。這就要用到自定義事件。
自定義組件視圖層，綁定點擊事件：
<div class="container">
<text class="icon" onclick="minus({{ itemIdx }})">
-
</text>
<text class="cnt">
{{ goodsCnt }}
</text>
<text class="icon" onclick="add({{ itemIdx }})">
+
</text>
</div>
自定義組件邏輯層，定義對應方法。
export default {
data: {
props: ['goodsCnt', 'itemIdx']
},
minus(idx) {
this.$emit("minus", {idx});
},
add(idx) {
this.$emit("add", {idx});
}
}在自定義組件方法中可進行一些處理，也可通過this.$emit()直接將事件拋給組件使用者進行處理。方法有兩個參數，第一個參數指定使用組件時的事件名，第二個對象參數將數據傳給使用組件時觸發的事件。
<counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}" onminus="minusCarts" @add="addCarts"></counter>使用自定義組件時，可用"on+方法名"或"@+方法名"綁定事件處理的方法。由自定義組件傳過來的值可通過"event.detail.指定的key"取出。這里的命名規范和屬性一致，在自定義組件中定義方法采用駝峰命名法，使用組件時綁定方法的屬性使用短橫線分割命名法。
// 減少一個商品
minusCarts(e) {
let idx = e.detail.idx;
let item = this.carts[idx];
if (item.number == 1) {
prompt.showToast({
message: "至少購買1件商品哦",
duration: 3000
});
} else {
this.carts[idx].number--;
this.totalPrice -= this.carts[idx].price;
if (this.carts[idx].checked == 1) {
this.nowPrice -= this.carts[idx].price;
}
this.updateNumber(idx);
}
},
// 添加一個商品
addCarts(e) {
let idx = e.detail.idx;
this.carts[idx].number++;
this.totalPrice += this.carts[idx].price;
if (this.carts[idx].checked == 1) {
this.nowPrice += this.carts[idx].price;
}
this.updateNumber(idx);
},大功告成。
微信小程序的自定義組件相對來說就比較復雜了，且在js中的寫法和頁面差距也較大。個人感覺，鴻蒙js的自定義組件開發方式更容易上手，配置和冗余功能少。下面貼出微信小程序一個自定義組件的小demo。
自定義組件wxml：
<view class="parent">
<view class="text">{{text}}</view>
<input type="{{type}}" placeholder="{{placeholder}}" name="{{name}}" onblur="blur" disabled="{{disabled}}"></input>
</view>自定義組件js：
Component({
properties: {
text:{
type: String,
value: "輸入:"
},
type:{
type: String,
value: "text"
},
placeholder:{
type: String,
value: "請輸入內容"
},
name:{
type: String,
value: null
},
disabled:{
type: Boolean,
value: false
}
},
data: {
},
methods: {
blur(event){
this.triggerEvent("blur", event.detail)
}
}
})
自定義組件json：
{
"component": true,
"usingComponents": {}
}頁面wxml：
<myInput text="用戶名" placeholder="請輸入用戶名" type="text" onblur="blur"></myInput>
頁面js：
Page({
data: {
},
blur(e) {
wx.showToast({
title: e.detail.value,
duration: 3000,
icon: 'none'
})
},
}頁面json：
{
"usingComponents": {
"myInput": "/component/myInput/myInput"
}
}
作者：Chris.
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com