【uni-app】App与webview双向及时通信

九天猎人 · 2024-10-19 07:55:52

【uni-app】App与webview双向及时通信

在 Uniapp 中，App 与里面嵌入的 webview 进行双向的及时通信
vue2 ，模仿器
重要分为两部分

webview 向 app 发送信息
app 向 webview 发送信息

以下是实现方式，用一个例子来阐明
（文章末了我会放这个例子的github地址）
webview 向 app 发送信息

示例： webview 里面向 app 发送图片的 base64 ， app 生存图片到系统相册；
此处分为， app 和 webview 部分：

app 注册事件
webview 触发 app 的事件

app部分

生存到系统相册功能（功能具体细节不重要）
1. // utils/appMessageHandler.js
2. // 这里代码都在app下执行
3. function appSaveImgFile(params) {
4. const { base64, downloadName } = params
5. const bitmap = new plus.nativeObj.Bitmap("test");
6. bitmap.loadBase64Data(
7. base64,
8. function () {
9. const url = "_doc/" + downloadName + ".png"; // url为时间戳命名方式
10. bitmap.save(
11. url,
12. {
13. overwrite: true, // 是否覆盖
14. // quality: 'quality' // 图片清晰度
15. },
16. (i) => {
17. plus.gallery.save(
18. i.target,
19. function () {
20. uni.showToast({
21. title: "APP图片保存至相册",
22. icon: "none",
23. });
24. bitmap.clear();
25. },
26. function (e) {
27. uni.showToast({
28. title: "APP图片保存至相册失败:" + JSON.stringify(e),
29. icon: "none",
30. });
31. bitmap.clear();
32. }
33. );
34. },
35. (e) => {
36. uni.showToast({
37. title: "图片保存失败1:" + JSON.stringify(e),
38. icon: "none",
39. });
40. bitmap.clear();
41. }
42. );
43. },
44. (e) => {
45. uni.showToast({
46. title: "图片保存失败2:" + JSON.stringify(e),
47. icon: "none",
48. });
49. bitmap.clear();
50. }
51. );
52. }
54. export {
55. appSaveImgFile,
56. }
复制代码
在App.vue中注册事件；将 appMessageHandle.js 里面所有导出的事件进行注册；留意需要条件编译
1. // App.vue
2. <script>
3. import * as appPlusMessageHandler from "./utils/appMessageHandler";
5. export default {
6. data() {
7. return {
8. appRegisterMap: undefined,
9. };
10. },
11. onLaunch: function () {
12. console.log("App Launch");
13. // #ifdef APP-PLUS
14. // 注册事件
15. plus.globalEvent.addEventListener("plusMessage", this.plusMessageHandler);
16. // #endif
17. },
18. methods: {
19. /**
20. * 将所有导出的 app 事件
21. * 用 map 建立函数名 - 函数的联系
22. * 返回 map
23. */
24. registerAppPlusMap() {
25. if (this.appRegisterMap) {
26. return this.appRegisterMap;
27. }
28. let map = new Map();
29. Object.keys(appPlusMessageHandler).forEach((item) => {
30. map.set(item, appPlusMessageHandler[item]);
31. });
32. this.appRegisterMap = map;
33. return map;
34. },
35. /**
36. * 用 action 获取的函数名
37. * 通过 map 获取到函数，调用执行
38. */
39. plusMessageHandler(msg) {
40. let map = this.registerAppPlusMap();
41. if (msg.data.args.data.arg?.action) {
42. let handler = map.get(msg.data.args.data.arg?.action);
43. let params = msg.data.args.data.arg?.params;
44. handler && handler(params);
45. }
46. },
47. },
48. };
49. </script>
复制代码

webview 部分

通过使用 uni.webview.js (文末附录放源码，我做了些许修改，逻辑没改，是一些变量调解了下) 的功能 postMessage , 向 app 发送图片生成的 base64；

main.js 中挂载 uWeb (uni.webview.js)
1. // main.js
2. // 全局添加uWeb
3. // #ifdef H5
4. import uWeb from "@/utils/uni.webview.js";
5. // #endif
7. // #ifdef H5
8. Vue.prototype.$uWeb = uWeb;
9. // #endif
复制代码
生成的图片base64，通过以下方式发送给 app
此处 action 与上面 plusMessageHandler方法的 action 是对应的
appSaveImgFile 与 appMessageHandler.js 里的函数名是对应的
1. // 某个页面或者js
2. this.$uWeb.postMessage({
3. data: {
4. action: "appSaveImgFile",
5. params: {
6. base64: imgBase64,
7. downloadName,
8. },
9. },
10. });
复制代码

至此，webview 能随时向 app 发送消息了

App 向 webview 发送消息

使用 evalJS
分两步：

webview 在 window 注册事件
app 使用 evalJs 触发 webview 的事件

留意：确保webview 先注册好事件之后，app发送的事件才能被 webview 接收到
具体实现，utils下新建appToWebview.js; appSendMessage 是给 App 用的；webviewGetMessage 是给 webview 注册用的

// appToWebview.js
// 发送信息之前，先要有 webviewGetMessage
function appSendMessage(_this, action, params) {
const self = _this;
self.currentWebview = self.$scope?.$getAppWebview()?.children()[0];
//传递大量数据
self.currentWebview?.evalJS(`${action}(${JSON.stringify(params)})`);
}
function webviewGetMessage(action, callback) {
// #ifdef H5
window[action] = (data) => {
let params = JSON.parse(JSON.stringify(data));
callback(params);
};
// #endif
}
export { appSendMessage, webviewGetMessage };

复制代码

webview 部分

用 webviewGetMessage 注册一个 msgFromApp 名字的事件，给 App 调用；

// 某个 webview 页面，
created() {
webviewGetMessage("msgFromApp", (params) => {
console.log("getAppParams", params);
this.appMsg = params;
});
},

复制代码

App

用 appSendMessage 发送一个信息给 webview

// 某个有 webview 的 app 页面，
mounted() {
setTimeout(() => {
appSendMessage(this, "msgFromApp", { msgFromApp: 233 });
}, 5000);
},

复制代码

至此，完成了 app 向 webview 发送信息
GitHub 地址

GitHub - adcGG/uniapp-app-webview: Communication between app and webview
这里 uniapp 项目，app 和用到的 h5 地址是同一个项目下的
app/index 用到的 webview 的 url 为 webviewUrl: “http://192.168.1.16:8080/#/pages/h5/index”,

附录

uni.webview.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;
});

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【uni-app】App与webview双向及时通信

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云