How to customize components in WeChat mini program? The following article will introduce to you how to customize components in WeChat mini programs. I hope it will be helpful to you!

During the development process of WeChat applet, some page modules that may be used on multiple pages can be encapsulated into a component to improve development efficiency. Although we can introduce the entire component library such as weui, vant, etc., sometimes considering the package size limit of WeChat applet, it is usually more controllable to encapsulate it as a custom component.

And for some business modules, we can encapsulate them as components for reuse. This article mainly talks about the following two aspects:

• Declaration and use of components
• Component communication

Declaration and use of components

The bottom layer of the component system of the WeChat mini program is implemented through the Exparser component framework, which is built into the basic library of the mini program. All components in the mini program include built-in components and custom components. All managed by the Exparser organization.

Custom components include the following files just like writing pages:

• index.json
• index.wxml
• index.wxss
• index.js
• index.wxs

Take writing a tab component as an example: When writing a custom component, you need to set the component field in the json file to true:

{
    "component": true
}

in js In the file, the basic library provides two constructors, Page and Component. The page corresponding to Page is the page root component, and the Component corresponds to:

Component({
    options: { // 組件配置
        addGlobalClass: true,
        // 指定所有 _ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段
        // 純數(shù)據(jù)字段是一些不用于界面渲染的 data 字段，可以用于提升頁(yè)面更新性能
        pureDataPattern: /^_/, 
        multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
    },
    properties: {
        vtabs: {type: Array, value: []},
    },
    data: {
        currentView: 0,
    },
    observers: { // 監(jiān)測(cè)
        activeTab: function(activeTab) {
            this.scrollTabBar(activeTab);
        }
    }, 
    relations: {  // 關(guān)聯(lián)的子/父組件
        '../vtabs-content/index': {
            type: 'child', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為子節(jié)點(diǎn)
            linked: function(target) {
                this.calcVtabsCotentHeight(target);
            },
            unlinked: function(target) {
                delete this.data._contentHeight[target.data.tabIndex];
            }
        }
    },
    lifetimes: { // 組件聲明周期
        created: function() {
            // 組件實(shí)例剛剛被創(chuàng)建好時(shí)
        },
        attached: function() {
            // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹時(shí)執(zhí)行
        },
        detached: function() {
            // 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
        },
    },
    methods: { // 組件方法
        calcVtabsCotentHeight(target) {}
    } 
});

If you have friends who know Vue2, you will find this statement very familiar. .

When the mini program is started, the constructor will

write the properties, data, methods and other definition sections set by the developer into the component registry of Exparser. When this component is referenced by other components, it can create instances of custom components based on these registration information.

Template file wxml:

<view class=&#39;vtabs&#39;>
    <slot />
</view>

Style file:

.vtabs {}

To use external page components, you only need to introduce into the json

{
  "navigationBarTitleText": "商品分類",
  "usingComponents": {
    "vtabs": "../../../components/vtabs",
  }
}

When initializing the page, Exparser will create an instance of the page root component, and other components used will also respond by creating component instances (this is a recursive process):

The process of component creation There are roughly the following points:

• According to the component registration information, create the JS object of the component node from the component prototype, that is, the component's this；

• Copy the data in the component registration information as the component data, that is, this.data;

• Combine this data with the component WXML, and create a Shadow Tree (node ??tree of the component), because Shadow Tree may reference other components, so this will recursively trigger the creation process of other components;

• Splice ShadowTree to Composed Tree (finally spliced ??page node tree), and generate some cache data to optimize component update performance;

• trigger the created life cycle function of the component;

• If it is not the page root component, you need to set the attribute value of the component according to the attribute definition on the component node;

• When the component instance is displayed on the page When up, the attached life cycle function of the component is triggered. If there are other components in Shadow Tree, their life cycle functions are also triggered one by one.

Component communication

Due to business responsibilities, we often need to split a large page into multiple components. Data communication is required between them.

For cross-generation component communication, global state management can be considered. Here we only discuss common parent-child component communication:

Method 1 WXML data binding

Used by the parent component to set data to the specified properties of the child component.

Child declaration properties

Component({
    properties: {
        vtabs: {type: Array, value: []}, // 數(shù)據(jù)項(xiàng)格式為 `{title}`
    }
})

Parent component call:

    <vtabs vtabs="{{ vtabs }}"</vtabs>

Method 2 event

Use For child components to pass data to parent components, any data can be passed.

To dispatch events from a subcomponent, first bind the click event of the subcomponent in the wxml structure:

   <view bindtap="handleTabClick">

Then dispatch the event in the js file. The event name can be customized. The second parameter can pass the data object, and the third parameter is the event option.

 handleClick(e) {
     this.triggerEvent(
         'tabclick', 
         { index }, 
         { 
             bubbles: false,  // 事件是否冒泡
             // 事件是否可以穿越組件邊界，為 false 時(shí)，事件只在引用組件的節(jié)點(diǎn)樹上觸發(fā)，
             // 不進(jìn)入其他任何組件的內(nèi)部
             composed: false,  
             capturePhase: false // 事件是否擁有捕獲階段 
         }
     );
 },
 handleChange(e) {
     this.triggerEvent('tabchange', { index });
 },

Finally, listen in the parent component and use:

<vtabs 
    vtabs="{{ vtabs }}"
    bindtabclick="handleTabClick" 
    bindtabchange="handleTabChange" 
>

Method three selectComponent to get the component instance object

Pass# The ##selectComponent method can obtain the instance of the subcomponent and thus call the method of the subcomponent.

<view>
    <vtabs-content="goods-content{{ index }}"></vtabs-content>
</view>

Page({
    reCalcContentHeight(index) {
        const goodsContent = this.selectComponent(`#goods-content${index}`);
    },
})

• ID選擇器：#the-id（筆者只測(cè)試了這個(gè)，其他讀者可自行測(cè)試）
• class選擇器（可以連續(xù)指定多個(gè)）：.a-class.another-class
• 子元素選擇器：.the-parent > .the-child
• 后代選擇器：.the-ancestor .the-descendant
• 跨自定義組件的后代選擇器：.the-ancestor >>> .the-descendant
• 多選擇器的并集：#a-node, .some-other-nodes

方法四 url 參數(shù)通信

在電商/物流等微信小程序中，會(huì)存在這樣的用戶故事，有一個(gè)「下單頁(yè)面A」和「貨物信息頁(yè)面B」

• 在「下單頁(yè)面 A」填寫基本信息，需要下鉆到「詳細(xì)頁(yè)面B」填寫詳細(xì)信息的情況。比如一個(gè)寄快遞下單頁(yè)面，需要下鉆到貨物信息頁(yè)面填寫更詳細(xì)的信息，然后返回上一個(gè)頁(yè)面。
• 在「下單頁(yè)面 A」下鉆到「貨物頁(yè)面B」，需要回顯「貨物頁(yè)面B」的數(shù)據(jù)。

微信小程序由一個(gè) App() 實(shí)例和多個(gè) Page() 組成。小程序框架以棧的方式維護(hù)頁(yè)面（最多10個(gè)） 提供了以下 API 進(jìn)行頁(yè)面跳轉(zhuǎn)，頁(yè)面路由如下

• wx.navigateTo（只能跳轉(zhuǎn)位于棧內(nèi)的頁(yè)面）

• wx.redirectTo（可跳轉(zhuǎn)位于棧外的新頁(yè)面，并替代當(dāng)前頁(yè)面）

• wx.navigateBack（返回上一層頁(yè)面，不能攜帶參數(shù)）

• wx.switchTab（切換 Tab 頁(yè)面，不支持 url 參數(shù)）

• wx.reLaunch（小程序重啟）

可以簡(jiǎn)單封裝一個(gè) jumpTo 跳轉(zhuǎn)函數(shù)，并傳遞參數(shù)：

export function jumpTo(url, options) {
    const baseUrl = url.split('?')[0];
    // 如果 url 帶了參數(shù)，需要把參數(shù)也掛載到 options 上
    if (url.indexof('?') !== -1) {
        const { queries } = resolveUrl(url);
        Object.assign(options, queries, options); // options 的優(yōu)先級(jí)最高
    } 
    cosnt queryString = objectEntries(options)
        .filter(item => item[1] || item[0] === 0) // 除了數(shù)字 0 外，其他非值都過濾
        .map(
            ([key, value]) => {
                if (typeof value === 'object') {
                    // 對(duì)象轉(zhuǎn)字符串
                    value = JSON.stringify(value);
                }
                if (typeof value === 'string') {
                    // 字符串 encode
                    value = encodeURIComponent(value);
                }
                return `${key}=${value}`;
            }
        ).join('&');
    if (queryString) { // 需要組裝參數(shù)
        url = `${baseUrl}?${queryString}`;
    }
    
    const pageCount = wx.getCurrentPages().length;
    if (jumpType === &#39;navigateTo&#39; && pageCount < 5) {
        wx.navigateTo({ 
            url,
            fail: () => { 
                wx.switch({ url: baseUrl });
            }
        });
    } else {
        wx.navigateTo({ 
            url,
            fail: () => { 
                wx.switch({ url: baseUrl });
            }
        });
    } 
}

jumpTo 輔助函數(shù)：

export const resolveSearch = search => {
    const queries = {};
    cosnt paramList = search.split('&');
    paramList.forEach(param => {
        const [key, value = ''] = param.split('=');
        queries[key] = value;
    });
    return queries;
};

export const resolveUrl = (url) => {
    if (url.indexOf('?') === -1) {
        // 不帶參數(shù)的 url
        return {
            queries: {},
            page: url
        }
    }
    const [page, search] = url.split('?');
    const queries = resolveSearch(search);
    return {
        page,
        queries
    };
};

在「下單頁(yè)面A」傳遞數(shù)據(jù)：

jumpTo({ 
    url: 'pages/consignment/index', 
    { 
        sender: { name: 'naluduo233' }
    }
});

在「貨物信息頁(yè)面B」獲得 URL 參數(shù)：

const sender = JSON.parse(getParam('sender') || '{}');

url 參數(shù)獲取輔助函數(shù)

// 返回當(dāng)前頁(yè)面
export function getCurrentPage() {
    const pageStack = wx.getCurrentPages();
    const lastIndex = pageStack.length - 1;
    const currentPage = pageStack[lastIndex];
    return currentPage;
}

// 獲取頁(yè)面 url 參數(shù)
export function getParams() {
    const currentPage = getCurrentPage() || {};
    const allParams = {};
    const { route, options } = currentPage;
    if (options) {
        const entries = objectEntries(options);
        entries.forEach(
            ([key, value]) => {
                allParams[key] = decodeURIComponent(value);
            }
        );
    }
    return allParams;
}

// 按字段返回值
export function getParam(name) {
    const params = getParams() || {};
    return params[name];
}

參數(shù)過長(zhǎng)怎么辦？路由 api 不支持?jǐn)y帶參數(shù)呢？

雖然微信小程序官方文檔沒有說(shuō)明可以頁(yè)面攜帶的參數(shù)有多長(zhǎng)，但還是可能會(huì)有參數(shù)過長(zhǎng)被截?cái)嗟娘L(fēng)險(xiǎn)。

我們可以使用全局?jǐn)?shù)據(jù)記錄參數(shù)值，同時(shí)解決 url 參數(shù)過長(zhǎng)和路由 api 不支持?jǐn)y帶參數(shù)的問題。

// global-data.js
// 由于 switchTab 不支持?jǐn)y帶參數(shù)，所以需要考慮使用全局?jǐn)?shù)據(jù)存儲(chǔ)
// 這里不管是不是 switchTab，先把數(shù)據(jù)掛載上去
const queryMap = {
    page: '',
    queries: {}
};

更新跳轉(zhuǎn)函數(shù)

export function jumpTo(url, options) {
    // ...
    Object.assign(queryMap, {
        page: baseUrl,
        queries: options
    });
    // ...
    if (jumpType === 'switchTab') {
        wx.switchTab({ url: baseUrl });
    } else if (jumpType === &#39;navigateTo&#39; && pageCount < 5) {
        wx.navigateTo({ 
            url,
            fail: () => { 
                wx.switch({ url: baseUrl });
            }
        });
    } else {
        wx.navigateTo({ 
            url,
            fail: () => { 
                wx.switch({ url: baseUrl });
            }
        });
    }
}

url 參數(shù)獲取輔助函數(shù)

// 獲取頁(yè)面 url 參數(shù)
export function getParams() {
    const currentPage = getCurrentPage() || {};
    const allParams = {};
    const { route, options } = currentPage;
    if (options) {
        const entries = objectEntries(options);
        entries.forEach(
            ([key, value]) => {
                allParams[key] = decodeURIComponent(value);
            }
        );
+        if (isTabBar(route)) {
+           // 是 tab-bar 頁(yè)面，使用掛載到全局的參數(shù)
+           const { page, queries } = queryMap; 
+           if (page === `${route}`) {
+               Object.assign(allParams, queries);
+           }
+        }
    }
    return allParams;
}

輔助函數(shù)

// 判斷當(dāng)前路徑是否是 tabBar
const { tabBar} = appConfig;
export isTabBar = (route) => tabBar.list.some(({ pagePath })) => pagePath === route);

按照這樣的邏輯的話，是不是都不用區(qū)分是否是 isTabBar 頁(yè)面了，全部頁(yè)面都從 queryMap 中獲取？這個(gè)問題目前后續(xù)探究再下結(jié)論，因?yàn)槲夷壳斑€沒試過從頁(yè)面實(shí)例的 options 中拿到的值是缺少的。所以可以先保留讀取 getCurrentPages 的值。

方法五 EventChannel 事件派發(fā)通信

前面我談到從「當(dāng)前頁(yè)面A」傳遞數(shù)據(jù)到被打開的「頁(yè)面B」可以通過 url 參數(shù)。那么想獲取被打開頁(yè)面?zhèn)魉偷疆?dāng)前頁(yè)面的數(shù)據(jù)要如何做呢？是否也可以通過 url 參數(shù)呢？

答案是可以的，前提是不需要保存「頁(yè)面A」的狀態(tài)。如果要保留「頁(yè)面 A」的狀態(tài)，就需要使用 navigateBack 返回上一頁(yè)，而這個(gè) api 是不支持?jǐn)y帶 url 參數(shù)的。

這樣時(shí)候可以使用 頁(yè)面間事件通信通道 EventChannel。

pageA 頁(yè)面

// 
wx.navigateTo({
    url: 'pageB?id=1',
    events: {
        // 為指定事件添加一個(gè)監(jiān)聽器，獲取被打開頁(yè)面?zhèn)魉偷疆?dāng)前頁(yè)面的數(shù)據(jù)
        acceptDataFromOpenedPage: function(data) {
          console.log(data) 
        },
    },
    success: function(res) {
        // 通過eventChannel向被打開頁(yè)面?zhèn)魉蛿?shù)據(jù)
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
    }
});

pageB 頁(yè)面

Page({
    onLoad: function(option){
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
   
        // 監(jiān)聽acceptDataFromOpenerPage事件，獲取上一頁(yè)面通過eventChannel傳送到當(dāng)前頁(yè)面的數(shù)據(jù)
        eventChannel.on('acceptDataFromOpenerPage', function(data) {
          console.log(data)
        })
      }
})

會(huì)出現(xiàn)數(shù)據(jù)無(wú)法監(jiān)聽的情況嗎？

小程序的棧不超過 10 層，如果當(dāng)前「頁(yè)面A」不是第 10 層，那么可以使用 navigateTo 跳轉(zhuǎn)保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到「頁(yè)面B」，這個(gè)時(shí)候「頁(yè)面B」填寫完畢后傳遞數(shù)據(jù)給「頁(yè)面A」時(shí)，「頁(yè)面A」是可以監(jiān)聽到數(shù)據(jù)的。

如果當(dāng)前「頁(yè)面A」已經(jīng)是第10個(gè)頁(yè)面，只能使用 redirectTo 跳轉(zhuǎn)「PageB」頁(yè)面。結(jié)果是當(dāng)前「頁(yè)面A」出棧，新「頁(yè)面B」入棧。這個(gè)時(shí)候?qū)ⅰ疙?yè)面B」傳遞數(shù)據(jù)給「頁(yè)面A」，調(diào)用 navigateBack 是無(wú)法回到目標(biāo)「頁(yè)面A」的，因此數(shù)據(jù)是無(wú)法正常被監(jiān)聽到。

不過我分析做過的小程序中，棧中很少有10層的情況，5 層的也很少。因?yàn)檎{(diào)用 wx.navigateBack 、wx.redirectTo 會(huì)關(guān)閉當(dāng)前頁(yè)面，調(diào)用 wx.switchTab 會(huì)關(guān)閉其他所有非 tabBar 頁(yè)面。

所以很少會(huì)出現(xiàn)這樣無(wú)法回到上一頁(yè)面以監(jiān)聽到數(shù)據(jù)的情況，如果真出現(xiàn)這種情況，首先要考慮的不是數(shù)據(jù)的監(jiān)聽問題了，而是要保證如何能夠返回上一頁(yè)面。

比如在「PageA」頁(yè)面中先調(diào)用 getCurrentPages 獲取頁(yè)面的數(shù)量，再把其他的頁(yè)面刪除，之后在跳轉(zhuǎn)「PageB」頁(yè)面，這樣就避免「PageA」調(diào)用 wx.redirectTo導(dǎo)致關(guān)閉「PageA」。但是官方是不推薦開發(fā)者手動(dòng)更改頁(yè)面棧的，需要慎重。

如果有讀者遇到這種情況，并知道如何解決這種的話，麻煩告知下，感謝。

使用自定義的事件中心 EventBus

除了使用官方提供的 EventChannel 外，我們也可以自定義一個(gè)全局的 EventBus 事件中心。 因?yàn)檫@樣更加靈活，不需要在調(diào)用 wx.navigateTo 等APi里傳入?yún)?shù)，多平臺(tái)的遷移性更強(qiáng)。

export default class EventBus {
 private defineEvent = {};
 // 注冊(cè)事件
 public register(event: string, cb): void { 
  if(!this.defineEvent[event]) {
   (this.defineEvent[event] = [cb]); 
  }
  else {
   this.defineEvent[event].push(cb); 
  } 
 }
 // 派遣事件
 public dispatch(event: string, arg?: any): void {
  if(this.defineEvent[event]) {{
            for(let i=0, len = this.defineEvent[event].length; i<len; ++i) { 
                this.defineEvent[event][i] && this.defineEvent[event][i](arg); 
            }
        }}
 }
 // on 監(jiān)聽
 public on(event: string, cb): void {
  return this.register(event, cb); 
 }
 // off 方法
    public off(event: string, cb?): void {
        if(this.defineEvent[event]) {
            if(typeof(cb) == "undefined") { 
                delete this.defineEvent[event]; // 表示全部刪除 
            } else {
                // 遍歷查找 
                for(let i=0, len=this.defineEvent[event].length; i<len; ++i) { 
                    if(cb == this.defineEvent[event][i]) {
                        this.defineEvent[event][i] = null; // 標(biāo)記為空 - 防止dispath 長(zhǎng)度變化 
                        // 延時(shí)刪除對(duì)應(yīng)事件
                        setTimeout(() => this.defineEvent[event].splice(i, 1), 0); 
                        break; 
                    }
                }
            }
        } 
    }

    // once 方法，監(jiān)聽一次
    public once(event: string, cb): void { 
        let onceCb = arg => {
         cb && cb(arg); 
         this.off(event, onceCb); 
        }
        this.register(event, onceCb); 
    }
    // 清空所有事件
    public clean(): void {
        this.defineEvent = {}; 
    }
}

export connst eventBus = new EventBus();

在 PageA 頁(yè)面監(jiān)聽：

eventBus.on('update', (data) => console.log(data));

在 PageB 頁(yè)面派發(fā)

eventBus.dispatch('someEvent', { name: 'naluduo233'});

小結(jié)

本文主要討論了微信小程序如何自定義組件，涉及兩個(gè)方面：

• 組件的聲明與使用
• 組件的通信

如果你使用的是 taro 的話，直接按照 react 的語(yǔ)法自定義組件就好。而其中的組件通信的話，因?yàn)?taro 最終也是會(huì)編譯為微信小程序，所以 url 和 eventbus 的頁(yè)面組件通信方式是適用的。后續(xù)會(huì)分析 vant-ui weapp 的一些組件源碼，看看有贊是如何實(shí)踐的。

感謝閱讀，如有錯(cuò)誤的地方請(qǐng)指出

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

The above is the detailed content of A brief analysis of the methods of customizing components in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!