H5页面与app的交互（jsBridge）和小程序的交互（weixin-js-sdk）

最新推荐文章于 2024-06-24 15:30:13 发布

大圣爱打猪八戒

最新推荐文章于 2024-06-24 15:30:13 发布

阅读量4.5k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_63108819/article/details/124018285

版权

各端引用H5页面，H5跳回各端交互。

1、H5页面与app的交互（jsBridge）：

在main.ts里面：

const ua = window.navigator.userAgent;
let AppSource = "";

if (
  ua.match(/iPad/) ||
  ua.match(/iPhone/) ||
  ua.match(/iPod/) ||
  ua.match(/ios/)
) {
  AppSource = "ios";
} else if (/android_poly/i.test(ua)) {
  AppSource = "android";
}
Vue.prototype.$AppSource = AppSource;

可以在mixin.ts里定义也可以直接建一个ts文件定义：

  /**
   * APP端交互
   * @param method 交互方法
   * @param params 给app传输数据
   * @param callback 非app环境处理
   */

  jsBridge(method: string , params: any, callback?: () => any): void {
    if (Vue.prototype.$AppSource === "ios") {
      if (window.webkit.messageHandlers[method]) {
        window.webkit.messageHandlers[method].postMessage(params);
      } else {
        callback && callback();
      }
    } else if (Vue.prototype.$AppSource === "android") {
      if (window.android[method]) {
        if (params) {
          window.android[method](JSON.stringify(params));
        } else {
          window.android[method]();
        }
      } else {
        callback && callback();
      }
    } else {
      // 否则是H5页面
      callback && callback();
    }
  }

其中method为APP和H5约定的方法，params为约定要传的参数。

列如：双方定义的方法名为 goClassify 参数为一个变量：linkId

H5页面使用 this.jsBridge("goClassify", linkId);

2、H5页面与小程序的交互（weixin-js-sdk）：

安装：

npm install weixin-js-sdk

官方使用说明：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

在使用页面引用：

import wx from "weixin-js-sdk";

H5页面跳转app交互：

列如：

wx.miniProgram.navigateTo({

url: `/pagesIndex/performanceScreeningF?id=${linkId}&theaterId=${theaterId}`,

});

wx.miniProgram.switchTab({

url: `/pages/mall/mall`,

});

url为小程序里面对应的页面。

注：前面记得打 /