uni-app实现web-view和App之间的互相通信

南暖孤舟 發表於 2024-7-17 12:31:00

uni-app实现web-view和App之间的互相通信

<h4>1.web-view向App传递消息</h4>
官网对于uni-app使用web-view的介绍如下：web-view
<img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122656553-1238926745.png">
 注意事项提到postMessage方法,这就是web-view向App传递消息的方法，使用如下：
<img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122712475-969072306.png">
 
注意H5本身不支持uni-app里面的方法，所以在项目中引入支持调用uni-app方法的库
<img src="https://img2024.cnblogs.com/blog/1086124/202407/1086124-20240717122732611-427347274.png">
 web-view页面使用：
<div class="cnblogs_code">
<pre>uni.postMessage({
data: {
 action: 'click'
}
});</pre>
</div>
uni-app接受消息：
<div class="cnblogs_code">
<pre>view>

<uni-status-bar></uni-status-bar>

<web-view @message="getMessage" :src="webViewUrl"></web-view>
</view>

getMessage(e) {
console.log('webView传递过来的消息')
const action = e.detail.data[0].action
}
 </pre>
</div>
这种方法只能适用于H5不是UNI写的，如果是UNI写的会报错  
<pre>uni.postMessage 不是一个方法，原因在于 webview 的uni方法和dUni-app 的uni方法冲突了，解决办法，把js下载下来里面的方法明换掉； 例如： </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[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++);
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>
这里将Uni方法换位了webUni
调用
<div class="cnblogs_code">
<pre>webUni.postMessage({
 data: {
 randstr: res.randstr,
 ticket: res.ticket
 }
 });</pre>
</div>
 
<pre>还有一个问题，@message方法，如果有数据交互，关闭webview 之后，再进来之前的数据还是一直存在的 所以要在离开页面或者特定时间取消@message方法 例如在webview关闭的时候取消  </pre>
<div class="cnblogs_code">
<pre> // 离开页面时清除监听
 onHide() {
 uni.removeEventListener('message', this.onMessage);
 // this.listenMessage = false;
 },</pre>
</div>
 
<pre> </pre>

</div>
<div id="MySignature" role="contentinfo">
浩楠哥 
来源：https://www.cnblogs.com/haonanZhang/p/18307054

頁: [1]

琼殿技术论坛's Archiver

uni-app实现web-view和App之间的互相通信