复杂场景下的h5与小程序通信

头像
懒懒的技术宅
    阅读 10 分钟
    17

    复杂场景下的h5与小程序通信

    一、背景

    在套壳小程序盛行的当下， h5调用小程序能力来打破业务边界已成为家常便饭，h5与小程序的结合，极大地拓展了h5的能力边界，丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。
    但在套壳小程序中，h5与小程序通信存在以下几个问题：
    • 注入小程序全局变量的时机不确定，可能调用的时候不存在小程序变量。和全局变量my相关的判断满天飞，每个使用的地方都需要判断是否已注入变量，否则就要创建监听。
    • 小程序处理后的返回结果可能有多种，h5需要在具体使用时监听多个结果进行处理。
    • 一旦监听建立，就无法取消，在组件销毁时如果没有判断组件状态容易导致内存泄漏。

    二、在业务内的实践

    • 因业务的特殊性，需要投放多端,小程序sdk的加载没有放到head里面，而是在应用启动时动态判断是小程序环境时自动注入的方式：

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

        s.src = '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);
    }
}

      加载脚本完成后，我们就可以调用my.postMessage和my.onMessage进行通信（统一约定h5发送消息给小程序时，必须带action，小程序根据action处理业务逻辑，同时小程序处理完成的结果必须带type,h5在不同的业务场景下通过my.onMessage处理不同type的响应），比如典型的，h5调用小程序签到：
      h5部分代码如下：

      // 处理扫脸签到逻辑
    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是否存在，进行不同的处理，一两处还好，多了就受不了了，而且这种散乱的代码遍布各处，甚至是不同的应用，于是，我封装了下面这个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',
        ])
    };

      可以看到，无论是postMessage还是监听message，都不需要再关注环境，直接使用即可。在业务场景复杂的情况下，提效尤为明显。

    三、实现及背后的思考

    • 为了满足不同场景和使用的方便，公开暴露的interface如下：

        
       interface MiniAppEventBus {
           /**
           * @description 回调函数订阅单个、或多个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 订阅单个、或多个type
           * @template T
           * @param {(string | string[])} type
           * @returns {Promise<MiniAppMessage<T>>}
           * @memberof MiniAppEventBus
           */
           subscribeAsync<T extends {} = MiniAppMessageBase>(type: string | string[]): Promise<MiniAppMessage<T>>;
           /**
           * @description 取消订阅单个、或多个type
           * @param {(string | string[])} type
           * @returns {Promise<void>}
           * @memberof MiniAppEventBus
           */
           unSubscribe(type: string | string[]): Promise<void>;
           /**
           * @description postMessage替代，无需关注环境变量
           * @param {MessageToMiniApp} msg
           * @returns {Promise<unknown>}
           * @memberof MiniAppEventBus
           */
           postMessage(msg: MessageToMiniApp): Promise<unknown>;
       }

      subscribe：函数接收两个参数，
      type:需要订阅的type，可以是字符串，也可以是数组。
      callback:回调函数。
      subscribeAsync：接收type（同上），返回Promise对象，值得注意的是，目前只要监听到其中一个type返回，promise就resolved，未来对同一个action对应多个结果type时存在问题，需要拓展，不过目前还未遇到此类场景。
      unsubscribe：取消订阅。
      postMessage：postMessage替代，无需关注环境变量。

      完整代码：

         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 回调函数订阅单个、或多个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 订阅单个、或多个type
       * @template T
       * @param {(string | string[])} type
       * @returns {Promise<MiniAppMessage<T>>}
       * @memberof MiniAppEventBus
       */
       subscribeAsync<T extends {} = MiniAppMessageBase>(type: string | string[]): Promise<MiniAppMessage<T>>;
       /**
       * @description 取消订阅单个、或多个type
       * @param {(string | string[])} type
       * @returns {Promise<void>}
       * @memberof MiniAppEventBus
       */
       unSubscribe(type: string | string[]): Promise<void>;
       /**
       * @description postMessage替代，无需关注环境变量
       * @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 订阅消息，支持单个或多个
       * @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内部处理了脚本加载，变量判断，消息订阅一系列逻辑，使用时不再关注。

    四、小程序内部的处理

    • 定义action handle，通过策略模式解耦：

      const actionHandles = {
    async FACE_VERIFY(){},
    async GET_STEP(){},
    async UPLOAD_HASH(){},
    async GET_AUTH_CODE(){},
    ...// 其他action
}
.... 
// 在webview的消息监听函数中
async startProcess(e) {
    const data = 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
    })
}

      使用起来也是得心顺畅，舒服。

    其他

    类型完备，使用时智能提示，方便快捷。

    javascript小程序发布订阅模式
    懒懒的技术宅
    2k 声望4.6k 粉丝

    弱鸡全栈攻城狮

    « 上一篇
    Typescript 进阶

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 22阅读 9.9k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新