微信小程式自定義元件的關鍵記錄

猛虎嗅薔薇發表於2019-02-19
微信小程式元件

我們在往常用vue或者是react程式設計的時候，最常用最常見的一個詞就是元件，在小程式開發中，元件也是很nice的，畢竟誰也不想把1+1 = 2每一個頁面寫一遍。本篇文章適合知道小程式基本開發的手足，總結一些自己在開發小程式元件的過程需要注意的點，有寫的不對的地方還請指指教。

1. 基本配置

新建元件就跟新建頁面一樣，還是js、json、wxml、wxss四個檔案，這裡需要注意的有四點。

一、或許很多人在新建元件的時候

右鍵直接新建page，這樣就會在app.json的配置檔案中的pages下面，根據路徑多加一項，需要注意的是，這一項不像是頁面，刪掉也沒關係。

二、新建元件之後

需要在元件的配置檔案json中新增component: true欄位； 需要在引用元件的配置檔案中新增usingComponents欄位來定義元件的名字和路徑【可以直接用/+app.json中自動生成的，以免路徑找不到】

三、新建的元件

如果是直接一鍵生成的，那麼這個時候js檔案中的還是page({...生命週期等執行函式})，所以這個時候需要我們把這些換成元件需要的component({...元件需要的物件})

2.元件樣式

關於樣式，就是我們的css了，至於裡面的slot，無非就是一個插槽，而模版檔案中資料繫結等我們都可以按照頁面中的來實現，需要注意的是選擇器和樣式汙染問題

一、選擇器

在編寫元件的時候，不能使用id選擇器(#a)、屬性選擇器（[a]）和標籤名選擇器，建議統一使用class 子選擇器只能用於view元件，和其子節點之間，其餘的不建議使用 比如text > text 繼承樣式的話 font還有color這種樣式繼承，會從元件外繼承到元件內部 除繼承樣式之外，app.wxss中的樣式，元件所在頁面的樣式對元件內部是無效的

其實呢，我們只用class選擇器就好了。。。

二、外部樣式定義

元件定義好了之後，在使用的時候，如果我忽然在呼叫頁面加一個class控制樣式，想加一個class怎麼辦呢？ 在元件內部的js檔案中配置externalClasses：['xxx']，這樣在外部引用的時候，可以直接使用這裡定義的，畢竟單節點上面，同一節點同時使用普通樣式和外部樣式的時候，優先順序會出現錯亂，所以這能很好的避免這種情況 我們前面說了，自定義元件內部樣式，是不會受到外部樣式的影響的，除非是全域性的標籤或者是options配置中新增assGlobalClass欄位

三、樣式配置

3.component構造器 其實這裡的構造器都是制定元件重的屬性、資料、方法等等，定義的欄位可以參考官方文件，我這裡不多做累述，把容易混淆的點拿出來對比一下。

properties: 元件的對外屬性 data: 元件的內部資料 元件生命週期：生命週期有優先順序，一般情況下直接當作普通方法，但是如果需要優先順序的時候，可以寫到lifetimes物件裡面

元件生命週期：

微信小程式自定義元件的關鍵記錄

4.元件事件

元件的事件，我們和vue差不多的寫法，會有一個methods統一來管理。但是我們通常有兩種型別

1. 元件內部呼叫的方法。

和普通一樣就好了，無非就是完全在元件內部自己玩，不和外部頁面進行資料通訊，請求也是自己完成
複製程式碼

2. 和父元件或者頁面有資料通訊的方法。

我們在vue中需要使用到自元件向父元件傳遞訊息，有一種方法就是this.$emit('...', msg)
但是我們在小程式中也需要這種場景 【監聽事件】：元件間通訊的主要方式之一
複製程式碼

元件內部


        // wxml
        <view bindtap="onHandle"></view>
        // js
        methods: {
            onHandle() {
                .....
                this.triggerEvent('eventName', detailMsg)
            }
    }

複製程式碼

頁面或者元件呼叫該元件的時候呼叫定義好的方法

// wxml
<my-component bind:eventName="handleComponent"></my-component>
// 頁面js
page({
    handleComponent(e) {
        元件中返回的detailMsg資訊 達到互動效果
        e.detail------->detailMsg
    }
})
複製程式碼

後續持續記錄。。。。

相關文章