一.自定義組件

1.1 組件的創建與參考

首先創建組件

然后我們組件的參考分為區域和全域參考

區域參考就是在當前頁面能使用，在當前頁面的json檔案里面配置

全域參考同樣的道理，注意跟page等是同級的

組件與頁面的不同：

雖然都有相應的四個檔案

1.2 組件樣式

首先，默認情況下組件的樣式就是隔離的==，組件之間不會相互影響，小程式也不會影響到組件，組件也影響不到小程式

注意：

雖然默認情況下是隔離的，但是也可以一些設定讓其不隔離

styleIsolation的屬性：

1.3 資料、方法和屬性

資料就是組件js里面的data節點里面的資料

方法就是組件js檔案里面methods方法，區別于其他頁面js的函式是直接寫在里面的，組件的函式都需要寫在methods里面

主要注意一點，如果不是事件的處理函式，不是由事件來觸發，一般這樣的函式前面都為一個_下劃線

屬性：properties

是組件用來接收外部傳進來的一些資料

兩者區別是上一種不用傳值也有默認值

data和properties區別：

都是可讀可寫的，data傾向于存盤私有資料，properties傾向于存盤外部傳進來的資料

properties也是通過setData來修改

1.4 資料監聽器

類似于watch 這里面是 observers

要監聽多個欄位，直接寫在一起通過，分割

同樣還支持監聽物件里面單個或多個屬性的變化

如果是要監聽物件里面所有的屬性，通過兩個通配符 **

而且對應的新值也是整個物件

1.5 純資料欄位

不用于界面渲染的data欄位就是純資料欄位

對于這類資料用純資料來定義更性能會更快

1.6 生命周期

組件的生命周期函式一共六個：

第一個還沒有放入到頁面節點樹中，類似于beforeCreate

第二是放入了頁面節點樹，但是還沒有渲染出來類似于beforeMount

最重要的一共三個：

要定義組件的生命周期，需要用到 lifetimes物件里面來寫生命周期函式

還有一個就是組件所在頁面的生命周期

就是當組件的行為需要依賴頁面的變化的時候，但是組件能訪問到頁面的生命周期也不多就三個

同樣的也需要寫到一個物件里面， pageLifetimes

1.7 組件插槽

單個插槽

首先在組件里面通過slot來占位，然后頁面使用組件這里直接寫你自己的組件，注意是直接寫，因為是單個插槽也不需要指定什么
多個插槽

如果要啟用多個插槽，就需要配置一下，現在組件js配置options里面為multipleSlots為true

然后定義slot的時候需要指定name

使用的時候用 slot來指明name

1.8 父子組件通信

有三種方式：

屬性系結：僅能設定json兼容資料也就是僅能傳一些簡單資料，不能傳方法等

注意頁面也可以當做父組件

在頁面的data定義自己的資料

直接通過屬性系結給到子組件

子組件通過properties來接受
事件系結

子組件給父組件傳資料的時候

首先父組件要在js定義這個自定義函式

然后給到子組件，給的時候就通過bind語法加你的事件名，這里最好用第二種形式，可以跟原生事件做一個區別

子組件這邊通過 this.triggerEvent里面是事件名，和你要帶的引數（物件形式）

最后父組件這邊通過 e.detail獲取引數
獲取組件實體

也是父給子傳，類似于ref，需要給子組件設定 class或者id，通過 this.selectComponent來獲取到子組件從而可以去修改他的一些data、properties或者呼叫它的一些方法

1.9 behaviors

behaviors就是mixin，組件中屬性、資料、方法、生命周期函式等有共同的都可以通過behaviors來共享

每個組件可以參考多個behavior，behavior也可以參考其他behavior

創建：一般在根目錄創建一個behavior檔案夾，里面放一個js來專門存放behavior

匯入并使用：

此時你的組件已經有這些屬性、資料等了，直接用即可

behavior可以存放的屬性有哪些：

當behavior與組件里面的一些屬性、資料等同名時

有一些規則，還是比較多的，可以通過微信官方檔案來看具體

二.使用npm包

雖然能使用npm包，但并不是所有包都能使用

依賴node（如：fs）、依賴瀏覽器內置物件（如：jQuery）、依賴c++

2.1 Vant Weapp

是有贊前端團隊專門用于小程式的一套ui結構

首先安裝，參考官網檔案https://vant-contrib.gitee.io/vant-weapp/#/quickstart

在自己終端視窗打開，首先要先初始化

直接npm開始安裝

接下來的兩步查看官方檔案配置

然后構建npm就完成安裝了

使用

需要在app.json的usingComponents注冊

2.2 使用css變數定制vant主題樣式

首先css變數怎么用，類似于less變數，可以起到一個方便修改的作用

帶有前綴--的屬性名，比如--example--name，表示的是帶有值的自定義屬性，其可以通過 var 函式在全檔案范圍內復用的，

怎么來定制vant主題：

首先是需要在app.wxss里面修改page的樣式

在小程式里面page就相當于html是整個頁面的根節點

那么怎么來修改呢：

可以在官網檔案找到

在這里面找到你要修改的那個組件的什么樣式

將前面改成--

2.3 API promise化

小程式官方提供的很多api是基于回呼來執行的，就比如發請求的request里面就有成功失敗完成等回呼，像這樣回呼一多了就容易產生一個問題，就是造成回呼地獄的問題，代碼的可讀性、維護性差

要將官方api promise化需要用到一個包 miniprogram-api-promise

需要知道的是，我們微信小程式是不能直接識別這些npm包的，之所以能夠使用完全是因為構建了npm包，所以這個時候一般下了一個包之后還需要構建一次npm

然后是使用需要在app.js里面頂級先注冊呼叫

將wx上的方法都promise化給到了空物件wxp

中間一定要有個wx.p過渡，后面用也是用這個

怎么來用：

比如發起一個請求

所以現在就可以用async，await了

三.全域資料共享

類似于vuex實作各個組件間資料共享

需要兩個包來實作：

下載
創建store

創建一個store檔案夾專門來做倉庫，里面匯入observable，向外匯出他，他就像new store一樣，里面就可以放一些需要存放的資料

state

計算屬性

直接在下面定義一個函式即可，依賴的資料產生變化，他也會跟著變

action

要修改store里面的資料也是需要action來修改的，需要先引入

然后直接在里面寫action的函式，注意方法需要用action包起來

而且他會接受引數，也就是外部action傳進來的引數

怎么來在page頁面中來使用mobx中的資料或者actions

先引入上面這個方法和我們的store資料源

首先在我們onLoad鉤子中用到這個方法來創建，第一個引數為this也就是這個頁面的實體，第二個引數一個物件有我們的資料源，有我們的data、getters、還有actions里面的函式

創建之后就有了這個實體物件，就可以在onUnload鉤子清理這些資料

系結好之后，直接在頁面中使用即可

注意我要修改numA的值，需要action接受引數，同時這邊只能傳進store里面去改

在組件中使用：

主要注意他有三種引入資料的方法，引入action前面是你自定義的名字，后面才是actions里面定義的函式名