1. uniapp webview弹窗概述
uniapp是一款基于Vue.js框架开发的跨平台应用开发框架，可以将同一份代码打包成不同平台的应用，包括h5、iOS、Android等。其中，webview是uniapp在h5端中的一个组件，用于在应用中嵌入web页面。而弹窗则是web开发中常见的一种交互形式，是一种浮层效果，可以在当前页面上方显示一些弹出式窗口或对话框。
2. uniapp webview弹窗基本用法
2.1 在webview中使用uni-popup组件
在uniapp中，可以通过使用uni-popup组件来实现弹窗的效果。在webview中，需要在引入uni-popup组件的Vue文件中使用mounted函数将组件挂载到指定的DOM元素上。
// 引入uni-popup组件
import { uniPopup } from '@/components/uni-popup/uni-popup.vue';
export default {
components: {
uniPopup,
},
mounted() {
// 将组件挂载到 #popup 元素上
const popupDom = this.$refs.popup.$el;
document.querySelector('#popup').appendChild(popupDom);
},
}
其中，将组件挂载到指定的DOM元素上可以使用$refs获取到组件的DOM节点，然后通过querySelector选取目标元素并将组件DOM添加进去即可。
2.2 uni-popup组件属性介绍
uni-popup组件在使用时有多个可配置属性，可以用于控制弹窗的样式、位置和行为等。下面是uni-popup组件的常用属性说明：
mask：控制是否显示背景遮罩层
show：控制弹窗的显示或隐藏，可绑定到一个变量上动态控制
position：控制弹窗的位置，可选值为top、bottom、right、left、center
container-height：控制弹窗内容高度，单位为rpx
container-width：控制弹窗内容宽度，单位为rpx
rounded：设置弹窗的圆角半径，单位为rpx
overlay：设置遮罩层样式，可以配置颜色、透明度等
overlay-class：设置遮罩层CSS类名，用于自定义样式
animation：设置弹窗的动画效果，可以配置弹出和隐藏的动画效果
2.3 uni-popup组件示例代码
下面是一个简单的uni-popup组件使用示例代码：
// 引入uni-popup组件
import { uniPopup } from '@/components/uni-popup/uni-popup.vue';
export default {
components: {
uniPopup,
},
data() {
return {
showPopup: false,
}
},
methods: {
togglePopup() {
this.showPopup = !this.showPopup;
},
},
mounted() {
// 将组件挂载到 #popup 元素上
const popupDom = this.$refs.popup.$el;
document.querySelector('#popup').appendChild(popupDom);
}
}
在上面的示例代码中，首先引入了uni-popup组件，并在data中定义了一个showPopup变量用于控制弹窗的显示或隐藏。在mounted函数中将组件挂载到指定的DOM元素上，然后在模板中使用uni-popup组件，并绑定show属性以控制弹窗的显示或隐藏。最后使用一个按钮绑定togglePopup方法以控制showPopup变量的值。
<!-- 模板代码 -->
<template>
<!-- 弹窗容器元素 -->
<div id="popup">
<!-- uni-popup组件 -->
<uni-popup ref="popup" :show="showPopup" position="center">
<view>这是一个弹窗</view>
<button @click="togglePopup">关闭弹窗</button>
</uni-popup>
</div>
</template>
3. uniapp webview弹窗实际应用
在实际应用中，uni-popup组件可以根据具体的需求进行配置，可以用于实现各种弹窗效果，例如：提示框、确认框、菜单选项等。下面是一个实际应用的例子：
需求描述：在uniapp应用中，在一个webview中嵌入一个网页，在网页中点击按钮时需要弹出确认框，确认框需要包含“确定”和“取消”按钮，点击“确定”按钮后需要向webview发送一个数据。
3.1 创建一个webview组件
首先，在uniapp中创建一个webview组件，可以参考uniapp官方文档中的相关示例进行开发。在webview组件中加入一个按钮，用于触发弹窗。
<template>
<view>
<!-- 加载指定链接的web页面 -->
<web-view src="https://www.baidu.com"></web-view>
<!-- 按钮，用于触发弹窗 -->
<button @click="showDialog">弹出确认框</button>
</view>
</template>
<script>
export default {
methods: {
showDialog() {
// 在这里弹出确认框
console.log('弹出确认框')
},
},
}
</script>
3.2 在webview中嵌入网页
接下来，在webview组件中使用mounted函数，将webview中的页面DOM节点获取到，并将其插入到指定的DOM元素中，这样在webview中就可以嵌入一个指定链接的网页。
<template>
<view>
<!-- 占位元素，用于等待webview加载完毕后添加web页面 -->
<view ref="webContent" style="display:none;"></view>
<!-- webview组件 -->
<web-view :src="url" @loaded="onWebViewLoaded"></web-view>
<!-- 按钮，用于触发弹窗 -->
<button @click="showDialog">弹出确认框</button>
</view>
</template>
<script>
export default {
data() {
return {
url: 'https://www.baidu.com',
webview: null,
}
},
methods: {
showDialog() {
// 在这里弹出确认框
console.log('弹出确认框')
},
onWebViewLoaded(e) {
// 页面加载完毕后，将webview中的页面插入到DOM元素中
this.webview = e.target;
const webContent = this.$refs.webContent;
const webDom = this.webview.$el;
webContent.style.display = 'block';
webContent.appendChild(webDom);
},
},
}
</script>
3.3 弹出确认框
最后，在webview中弹出一个确认框，该确认框需要包含“确定”和“取消”按钮，点击“确定”按钮后需要向webview发送一个数据。这里将使用uni-popup组件来实现弹窗的效果。
首先，在webview组件的模板中，添加一个uni-popup组件用于显示确认框：
<template>
<view>
<!-- 占位元素，用于等待webview加载完毕后添加web页面 -->
<view ref="webContent" style="display:none;"></view>
<!-- webview组件 -->
<web-view :src="url" @loaded="onWebViewLoaded"></web-view>
<!-- 弹窗容器 -->
<view class="popup-container">
<!-- uni-popup组件 -->
<uni-popup ref="popup" :show="showDialog" position="center">
<view class="popup-header">提示</view>
<view class="popup-content">确定要进行操作吗？</view>
<view class="popup-buttons">
<button class="popup-button" @click="cancelDialog">取消</button>
<button class="popup-button" @click="confirmDialog">确定</button>
</view>
</uni-popup>
</view>
<!-- 按钮，用于触发弹窗 -->
<button @click="showDialog">弹出确认框</button>
</view>
</template>
其中，弹窗容器使用一个容器元素包含uni-popup组件，可以使弹窗样式更美观。
然后，在webview组件的Vue文件中，实现弹窗的显示和隐藏，以及点击“确定”按钮后向webview发送数据的逻辑：
<template>
<view>
<!-- 占位元素，用于等待webview加载完毕后添加web页面 -->
<view ref="webContent" style="display:none;"></view>
<!-- webview组件 -->
<web-view :src="url" @loaded="onWebViewLoaded"></web-view>
<!-- 弹窗容器 -->
<view class="popup-container">
<!-- uni-popup组件 -->
<uni-popup ref="popup" :show="showDialog" position="center">
<view class="popup-header">提示</view>
<view class="popup-content">确定要进行操作吗？</view>
<view class="popup-buttons">
<button class="popup-button" @click="cancelDialog">取消</button>
<button class="popup-button" @click="confirmDialog">确定</button>
</view>
</uni-popup>
</view>
<!-- 按钮，用于触发弹窗 -->
<button @click="showDialog">弹出确认框</button>
</view>
</template>
<script>
export default {
data() {
return {
url: 'https://www.baidu.com',
webview: null,
showDialog: false,
}
},
methods: {
showDialog() {
this.showDialog = true;
},
cancelDialog() {
this.showDialog = false;
},
confirmDialog() {
// 点击确定按钮后，向webview发送数据
const data = 'hello from webview';
this.webview.evaluateJS(`onDataReceived(${data})`);
this.showDialog = false;
},
onWebViewLoaded(e) {
// 页面加载完毕后，将webview中的页面插入到DOM元素中
this.webview = e.target;
const webContent = this.$refs.webContent;
const webDom = this.webview.$el;
webContent.style.display = 'block';
webContent.appendChild(webDom);
},
},
}
</script>
<style>
.popup-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.popup-header {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.popup-content {
font-size: 16px;
margin-bottom: 10px;
}
.popup-buttons {
display: flex;
justify-content: flex-end;
}
.popup-button {
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
margin-left: 10px;
}
</style>
以上代码中，在弹窗中点击“确定”按钮时，调用webview的evaluateJS方法向webview发送数据。由于在webview中引入的网页可能不同，因此需要在引入网页中定义一个onDataReceived函数，用于接收webview发送的数据。在接收到数据后，就可以根据具体需求进行相应的操作。
总结
本篇文章介绍了uniapp webview弹窗的基本用法和实际应用。通过使用uni-popup组件，可以方便地实现弹窗效果，并且可以灵活配置各种属性以满足不同的需求。在实际应用中，需要根据具体需求进行适当的配置和编码。