一.自定義組件 1.1 組件的創建與引用首先創建組件然後我們組件的引用分為局部和全局引用局部引用就是在當前頁面能使用，在當前頁面的json文件裡面配置全局引用同樣的道理，==註意跟page等是同級的== 組件與頁面的不同：雖然都有相應的四個文件 1.2 組件樣式首先，預設情況下 ==組件 ...

一.自定義組件

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裡面定義的函數名