小程式的小元件技術能力和場景解析

Finbird發表於2024-06-19
元件

隨著移動網際網路的快速發展，小程式等輕量級應用平臺日益成為使用者獲取資訊和服務的重要渠道。而小元件也在其中扮演了至關重要的角色，不僅能夠提升使用者的互動體驗，還能幫助開發者高效地構建功能豐富、介面美觀的小程式。

一、什麼是小程式裡的小元件

眾所周知，小程式就是無需安裝即可執行的輕量級應用，已成為移動網際網路的標配。它們擁有獨立的頁面邏輯和資料儲存，可以為使用者提供豐富的功能和服務。而小元件則是小程式的“縮小版”，它可以嵌入到其他小程式或原生應用中，為使用者提供更加便捷的功能。

圖片中紅框區域都是使用小元件實現的樣例

本質上來說，小元件其實就是小程式中可複用的程式碼片段，它們封裝了特定的功能和樣式，使得開發者能夠像搭積木一樣快速構建小程式。每個小元件都是獨立的，擁有自己的資料和邏輯，可以被嵌入到任何頁面中，實現功能的複用和介面的統一。

二、可以抽象為小元件的功能

由於小元件天然“程式碼複用、統一風格、快速迭代、最佳化效能、提升使用者體驗”的特性，我們可以將帶有下述功能的元件與功能場景進行抽象，透過小元件的形式進行復用。

具體的元件可能包括有：

  • 表單輸入
    • 小元件可以用於建立各種表單元素，如輸入框、選擇器、開關等，適用於使用者資訊收集、登入註冊等場景。
  • 導航欄
    • 小程式的頁面跳轉和導航通常可以透過小元件實現，如頂部導航欄、側邊欄選單等。
  • 資料展示
    • 列表、卡片、圖表等資料展示形式可以透過小元件來實現，適用於新聞資訊、商品展示等場景。
  • 互動元素
    • 按鈕、彈窗、滑塊等互動元素可以透過小元件來增強使用者的互動體驗。
  • 媒體播放
    • 音訊、影片播放功能可以透過小元件整合到小程式中，適用於音樂播放、影片點播等場景。
  • 隱私授權
    • 由於相關法律法規的要求，隱私授權彈窗元件可以用於處理使用者隱私授權的問題，提升使用者信任度。

三、小元件適用的對應場景

小程式中小元件的應用場景非常廣泛，幾乎涵蓋了生活的各個方面。比如：

1. 個性化內容展示

透過小元件，使用者可以在小程式內檢視個性化的資訊，如天氣、日曆事件、新聞推送等，而無需在小程式之間頻繁切換。例如，使用者可以在電商小程式的首頁看到根據其購物習慣推薦的商品。

2. 快捷操作入口

小元件可以作為小程式的快捷入口，使用者可以透過小元件快速執行特定的操作，例如檢視待辦事項、控制智慧家居裝置等。比如，在智慧家居小程式中，使用者可以透過小元件快速調節家裡的溫度和燈光。

3. 資訊摘要與通知

對於需要頻繁檢視的小程式資訊，小元件可以提供簡潔的摘要和通知，例如郵件概覽、股票行情、運動資料等。這樣，使用者無需頻繁切換頁面，也能隨時掌握重要資訊。

4. 實時資料更新

小元件能夠實時更新資料，確保使用者隨時掌握最新的資訊，例如實時交通情況、比賽比分等。對於使用者來說，能在小程式中實時獲取最新資訊，極大提升了使用體驗。

四、使用小元件的相關提升

在已有專案中使用小元件，可以在至少以下 4 個方面獲得提升。

1. 提升使用者參與度

透過小元件，使用者可以更方便地訪問小程式的核心功能，提高小程式的使用頻率和使用者黏性。例如，一個展示每日健康資料的小元件可以激勵使用者每天保持運動習慣，增加健康小程式的使用率。

2. 增強使用者滿意度

小元件提供了快捷和直觀的操作方式，減少了使用者在小程式中的操作步驟，提高了使用者的滿意度。使用者可以透過小元件快速完成常用操作，比如檢視待辦事項、回覆訊息等，而無需繁瑣的步驟。

3. 資料視覺化與簡化

小元件能夠以簡單直觀的方式展示覆雜資料，使使用者能夠快速理解和掌握資訊。比如，一個簡單的圖表小元件可以直觀地展示股票的漲跌情況，幫助使用者快速做出投資決策。

4. 減少頁面載入時間

透過小元件，使用者可以直接在小程式中完成許多操作，減少了載入頁面的時間，提升了整體使用體驗。例如，音樂播放控制小元件可以讓使用者在小程式中直接控制音樂播放，無需切換頁面。

五、小元件 DEMO

FinClip SDK 為開發者提供了一套完整的小元件整合、使用和銷燬的流程。這不僅簡化了開發工作，還提高了小程式的效能和使用者體驗，希望這些資訊能幫助您更有效地整合和使用小元件。

1. 整合指引

為了在專案中使用小元件，您需要首先整合 FinClip 小程式 SDK：

  • iOS 可以參考iOS SDK整合指南，DEMO 地址在這裡。
  • Android 可以參考Android SDK整合指南，DEMO 地址在這裡。

2. 版本要求

請注意，只有在 2.44.1 及以上版本的 iOS 與 Android SDK 版本才支援小元件功能。

3. 開啟小元件

在整合了FinClip SDK之後，您可以透過以下方式開啟小元件：

iOS 端：

開啟伺服器端正式版小元件：使用FATClient類的widgetManager物件提供的API方法建立小元件。

iOS 示例程式碼：

// 建立小元件配置物件
FinAppletConfig *config = [[FinAppletConfig alloc] init];
config.url = @"https://example.com/path/to/applet"; // 小元件的URL

// 建立小元件請求物件
FinAppletRequest *request = [[FinAppletRequest alloc] init];
request.config = config;

// 開啟小元件
[[FATClient sharedClient].widgetManager openAppletWithRequest:request];

Android 端：

開啟伺服器端正式版小元件：使用RemoteFinAppletRequest型別。

Android 示例程式碼：

// 建立小元件請求物件
RemoteFinAppletRequest request = new RemoteFinAppletRequest.Builder()
        .setUrl("https://example.com/path/to/applet") // 小元件的URL
        .build();

// 開啟小元件
FATClient.getInstance().getWidgetManager().openApplet(request);

4. 刪除小元件

當您不再需要小元件時，可以將其從頁面上移除，並從記憶體中銷燬：

iOS 端：

  • 刪除指定小元件快取：透過呼叫小元件例項的銷燬方法。
  • 刪除所有小元件快取：透過呼叫widgetManager的清除快取方法。

Android 端：

  • 清除指定小元件快取：呼叫小元件例項的destroy方法。
  • 清除所有小元件快取：對所有小元件例項呼叫destroy方法。

相關文章