uniapp中app與webview的通訊代碼示例
更新時間：2024年03月16日 11:44:22 作者：姜餅人code
這篇文章主要給大家介紹了關(guān)于uniapp中app與webview通訊的相關(guān)資料,這里的通信主要是打包APP端和web-view內(nèi)嵌網(wǎng)頁的雙向通信,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.app->webview
app發(fā)送
此處使用evalJS方法
<template>
<web-view src="../../static/chat2.html"></web-view>
<button @click="chatRes">生成評估總結(jié)</button>
</template>
<script>
methods:{
chatRes() {
let str="需要發(fā)送的信息"
const _funName = 'msgFromUniapp'
const _data = {
msg: str
};
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);
},
}
</script>webview接收
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>評測記錄</title>
</head>
<body>
</body>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script>
let msg=''
window.msgFromUniapp = function(arg) {
msg=arg.msg
console.log(msg);
}
</script>
</html>2.webview->app
webview發(fā)送
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>評測記錄</title>
</head>
<body>
</body>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script>
const sendMsg = () => {
let str="待發(fā)送的信息"
uni.postMessage({
data: {
msgContent:str
}
})
}
</script>
</html>app接收
<template>
<web-view @message="handlerMessage" src="../../static/chat2.html"></web-view>
</template>
<script>
methods:{
handlerMessage(event) {
console.log(event.detail.data[0])
},
}
</script>3.踩坑記錄
webview使用uni.postMessage發(fā)送消息給app時報uni.postMessage is not a function
解決方案
- 取消引入官方庫uni-webview-js
- 改寫uni為y_uni，調(diào)用y_uni.postMessage
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>評測記錄</title>
</head>
<body>
</body>
<script>
let y_uni;
! function(e, n) {
y_uni = n();
return
console.log(4777)
console.log(n())
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
define.amd ? define(n) : (e = e || self).y_uni = 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 i(e, i) {
return n.call(e, i)
}
var t = [];
function r() {
return window.__dcloud_weex_postMessage || window.__dcloud_weex_
}
var o = function(e, n) {
var i = {
options: {
timestamp: +new Date
},
name: e,
arg: n
};
if (r()) {
if ("postMessage" === e) {
var o = {
data: [n]
};
return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(o) : window
.__dcloud_weex_.postMessage(JSON.stringify(o))
}
var a = {
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
};
window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(a) : window
.__dcloud_weex_.postMessageToService(JSON.stringify(a))
}
if (!window.plus) return window.parent.postMessage({
type: "WEB_INVOKE_APPSERVICE",
data: i,
pageId: ""
}, "*");
if (0 === t.length) {
var d = plus.webview.currentWebview();
if (!d) throw new Error("plus.webview.currentWebview() is undefined");
var s = d.parent(),
w = "";
w = s ? s.id : d.id, t.push(w)
}
if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
}, "__uniapp__service");
else {
var u = JSON.stringify(i);
plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
"WEB_INVOKE_APPSERVICE", '",').concat(u, ",").concat(JSON.stringify(t), ");"))
}
},
a = {
navigateTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("navigateTo", {
url: encodeURI(n)
})
},
navigateBack: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.delta;
o("navigateBack", {
delta: parseInt(n) || 1
})
},
switchTab: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("switchTab", {
url: encodeURI(n)
})
},
reLaunch: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("reLaunch", {
url: encodeURI(n)
})
},
redirectTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("redirectTo", {
url: encodeURI(n)
})
},
getEnv: function(e) {
r() ? e({
nvue: !0
}) : window.plus ? e({
plus: !0
}) : e({
h5: !0
})
},
postMessage: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
o("postMessage", e.data || {})
}
},
d = /uni-app/i.test(navigator.userAgent),
s = /Html5Plus/i.test(navigator.userAgent),
w = /complete|loaded|interactive/;
var u = window.my && navigator.userAgent.indexOf(["t", "n", "e", "i", "l", "C", "y", "a", "p", "i", "l",
"A"
].reverse().join("")) > -1;
var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(
navigator.userAgent);
var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i
.test(navigator.userAgent);
var p = window.qa && /quickapp/i.test(navigator.userAgent);
var f = window.ks && window.ks.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i
.test(navigator.userAgent);
var l = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent);
var _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i
.test(navigator.userAgent);
var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent);
for (var h, P = function() {
window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
bubbles: !0,
cancelable: !0
}))
}, b = [function(e) {
if (d || s) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
.addEventListener("DOMContentLoaded", e) : window.plus && w.test(document
.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), a
}, function(e) {
if (m) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
}, function(e) {
if (v) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
}, function(e) {
if (u) {
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 (g) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
}, function(e) {
if (c) 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) {
if (f) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.ks.miniProgram
}, function(e) {
if (l) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (_) return window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) :
document.addEventListener("JDJSBridgeReady", e), window.jd.miniProgram
}, function(e) {
if (E) return window.xhs.miniProgram
}, function(e) {
return document.addEventListener("DOMContentLoaded", e), a
}], y = 0; y < b.length && !(h = b[y](P)); y++);
h || (h = {});
var B = "undefined" != typeof y_uni ? y_uni : {};
if (!B.navigateTo)
for (var S in h) i(h, S) && (B[S] = h[S]);
return B.webView = h, B
}));
const sendMsg = async () => {
let str="待發(fā)送的信息"
y_uni.postMessage({
data: {
msgContent:str
}
})
}
</script>
</html>總結(jié)
到此這篇關(guān)于uniapp中app與webview通訊的文章就介紹到這了,更多相關(guān)uniapp app與webview通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了webpack搭建vue環(huán)境時報錯異常解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue3組件Ref打印Proxy(Object)與defineExpose使用及說明
Vue3中,通過ref獲取子組件實例時,顯示為Proxy(Object)而非原始對象,這是由于Vue3的響應(yīng)式系統(tǒng)使用Proxy實現(xiàn)數(shù)據(jù)劫持,為了顯式控制組件暴露的API,Vue3引入了defineExpose,結(jié)合TypeScript,可以安全地定義和管理組件的公共API2025-10-10
最近開始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實例代碼,需要的朋友可以參考下2023-04-04
vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進行一下總結(jié)，感興趣的可以學(xué)習(xí)一下2021-12-12
三分鐘讓你快速學(xué)會axios在vue項目中的基本用法(推薦!)
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,下面這篇文章主要給大家介紹了如何通過三分鐘讓你快速學(xué)會axios在vue項目中的基本用法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
詳解Vite+JavaScript+Vue+Yarn實現(xiàn)登錄頁面實戰(zhàn)
本文主要介紹了Vite+JavaScript+Vue+Yarn實現(xiàn)登錄頁面實戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
本文主要介紹了Element中Select選擇器的實現(xiàn)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記（1）
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Jenkins+docker容器部署前端Vue項目的完整步驟記錄
Jenkins是一個開源軟件項目,是基于Java開發(fā)的一種持續(xù)集成工具,用于監(jiān)控持續(xù)重復(fù)的工作,旨在提供一個開放易用的軟件平臺,使軟件項目可以進行持續(xù)集成,這篇文章主要介紹了Jenkins+docker容器部署前端Vue項目的完整步驟,需要的朋友可以參考下2026-01-01
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進行開發(fā)與維護,然后在制作網(wǎng)頁的時候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12