uni-app实现web-view和App之间的互相通信
<h4>1.web-view向App传递消息</h4><p>官网对于uni-app使用web-view的介绍如下：web-view</p>
<p><img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122656553-1238926745.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> 注意事项提到postMessage方法,这就是web-view向App传递消息的方法，使用如下：</p>
<p><img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122712475-969072306.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p>注意H5本身不支持uni-app里面的方法，所以在项目中引入支持调用uni-app方法的库</p>
<p><img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122732611-427347274.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> web-view页面使用：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">uni.postMessage({
data: {
action: </span>'click'<span style="color: rgba(0, 0, 0, 1)">
}
});</span></pre>
</div>
<p>uni-app接受消息：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://assets.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>view>
<!--#ifdef APP-PLUS -->
<uni-status-bar></uni-status-bar>
<!--#endif -->
<web-view @message="getMessage" :src="webViewUrl"></web-view>
</view>
getMessage(e) {
console.log('webView传递过来的消息')
const action = e.detail.data.action
}
</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://assets.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p><strong>这种方法只能适用于H5不是UNI写的，如果是UNI写的会报错 </strong></p>
<pre>uni.postMessage 不是一个方法，原因在于 webview 的uni方法和dUni-app 的uni方法冲突了，解决办法，把js下载下来里面的方法明换掉；<br>例如：</pre>
<div class="cnblogs_code">
<pre>! 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:
};
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 ? arguments : {},
n = e.url;
a("navigateTo", {
url: encodeURI(n)
})
},
navigateBack: function () {
var e = arguments.length > 0 && void 0 !== arguments ? arguments : {},
n = e.delta;
a("navigateBack", {
delta: parseInt(n) || 1
})
},
switchTab: function () {
var e = arguments.length > 0 && void 0 !== arguments ? arguments : {},
n = e.url;
a("switchTab", {
url: encodeURI(n)
})
},
reLaunch: function () {
var e = arguments.length > 0 && void 0 !== arguments ? arguments : {},
n = e.url;
a("reLaunch", {
url: encodeURI(n)
})
},
redirectTo: function () {
var e = arguments.length > 0 && void 0 !== arguments ? arguments : {},
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 ? arguments : {};
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++);
l || (l = {});
var E = "undefined" != typeof webUni ? webUni : {};
if (!E.navigateTo)
for (var b in l) t(l, b) && (E = l);
return E.webView = l, E
}));</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://assets.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>这里将Uni方法换位了webUni</p>
<p>调用</p>
<div class="cnblogs_code">
<pre>webUni.postMessage({
data: {
randstr: res.randstr,
ticket: res.ticket
}
});</pre>
</div>
<p> </p>
<pre><strong>还有一个问题，@message方法，如果有数据交互，关闭webview 之后，再进来之前的数据还是一直存在的<br>所以要在离开页面或者特定时间取消@message方法</strong><br>例如在webview关闭的时候取消 </pre>
<div class="cnblogs_code">
<pre> // 离开页面时清除监听
onHide() {
uni.removeEventListener('message', this.onMessage);
// this.listenMessage = false;
},</pre>
</div><br><br>
来源：https://www.cnblogs.com/wenkangIT/p/18913022
頁:
[1]