Web & Mini Program reference

Web 與小程式 API 概覽

JavaScript SDK 面向瀏覽器、H5、uni-app 與微信小程式，提供 chat、好友關係、群組、訊息歷史、推播協同和語音視訊信令能力。

架構與進入點

應用程式內應長期重用一個 flooim 實例，並在登入前註冊事件；各業務 manager 負責快取狀態與遠端操作。

Reference 導覽

依目前工作選擇最精確的參考頁面。以下項目皆連至本站託管的自動產生 API 文件。

flooim說明 flooim 的完整 API、參數、回傳值、錯誤與回呼約定。userManage說明 userManage 的完整 API、參數、回傳值、錯誤與回呼約定。rosterManage說明 rosterManage 的完整 API、參數、回傳值、錯誤與回呼約定。groupManage說明 groupManage 的完整 API、參數、回傳值、錯誤與回呼約定。sysManage說明 sysManage 的完整 API、參數、回傳值、錯誤與回呼約定。rtcManage說明 rtcManage 的完整 API、參數、回傳值、錯誤與回呼約定。

建議整合流程

使用控制台 App ID 完成設定，並在應用程式生命週期內重用單一用戶端實例。
在登入前註冊連線、使用者、訊息與群組監聽器，避免遺漏初始同步事件。
使用後端簽發的使用者 token 登入；不要把伺服器端 access-token 放入用戶端。
依業務領域呼叫服務或管理器，並以非同步回呼更新應用程式狀態。
登出或銷毀頁面時移除監聽器，並釋放上傳、下載與語音視訊資源。

使用時需要注意

Web、uni-app 與原生微信小程式版共用相近的 API，但封裝方式與傳輸設定不同。
連線與訊息狀態以回呼和事件為準；非同步方法回傳不代表遠端處理完成。
floo 與 rtc 是相容性識別碼；產品說明使用 chat 與語音和視訊。

繼續閱讀

Web SDK 詳細指南 →Web 快速開始 →JavaScript 共用類型 →

Web & Mini Program

設定 Web SDK

選擇與執行環境相符的建置版本，建立一個長期重用的用戶端，並在登入前註冊事件。

選擇合適的建置版本

Web用於桌面瀏覽器與一般前端應用程式。uni-app用於 H5、多家小程式平台，以及以 DCloud uni-app 建置的應用程式。微信小程式符合微信小程式標準的原生版本，功能範圍與 uni-app 版一致。

準備專案

直接在瀏覽器中整合時可下載 floo-3.0.0.js，也可以把對應 SDK 建置加入專案的套件管理流程。
如需語音與視訊能力，請在 package.json 中加入 webrtc-adapter 與 jquery，並透過套件管理器安裝。
先在控制台建立 App ID。整個應用程式生命週期應重用一個 SDK 實例，不要在每個頁面重複建立。

建立 SDK 實例

Web 版將 ws 設為 false，uni-app 版設為 true。兩種載入方式使用相同的設定物件。

    const config = {
      // dnsServer: "https://dns.lanying.chat/v2/app_dns",
      appid: "YOUR_APP_ID",
      ws: false, // uniapp版需要設定為true, web版需要設定為false
      autoLogin: true
      };

相容 Script 的載入方式

全域建構函式適合 script 標籤整合。SDK 檔案載入完成後再初始化，並透過重試邏輯處理指令碼並行載入。

    import "floo-3.0.0.js";
    
    const im = new window.flooIM(config);

Module 載入方式

在打包專案中匯入 flooim，並建立同一個長期重用的用戶端實例。

    import flooim from 'floo-3.0.0';
    
    const im = flooim(config);

登入與事件監聽

登入前註冊連線與訊息事件，以免遺漏初始狀態。頁面或應用程式銷毀時，使用相同的處理函式呼叫 off 取消監聽。

        im.login({
          mobile:String, #與name 2選1
          name:String,
          password:String,
        })

        im.on('events', (ret) => {
          //do something with ret
        })
        // or
        im.on({
          eventName: (ret) => {
            //do something with ret
          },
          ...
        })

        im.off('events', (ret) => {
          //do something with ret
        })
        // or
        im.off({
          eventName: (ret) => {
            //do something with ret
          },
        ...
        })

使用功能管理器

userManage 管理目前帳號，rosterManage 管理好友與一對一聊天記錄，groupManage 管理群組，sysManage 收發訊息，rtcManage 處理語音與視訊信令。

整合注意事項

Web、uni-app 與原生微信小程式版的概念 API 基本一致，但封裝方式與傳輸設定不同。
非同步呼叫應以回呼與事件作為 UI 狀態依據，而不是以方法立即回傳為準。
部分操作讀取快取，對應的 async 方法會從伺服器端重新整理；應依情境明確選擇。
API 識別碼必須與文件保持一致，包括為相容性保留的 floo 與 rtc 名稱。