复制代码 async createWebview() {
try {
// 1. 获取系统信息
const systemInfo = await uni.getSystemInfoSync();
// 2. 计算所有栏位高度(单位:px)
const statusBarHeight = systemInfo.statusBarHeight || 0; // 状态栏
const tabBarHeight = uni.upx2px(80); // 顶部TabBar
const bottomNavBarHeight = uni.upx2px(100); // 底部NavBar
const bottomSafeArea = systemInfo.screenHeight - systemInfo.safeArea?.bottom || 0; // 底部安全区
// 3. 计算WebView可用高度(关键公式)
const webviewHeight = systemInfo.windowHeight -
statusBarHeight -
tabBarHeight -
bottomNavBarHeight -
bottomSafeArea;
// 4. 动态创建WebView
const webview = plus.webview.create(
this.webviewSrc,
'dynamic-webview', {
// 关键样式配置
position: 'absolute',
top: `${statusBarHeight + tabBarHeight}px`,
height: `${Math.max(webviewHeight, 200)}px`,
bottom: `${bottomNavBarHeight + bottomSafeArea}px`,
progress: {
color: '#FF0000'
}, // 进度条颜色(虽然关闭但需定义)
hardwareAccelerated: true, // 启用硬件加速
// iOS专属优化
wkwebview: {
opacity: 0.99
},
// Android专属优化
additionalHttpHeaders: {
'Cache-Control': 'no-cache'
}
})
// 5. 事件监听
webview.addEventListener('loaded', () => {
console.log('webview加载完成')
setTimeout(() => {
const params = {
type: 'init',
data: {
windowWidth: '100%',
windowHeight: '100%',
uniPlatform: systemInfo.uniPlatform,
}
}
webview.evalJS(`receiveData(${JSON.stringify(params)})`)
}, 1500)
})
// 6. 添加到当前页面
this.getSafeWebview().append(webview)
webview.addEventListener('message',evt => {
console.log(evt, 'postMessage')
})
webview.addEventListener('WebviewCustomButtonCallback',evt => {
console.log(evt, 'WebviewCustomButtonCallback')
})
webview.addEventListener('postmessage',evt => {
console.log(evt, 'postMessage')
})
webview.addEventListener('WebviewCustomButtonCallback',evt => {
console.log(evt, 'WebviewCustomButtonCallback')
})
} catch (error) {
console.error('创建WebView失败:', error);
}
},

9***@qq.com
- 发布:2025-03-30 13:24
- 更新:2025-03-30 14:34
- 阅读:68
1 个回复
9***@qq.com (作者)
第一种
复制代码
dynamicWebview.addEventListener('titleUpdate', (evt) => { console.log(JSON.stringify(evt)) })
h5: 通过修改document.title 去实现数据更新
第二种
复制代码
plus.globalEvent.addEventListener('plusMessage', evt => { if (dynamicWebview && dynamicWebview['__uuid__'] === evt.originId) { // h5传过来的消息 console.log(evt.data.args); } })
h5: 通过uni.postMessage