为什么用WebView？
WebView是UniApp中用于嵌入网页内容的组件，允许在应用中加载和显示网页。它适用于需要在应用中集成外部网页或HTML内容的场景，如展示帮助文档、加载第三方服务等。简单来说就是：我需要在app环境做一些uniapp的api不支持的功能，如：文件上传、音源转码等；
一、在vue文件中创建webview
插入的时候注意下，如果小伙伴用了自己src的地址发现页面出不来，可以也换成百度的试一下，如果百度的出的来，那就是你地址有问题；
官方文档
ini
<template>
<web-view
ref="webview"
id="myWebview"
src="http://baidu.com"
:fullscreen="false"
@message="handleMessage"
:webview-styles="{
process: false,
}" />
<up-button @click="myClickFn">点击</up-button>
</template>
AI写代码html二、双向通信：
2.1、uniapp→webview
- vue中发送数据到html文件
javascript
// vue中发送数据到html文件，getMsgFromApp名字自定义
myClickFn() {
// #ifdef APP-PLUS
//选择到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的数据})`)
// #Endif
},
AI写代码html- html中接收来自 uniapp 的消息
javascript
// html中接收来自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收来自 uniapp 的消息，arg',arg)
}
AI写代码html2.2、webview→uniapp
- html向uniapp 发送消息
php
// 向 uniapp 发送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '这是来自 webview 的消息',
},
})
}
AI写代码html- uniapp接收html消息
typescript
<web-view
、、、、
@message="handleMessage"
/>
// 接收来自 webview 的消息
handleMessage(event) {
console.log('收到来自 webview 的消息：', event.detail)
},
AI写代码html三、完整代码
3.1UniApp:
xml
<template>
<web-view
ref="webview"
id="myWebview"
src="http://baidu.com"
:fullscreen="false"
@message="handleMessage"
:webview-styles="{
process: false,
}" />
<up-button @click="myClickFn">点击</up-button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
// 接收来自 webview 的消息
handleMessage(event) {
console.log('收到来自 webview 的消息：', event.detail)
},
// 发送数据到html文件
myClickFn() {
// #ifdef APP-PLUS
//选择到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的数据})`) // #Endif
},
},
}
</script>
AI写代码html3.2WebView的html：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>我的webview</title>
</head>
<body>
<script src="xxxxxxxxxx" charset="UTF-8"></script> //引入的js文件
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
<div id="content" class="content">
内容！！！！！！
</div>
<script type="text/javascript">
// 接收来自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收来自 uniapp 的消息')
}
// 向 uniapp 发送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '这是来自 webview 的消息',
},
})
}
window.onload = function () {
// 页面创建时执行
console.log('页面创建了')
}
window.addEventListener('pagehide', function (event) {
if (event.persisted) {
// 页面被浏览器缓存（如iOS Safari的后台标签）
console.log('页面被缓存');
} else {
// 页面正在被销毁
console.log('页面被销毁')
}
});
</script>
</body>
<style>
</style>
</html>
AI写代码html