uniapp-app与h5通信
app里面的webview
<template>
<web-view :webview-styles="webviewStyles" :src="src"></web-view>
</template>
<script>
export default {
name: 'demo-app',
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333',
},
},
src: null,
}
},
methods: {},
mounted() {},
onLoad(option) {
this.src = decodeURIComponent(option.url)
},
}
</script>
外部webview
把uni.webview.xxxxx.js下载到本地项目的 public 文件夹
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>h5</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<script type="text/javascript" src="/uni.webview.1.5.6.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('初始化uniapp的API成功');
});
</script>
</html>
引入js 在body 下面
并写入初始化代码
在h5项目里，需要调用uniapp的特有交互的逻辑代码里面直接使用uni即可
window.uni.reLaunch({
url: '/pages/index/index'
});