複雜場景下(xià)的h5與小程序通(tōng)信

發表時間：2021-1-6

發布人：葵宇科技

浏覽次數：35

一、背景

在套殼小程序盛行的當下(xià)， h5調用小程序能力來打破業(yè)務邊界已成為家常便飯，h5與小程序的結合，極大地拓展了h5的能力邊界，豐富了h5的功能。使許多以往純h5隻能想想或者實現難度極大的功能變得輕松簡單。

但在套殼小程序中(zhōng)，h5與小程序通(tōng)信存在以下(xià)幾個(gè)問(wèn)題：

注入小程序全局變量的時機不确定，可(kě)能調用的時候不存在小程序變量。和(hé)全局變量my相關(guān)的判斷滿天飛，每個(gè)使用的地方都需要判斷是否已注入變量，否則就要創建監聽。
小程序處理後的返回結果可(kě)能有多種，h5需要在具體使用時監聽多個(gè)結果進行處理。
一旦監聽建立，就無法取消，在組件銷毀時如(rú)果沒有判斷組件狀态容易導緻内存洩漏。

二、在業(yè)務内的實踐

因業(yè)務的特殊性，需要投放多端,小程序sdk的加載沒有放到head裡面，而是在應用啟動(dòng)時動(dòng)态判斷是小程序環境時自動(dòng)注入的方式：

export function injectMiniAppScript() {
    if (isAlipayMiniApp() || isAlipayMiniAppWebIDE()) {
        const s = document.createElement('script'); 

        s.src = http://www.wxapp-union.com/'https://appx/web-view.min.js';
        s.onload = () => {
            // 加載完成時觸發自定義事件
            const customEvent = new CustomEvent('myLoad', { detail:'' });
            document.dispatchEvent(customEvent);
        };

        s.onerror = (e) => {
            // 加載失敗時上傳日志
            uploadLog({
                tip: `INJECT_MINIAPP_SCRIPT_ERROR`,
            });
        };

        document.body.insertBefore(s, document.body.firstChild);
    }
}

加載腳本完成後，我們就可(kě)以調用my.postMessage和(hé)my.onMessage進行通(tōng)信（統一約定h5發送消息給小程序時，必須帶action，小程序根據action處理業(yè)務邏輯，同時小程序處理完成的結果必須帶type,h5在不同的業(yè)務場景下(xià)通(tōng)過my.onMessage處理不同type的響應），比如(rú)典型的，h5調用小程序簽到：
h5部分代碼如(rú)下(xià)：

// 處理掃臉簽到邏輯
    const faceVerify = (): Promise<AlipaySignResult> => {

        return new Promise((resolve) => {
            const handle = () => {
                window.my.onMessage = (result: AlipaySignResult) => {
                    if (result.type === 'FACE_VERIFY_TIMEOUT' ||
                        result.type === 'DO_SIGN' ||
                        result.type === 'FACE_VERIFY' ||
                        result.type === 'LOCATION' ||
                        result.type === 'LOCATION_UNBELIEVABLE' ||
                        result.type === 'NOT_IN_ALIPAY') {
                        resolve(result);
                    }
                };

                window.my.postMessage({ action: SIGN_CONSTANT.FACE_VERIFY, activityId: id, userId: user.userId });
            };

            if (window.my) {
                handle();
            } else {
                // 先記錄錯誤日志
                sendErrors('/threehours.3hours-errors.NO_MY_VARIABLE', { msg: '變量不存在' });
                // 監聽load事件
                document.addEventListener('myLoad', handle);
            }
        });
    };

實際上還是相當繁瑣的，使用時都要先判斷my是否存在，進行不同的處理，一兩處還好，多了就受不了了，而且這種散亂的代碼遍布各處，甚至是不同的應用，于是，我封裝了下(xià)面這個(gè)sdkminiAppBus，先來看看怎麼用，還是上面的場景

// 處理掃臉簽到邏輯
    const faceVerify = (): Promise<AlipaySignResult> => {
        miniAppBus.postMessage({ action: SIGN_CONSTANT.FACE_VERIFY, activityId: id, userId: user.userId });
        return miniAppBus.subscribeAsync<AlipaySignResult>([
            'FACE_VERIFY_TIMEOUT',
            'DO_SIGN',
            'FACE_VERIFY',
            'LOCATION',
            'LOCATION_UNBELIEVABLE',
            'NOT_IN_ALIPAY',
        ])
    };

可(kě)以看到，無論是postMessage還是監聽message，都不需要再關(guān)注環境，直接使用即可(kě)。在業(yè)務場景複雜的情況下(xià)，提效尤為明顯。

三、實現及背後的思考

為了滿足不同場景和(hé)使用的方便，公開暴露的interface如(rú)下(xià)：

  
       interface MiniAppEventBus {
           /**
           * @description 回調函數訂閱單個(gè)、或多個(gè)type
           * @template T
           * @param {(string | string[])} type
           * @param {MiniAppMessageSubscriber<T>} callback
           * @memberof MiniAppEventBus
           */
           subscribe<T extends unknown = {}>(type: string | string[], callback: MiniAppMessageSubscriber<T>): void;
           /**
           * @description Promise 訂閱單個(gè)、或多個(gè)type
           * @template T
           * @param {(string | string[])} type
           * @returns {Promise<MiniAppMessage<T>>}
           * @memberof MiniAppEventBus
           */
           subscribeAsync<T extends {} = MiniAppMessageBase>(type: string | string[]): Promise<MiniAppMessage<T>>;
           /**
           * @description 取消訂閱單個(gè)、或多個(gè)type
           * @param {(string | string[])} type
           * @returns {Promise<void>}
           * @memberof MiniAppEventBus
           */
           unSubscribe(type: string | string[]): Promise<void>;
           /**
           * @description postMessage替代，無需關(guān)注環境變量
           * @param {MessageToMiniApp} msg
           * @returns {Promise<unknown>}
           * @memberof MiniAppEventBus
           */
           postMessage(msg: MessageToMiniApp): Promise<unknown>;
       }

subscribe：函數接收兩個(gè)參數，
type:需要訂閱的type，可(kě)以是字符串，也可(kě)以是數組。
callback:回調函數。
subscribeAsync：接收type（同上），返回Promise對象，值得注意的是，目前隻要監聽到其中(zhōng)一個(gè)type返回，promise就resolved，未來對同一個(gè)action對應多個(gè)結果type時存在問(wèn)題，需要拓展，不過目前還未遇到此類場景。
unsubscribe：取消訂閱。
postMessage：postMessage替代，無需關(guān)注環境變量。

完整代碼：

   import { injectMiniAppScript } from './tools';

   /**
   * @description 小程序返回結果
   * @export
   * @interface MiniAppMessage
   */

   interface MiniAppMessageBase {
       type: string;
   }

   type MiniAppMessage<T extends unknown = {}> = MiniAppMessageBase & {
       [P in keyof T]: T[P]
   }
   /**
   * @description 小程序接收消息
   * @export
   * @interface MessageToMiniApp
   */
   export interface MessageToMiniApp {
       action: string;
       [x: string]: unknown
   }

   interface MiniAppMessageSubscriber<T extends unknown = {}> {
       (params: MiniAppMessage<T>): void
   }
   interface MiniAppEventBus {
       /**
       * @description 回調函數訂閱單個(gè)、或多個(gè)type
       * @template T
       * @param {(string | string[])} type
       * @param {MiniAppMessageSubscriber<T>} callback
       * @memberof MiniAppEventBus
       */
       subscribe<T extends unknown = {}>(type: string | string[], callback: MiniAppMessageSubscriber<T>): void;
       /**
       * @description Promise 訂閱單個(gè)、或多個(gè)type
       * @template T
       * @param {(string | string[])} type
       * @returns {Promise<MiniAppMessage<T>>}
       * @memberof MiniAppEventBus
       */
       subscribeAsync<T extends {} = MiniAppMessageBase>(type: string | string[]): Promise<MiniAppMessage<T>>;
       /**
       * @description 取消訂閱單個(gè)、或多個(gè)type
       * @param {(string | string[])} type
       * @returns {Promise<void>}
       * @memberof MiniAppEventBus
       */
       unSubscribe(type: string | string[]): Promise<void>;
       /**
       * @description postMessage替代，無需關(guān)注環境變量
       * @param {MessageToMiniApp} msg
       * @returns {Promise<unknown>}
       * @memberof MiniAppEventBus
       */
       postMessage(msg: MessageToMiniApp): Promise<unknown>;
   }
   class MiniAppEventBus implements MiniAppEventBus{

       /**
       * @description: 監聽函數
       * @type {Map<string, MiniAppMessageSubscriber[]>}
       * @memberof MiniAppEventBus
       */
       listeners: Map<string, MiniAppMessageSubscriber[]>;
       constructor() {
           this.listeners = new Map<string, Array<MiniAppMessageSubscriber<unknown>>>();
           this.init();
       }

       /**
       * @description 初始化
       * @private
       * @memberof MiniAppEventBus
       */
       private init() {
           if (!window.my) {
               // 引入腳本
               injectMiniAppScript();
           }

           this.startListen();
       }

       /**
       * @description 保證my變量存在的時候執行函數func
       * @private
       * @param {Function} func
       * @returns 
       * @memberof MiniAppEventBus
       */
       private async ensureEnv(func: Function) {
           return new Promise((resolve) => {
               const promiseResolve = () => {
                   resolve(func.call(this));
               };

               // 全局變量
               if (window.my) {
                   promiseResolve();
               }

               document.addEventListener('myLoad', promiseResolve);
           });
       }

       /**
       * @description 監聽小程序消息
       * @private
       * @memberof MiniAppEventBus
       */
       private listen() {
           window.my.onMessage = (msg: MiniAppMessage<unknown>) => {
               this.dispatch<unknown>(msg.type, msg);
           };
       }

       private async startListen() {
           return this.ensureEnv(this.listen);
       }

       /**
       * @description 發送消息，必須包含action
       * @param {MessageToMiniApp} msg
       * @returns 
       * @memberof MiniAppEventBus
       */
       public postMessage(msg: MessageToMiniApp) {
           return new Promise((resolve) => {
               const realPost = () => {
                   resolve(window.my.postMessage(msg));
               };

               resolve(this.ensureEnv(realPost));
           });
       }

       /**
       * @description 訂閱消息，支持單個(gè)或多個(gè)
       * @template T
       * @param {(string|string[])} type
       * @param {MiniAppMessageSubscriber<T>} callback
       * @returns 
       * @memberof MiniAppEventBus
       */
       public subscribe<T extends unknown = {}>(type: string | string[], callback: MiniAppMessageSubscriber<T>) {
           const subscribeSingleAction = (type: string, cb: MiniAppMessageSubscriber<T>) => {
               let listeners = this.listeners.get(type) || [];

               listeners.push(cb);
               this.listeners.set(type, listeners);
           };

           this.forEach(type,(type:string)=>subscribeSingleAction(type,callback));
       }

       private forEach(type:string | string[],cb:(type:string)=>void){
           if (typeof type === 'string') {
               return cb(type);
           }

           for (const key in type) {
               if (Object.prototype.hasOwnProperty.call(type, key)) {
                   const element = type[key];

                   cb(element);
               }
           }
       }

       /**
       * @description 異步訂閱
       * @template T
       * @param {(string|string[])} type
       * @returns {Promise<MiniAppMessage<T>>}
       * @memberof MiniAppEventBus
       */
       public async subscribeAsync<T extends {} = MiniAppMessageBase>(type: string | string[]): Promise<MiniAppMessage<T>> {
           return new Promise((resolve, _reject) => {
               this.subscribe<T>(type, resolve);
           });
       }

       /**
       * @description 觸發事件
       * @param {string} type
       * @param {MiniAppMessage} msg
       * @memberof MiniAppEventBus
       */
       public async dispatch<T = {}>(type: string, msg: MiniAppMessage<T>) {
           let listeners = this.listeners.get(type) || [];

           listeners.map(i => {
               if (typeof i === 'function') {
                   i(msg);
               }
           });
       }

       public async unSubscribe(type:string | string[]){
           const unsubscribeSingle = (type: string) => {
               this.listeners.set(type, []);
           };

           this.forEach(type,(type:string)=>unsubscribeSingle(type));
       }
   }

   export default new MiniAppEventBus();

class内部處理了腳本加載，變量判斷，消息訂閱一系列邏輯，使用時不再關(guān)注。

四、小程序内部的處理

定義action handle，通(tōng)過策略模式解耦：

const actionHandles = {
    async FACE_VERIFY(){},
    async GET_STEP(){},
    async UPLOAD_HASH(){},
    async GET_AUTH_CODE(){},
    ...// 其他action
}
.... 
// 在webview的消息監聽函數中(zhōng)
async startProcess(e) {
    const data = http://www.wxapp-union.com/e.detail;
    // 根據不同的action調用不同的handle處理
    const handle = actionHandles[data.action];
    if (handle) {
        
        return actionHandles[data.action](this, data)
    }
    return uploadLogsExtend({
        tip: STRING_CONTANT.UNKNOWN_ACTIONS,
        data
    })
}