>[success] # 組件開發
1. 從`v1.6.3`開始, 小程序開始支持自定義組件開發, 也讓我們更加方便的在程序中使用組件化
>[info] ## 創建組件
1. 自定義組件由 **json wxml wxss js** 4個文件組成。
2. 先需要在 `json `文件中進行自定義組件聲明（將`component` 字段設為 `true `可這一組文件設為自定義組件）
3. 在`wxml`中編寫屬于我們組件自己的模板
4. 在`wxss`中編寫屬于我們組件自己的相關樣式
5. 在`js`文件中, 可以定義數據或組件內部的相關邏輯
6. 頁面引用自定義組件需要在`對應頁面.json` 文件的`usingComponents` 字段配置，`key `為組件名，`value`為地址
~~~
{
"usingComponents": {
"section-info": "/components/section-info/section-info",
"test-style": "/components/test-style/test-style",
"tab-control": "/components/tab-control/tab-control"
}
}
~~~
7. 全局在`app.json`的`usingComponents`聲明某個組件，那么**所有頁面和組件可以直接使用該組**
8. **自定義組件也是可以引用自定義組件的**，引用方法類似于頁面引用自定義組件的方式（使用`usingComponents `字段）
9. 自定義組件和頁面所在項目根目錄名 不能以 **wx-** 為前綴，否則會報錯
>[danger] ##### 組件案例
* 在組件的json文件聲明`component `字段 為true
* 像編寫頁面一樣編寫組件
* 如果只是指定頁面用在指定頁面的`index.json` `usingComponents` 編寫組件導入
* 導入后就可以直接在對應頁面使用
>[info] ## 組件的樣式
1. 組件內的class樣式，只對組件wxml內的節點生效, 對于引用組件的Page頁面不生效
2. 組件內不能使用**id選擇器、屬性選擇器、標簽選擇器**，就正常使用class 選擇器就好
>[danger] ##### 組件和頁面樣式影響
1. 外部使用`class`的樣式，只對外部`wxml`的`class`生效，對組件內是不生效的
2. 外部使用了`id`選擇器、**··**
3. 外部使用了**標簽選擇器，會對組件內產生影響**
4. 通過設置`Component`對象中，可以傳入一個`options`屬性個`styleIsolation`（隔離）屬性
* `isolated `表示啟用樣式隔離，在自定義組件內外，使用 class 指定的樣式將不會相互影響（默認取值）
* `apply-shared` 表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會影響頁面；
* `shared `表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設置 了
>[info] ## 組件的通信
1. 很多情況下，組件內展示的內容（數據、樣式、標簽），并不是在組件內寫死的，而且可以由使用者來決定
~~~js
Component({
options: {
styleIsolation: "shared"
},
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
}
})
~~~
>[danger] ##### 向組件傳遞數據 - properties
1. 通過**從外部傳遞數據給我們的組件**，使用`properties`屬性
2. 通過type 設置類型支持類型，String、Number、Boolean、Object、Array、null（不限制類型）
3. 可以通過`value`設置默認值
* 頁面展示
>[danger] ##### 向組件傳遞樣式 - externalClasses
1. 有時候，我們不希望將樣式在組件內固定不變，而是外部可以決定樣式
2. 在`Component`對象中，定義`externalClasses`屬性
3. 在組件內的`wxml`中使用`externalClasses`屬性中的class
4. 在頁面中傳入對應的`class`，并且給這個`class`設置樣式
>[danger] ##### 組件向外傳遞事件 – 自定義事件
1. 在組件的 js 文件的method 屬性中定義方法
2. 將方法傳遞觸發父組件 和 vue 類似但不同是從 `emit `變成`triggerEvent`
3. 父組件綁定暴露出的方法 和 vue 類似但不同從 `on` 變成了`bind:`
4. 接受傳參過來值使用`event.detail`
>[info] ## 綜合案例
>[danger] ##### 組件 部分
* 定義組件
~~~
{
"component": true,
"usingComponents": {}
}
~~~
~~~
// componets/tab/tab.js
Component({
/**
* 組件的屬性列表
*/
properties: {
titles:{
type:Array,
value:[]
}
},
/**
* 組件的初始數據
*/
data: {
currentIndex:0
},
/**
* 組件的方法列表
*/
methods: {
onItemTap(event){
const {index} = event.currentTarget.dataset
this.setData({currentIndex:index})
// 將值暴露出去
this.triggerEvent('changeIndex',index)
}
}
})
~~~
~~~html
<!--componets/tab/tab.wxml-->
<view class="tab">
<block wx:for="{{titles}}" wx:key="item">
<view class="tab-item" bindtap="onItemTap" data-index="{{index}}">
<text class="tab-item-text {{ index==currentIndex? 'active':''}}">{{item}}</text>
</view>
</block>
</view>
~~~
~~~
.tab{
display: flex;
line-height: 32px;
height: 32px;
}
.tab-item{
flex: 1;
text-align: center;
}
.tab-item-text{
padding: 5px;
}
.tab-item-text.active{
border-bottom: 2px solid yellowgreen;
}
~~~
>[danger] ###### 使用
~~~
Page({
/**
* 頁面的初始數據
*/
data: {
titles:["數學","語文","英語","物理"],
},
changeIndex(event){
console.log("區域title發生了點擊", event.detail);
}
})
~~~
~~~html
<tabs titles="{{titles}}" bind:changeIndex="changeIndex"></tabs>
~~~
* 注冊
~~~
{
"usingComponents": {
"tabs":"/componets/tab/tab"
}
}
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架構模型
- 小程序配置文件
- app.js -- App函數
- 頁面.js -- page
- 生命周期？？？？
- 小程序 -- 頁面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 樣式wxss
- 小程序 -- 組件開發
- 小程序 -- 組件插槽
- 小程序 -- 組件的生命周期
- 組件總結
- 小程序 -- 混入
- 小程序基本組件
- text -- 文本
- view -- 視圖容器
- button -- 按鈕
- image -- 圖片
- scroll-view -- 滾動容器
- input -- 雙向綁定
- 通用屬性
- 小程序常用Api
- 微信網絡請求
- 微信小程序彈窗
- 微信小程序分享
- 獲取設備信息 / 獲取位置信息
- Storage存儲
- 頁面跳轉
- 小程序登錄