应用场景： 我们使用的uniapp开发的应用，分为app和h5两个端。因为功能使用到了第三方，需要跳转的第三方的页面，进行操作，操作完成后需要返回我们原本的h5或者app,但是因为到了第三方的页面，在webview中我们是返回不去的。h5环境下，将三方配置的回调地址配置成我们h5的地址的话，他本身还是存在于webview中，app也是一样，一直陷webview中，不能返回本来应用。 这样就需要使用到webview的通信来返回本身应用。
实现方式
首先我们需要在项目中，和pages目录同级的，新建一个“ hybrid ”文件夹，用来专门存放我们相关的文件。
详细解释一些这几个文件， 其中我们需要两个js文件
uni_webview.1.5.5.js用于app的可以通过 gitcode.net/dcloud/uni-… 进行下载，
web-view-custom.js 用于h5的，文件内容文章末尾吧
另外还有一个web-view页面，用于跳转第三方的页面
web-view.vue，通过接收的消息来返回原本应用，可以自定义返回的页面，这里需要注意的是h5环境下会一进入就会发送默认的消息，但是我们可以根据返回消息内容来判断是否返回。或者进行其他操作
<template>
<view class="web-view">
<!-- #ifdef H5 -->
<web-view ref="webview" :src="src" @message="handleMessage" :webview-styles="{ 'padding-top': '44px' }"></web-view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<web-view :src="src" @message="getMessage" class="app" :webview-styles="{ 'padding-top': '44px' }"></web-view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
src: '',// 跳转的地址
}
},
onLoad(e) {
// 接收跳转的地址
let params = JSON.parse(decodeURIComponent(e.params))
this.src = params.url
// h5端接收信息
// #ifdef H5
window.addEventListener('message', this.handleMessage)
// #endif
},
methods: {
// h5环境接收消息
handleMessage: function (msg) {
console.log(msg, 'h5接收到了')
let back = msg?.data?.data?.arg?.back
if (back) {
uni.switchTab({
url: `/pages/tabbar/home/index`
})
}
},
// app环境下接收消息
getMessage(e) {
let back = e.detail.data[0]?.back
console.log(e, 'app接收到了')
if (back) {
uni.switchTab({
url: `/pages/tabbar/home/index`
})
}
}，
}
}
</script>
接下来看两个html的内容 templateApp.html（app的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>111</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<body>
<div id="app">
<button id="button">返回App首页</button>
</div>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="./js/web-view-custom.js"></script>
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
back: false
}
});
});
// 获取按钮，绑定点击事件，这里发送消息，消息内容可以自定义
const btn = document.getElementById('button');
btn.addEventListener('click', function() {
// 消息内容
uni.postMessage({
data: {
back: true
}
});
})
</script>
</html>
templateH5.html（h5的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<body>
<div id="app">
<button id="button">返回h5首页</button>
</div>
</body>
<script type="text/javascript" src="../js/web-view-custom.js"></script>
<script type="text/javascript">
const btn = document.getElementById('button')
btn.addEventListener('click', () => {
webUni.postMessage({
data: {
back: true
}
})
})
document.addEventListener('UniAppJSBridgeReady', function() {
webUni.getEnv(function(res) {
console.log('获取当前环境：' + JSON.stringify(res));
});
webUni.postMessage({
data: {
back: false
}
})
});
</script>
</html>
文章内容不一定清楚，还是希望可以为大家提供一点思路或参考，如果有不太清楚的小伙伴，可以联系作者或评论，期待可以帮到大家。
web-view-custom.js 文件内容
! function(e, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
define.amd ? define(n) : (e = e || self).webUni = n()
}(this, (function() {
"use strict";
try {
var e = {};
Object.defineProperty(e, "passive", {
get: function() {
!0
}
}), window.addEventListener("test-passive", null, e)
} catch (e) {}
var n = Object.prototype.hasOwnProperty;
function t(e, t) {
return n.call(e, t)
}
var i = [],
a = function(e, n) {
var t = {
options: {
timestamp: +new Date
},
name: e,
arg: n
};
if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
if ("postMessage" === e) {
var a = {
data: [n]
};
return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window
.__dcloud_weex_.postMessage(JSON.stringify(a))
}
var o = {
type: "WEB_INVOKE_APPSERVICE",
args: {
data: t,
webviewIds: i
}
};
window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window
.__dcloud_weex_.postMessageToService(JSON.stringify(o))
}
if (!window.plus) return window.parent.postMessage({
type: "WEB_INVOKE_APPSERVICE",
data: t,
pageId: ""
}, "*");
if (0 === i.length) {
var r = plus.webview.currentWebview();
if (!r) throw new Error("plus.webview.currentWebview() is undefined");
var d = r.parent(),
s = "";
s = d ? d.id : r.id, i.push(s)
}
if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {
data: t,
webviewIds: i
}
}, "__uniapp__service");
else {
var w = JSON.stringify(t);
plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
"WEB_INVOKE_APPSERVICE", '",').concat(w, ",").concat(JSON.stringify(i), ");"))
}
},
o = {
navigateTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
a("navigateTo", {
url: encodeURI(n)
})
},
navigateBack: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.delta;
a("navigateBack", {
delta: parseInt(n) || 1
})
},
switchTab: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
a("switchTab", {
url: encodeURI(n)
})
},
reLaunch: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
a("reLaunch", {
url: encodeURI(n)
})
},
redirectTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
a("redirectTo", {
url: encodeURI(n)
})
},
getEnv: function(e) {
window.plus ? e({
plus: !0
}) : e({
h5: !0
})
},
postMessage: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
a("postMessage", e.data || {})
}
},
r = /uni-app/i.test(navigator.userAgent),
d = /Html5Plus/i.test(navigator.userAgent),
s = /complete|loaded|interactive/;
var w = window.my && navigator.userAgent.indexOf("AlipayClient") > -1;
var u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
var c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(
navigator.userAgent);
var g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
var v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i
.test(navigator.userAgent);
var p = window.qa && /quickapp/i.test(navigator.userAgent);
for (var l, _ = function() {
window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
bubbles: !0,
cancelable: !0
}))
}, f = [function(e) {
if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
.addEventListener("DOMContentLoaded", e) : window.plus && s.test(document
.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), o
}, function(e) {
if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
}, function(e) {
if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
}, function(e) {
if (w) {
document.addEventListener("DOMContentLoaded", e);
var n = window.my;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
if (u) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
}, function(e) {
if (g) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (p) {
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QaJSBridgeReady", e);
var n = window.qa;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
return document.addEventListener("DOMContentLoaded", e), o
}], m = 0; m < f.length && !(l = f[m](_)); m++);
l || (l = {});
var E = "undefined" != typeof webUni ? webUni : {};
if (!E.navigateTo)
for (var b in l) t(l, b) && (E[b] = l[b]);
return E.webView = l, E
}));
