uniapp?webview和H5通信的3種方式代碼示例
更新時(shí)間：2024年04月03日 10:16:52 作者：愛誰誰12138
最近在研究uni-app跨端開發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下
前言
uniapp可以打包成多個(gè)端，再和H5通信的方式中，涉及到uniapp和H5通信，APP和H5通信，小程序和H5通信。其中的h5端分為非uniapp打包的h5和uniapp打包的h5,這兩者的區(qū)別其實(shí)就是uniapp的h5里面已經(jīng)有了uni這個(gè)定義，所以不能再uniapp里面直接用官方提供的那個(gè)js需要重新定義js里面的定義
app和h5的通信
uniapp打包成的APP，h5向webview發(fā)送消息，按照官方的文檔就可以webview,需要注意的就是如果H5是uniapp的，需要更換一下官方那個(gè)js里面的uni變量.
- 引入這個(gè)js，需要配置一個(gè)html模板頁面，新建一個(gè)文件，然后再配置里面加上這個(gè)文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="facebook-domain-verification"
content="ubjskcwra0ommj0ts7gldbkenw4bei"
/>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" rel="external nofollow" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<script>
var coverSupport =
"CSS" in window &&
typeof CSS.supports === "function" &&
(CSS.supports("top: env(a)") || CSS.supports("top: constant(a)"));
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ", viewport-fit=cover" : "") +
'" />'
);
</script>
<title></title>
</head>
<body>
<div id="app">
<!--app-html-->
</div>
<!-- <script type="module" src="/main.js"></script> -->
</body>
<script
type="text/javascript"
src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
></script>
<script
type="text/javascript"
src="<%= BASE_URL %>static/js/uni.webview.js"
></script>
<script>
wx.miniProgram.getEnv(function (res) {
console.log("當(dāng)前環(huán)境：" + JSON.stringify(res));
});
document.addEventListener("UniAppJSBridgeReady", function () {
webUni.webView.getEnv(function (res) {
console.log("當(dāng)前環(huán)境：" + JSON.stringify(res));
});
// uni.webView.navigateTo(...)
});
</script>
</html>
- 在需要的地方發(fā)送消息就可以了
webUni.postMessage({
data: {
action: "fabuyuzhan",
params: {},
},
});
小程序和h5的通信
小程序和H5通信有限制，沒有message那種實(shí)時(shí)的接收消息，小程序只有頁面銷毀的時(shí)候才會(huì)發(fā)送消息，這個(gè)感覺就沒什么用處了，而且還需要引入微信的那個(gè)js,才能使用，我建議的處理方式是跳轉(zhuǎn)頁面吧
webUni.navigateTo({
url: "/mySubPages/pages/preview/previewIndexList",
success: (res) => {
console.log(res); // 頁面跳轉(zhuǎn)成功的回調(diào)函數(shù)
},
fail: (err) => {
console.log(err); // 頁面跳轉(zhuǎn)失敗的回調(diào)函數(shù)
},
});uniapp開發(fā)的APP，沒用webview而是用的iframe嵌入。
客戶端使用APP開發(fā)的，但是有一個(gè)h5是小游戲，使用webview的時(shí)候有個(gè)問題，就是無法很好的控制導(dǎo)航欄和狀態(tài)欄，有時(shí)候在小游戲里面點(diǎn)擊，進(jìn)入全屏，但是退出的時(shí)候無法退出當(dāng)前頁面，而要先退出全屏然后再退出頁面，經(jīng)過測試，發(fā)現(xiàn)直接用iframe比較好控制，但是iframe通信沒有webview通信方便，需要用的renderjs
<template>
<view>
<iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
ref="iframe">
</iframe>
<!-- <web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
ref="iframe">
</web-view> -->
</view>
</template>
<script>
export default {
method:{
receiveMessage(arg) {
console.log("接收到renderjs回傳的消息", arg);
// const action = data.data.data.arg.action;
// console.log('收到消息 arg', data.data.data.arg);
const action = arg.action;
console.log(" 收到消息action", action);
},
}
}
</script>
<script module="test" lang="renderjs">
export default {
mounted() {
//注冊消息方法
window.addEventListener("message", this.receiveMsg, false);
},
methods: {
receiveMsg(data) {
console.log('收到renderjs消息', data);
const arg = data.data.data.arg;
console.log('收到消息 arg', data.data.data.arg);
if (arg) {
//通知方法，然后去做處理
this.$ownerInstance.callMethod('receiveMessage', data.data.data.arg)
}
},
}
}
</script>附：uni-app向web-view發(fā)送消息
（1）通過url帶參數(shù)傳遞
uni-app頁面：
<web-view @message="getMessage" :src="webViewUrl"></web-view>
computed: {
webViewUrl() {
return `${config.indexUrl}?accessToken=${this.accessToken}`
}
}
web-view網(wǎng)頁對url查詢字符串進(jìn)行解析即可得到數(shù)據(jù)：
/**
* 解析url傳遞的參數(shù)
*/
getQuery(name) {
// 正則：[找尋'&' + 'url參數(shù)名字' = '值' + '&']（'&'可以不存在）
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
const value = window.location.hash.substr(3).match(reg)
// 內(nèi)網(wǎng)服務(wù)
// const value = window.location.search.substr(1).match(reg)
if (value != null) {
// 對參數(shù)值進(jìn)行解碼
return decodeURIComponent(value[2])
}
return null
}
const accessToken = this.getQuery('accessToken')
（2）evalJS方法
uni-app頁面：
<web-view @message="message" :src="webViewUrl"></web-view>
methods: {
message(arg) {
console.log(JSON.stringify(arg))
const _funName = 'msgFromUniapp',
_data = {
msg: 'click'
}
const currentWebview = this.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`)
}
}
web-view頁面：
window.msgFromUniapp = function(arg) {
console.log(JSON.stringify(arg))
}總結(jié)
到此這篇關(guān)于uniapp webview和H5通信的3種方式的文章就介紹到這了,更多相關(guān)uniapp webview和H5通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue.js實(shí)例對象+組件樹的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章給大家分享了vue axios二次封裝的相關(guān)知識點(diǎn)等內(nèi)容以及實(shí)例代碼，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
vue側(cè)邊欄動(dòng)態(tài)生成下級菜單的方法
今天小編就為大家分享一篇vue側(cè)邊欄動(dòng)態(tài)生成下級菜單的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue項(xiàng)目配置跨域訪問和代理proxy設(shè)置方式
這篇文章主要介紹了Vue項(xiàng)目配置跨域訪問和代理proxy設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
vue3利用customRef實(shí)現(xiàn)防抖
防抖就是對于頻繁觸發(fā)的事件添加一個(gè)延時(shí)同時(shí)設(shè)定一個(gè)最小觸發(fā)間隔,防抖大家都學(xué)過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細(xì)講講2023-10-10
Vue Element前端應(yīng)用開發(fā)之常規(guī)的JS處理函數(shù)
在我們使用Vue Element處理界面的時(shí)候，往往碰到需要利用JS集合處理的各種方法，如Filter、Map、reduce等方法，也可以涉及到一些對象屬性賦值等常規(guī)的處理或者遞歸的處理方法，本篇隨筆列出一些在VUE+Element 前端開發(fā)中經(jīng)常碰到的JS處理場景，供參考學(xué)習(xí)。2021-05-05
Vue使用js-audio-recorder實(shí)現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用js-audio-recorder實(shí)現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-12-12
vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié)
Vue.js中Computed和Methods是兩種常用的數(shù)據(jù)處理方式,本文主要介紹了vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
搭建Vue從Vue-cli到router路由護(hù)衛(wèi)的實(shí)現(xiàn)
這篇文章主要介紹了搭建Vue從Vue-cli到router路由護(hù)衛(wèi)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11