赞
踩
各端引用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为小程序里面对应的页面。
注:前面记得打 /
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。