uni-app使用web-view组件APP实现返回上一页
一、功能概述
本案例实现了在Uniapp中内嵌H5网页并深度控制的三项核心功能：
- 隐藏指定特征的内链元素
- 自定义导航栏返回逻辑
- Webview原生特性保留
二、代码解析
2.1 基础结构
<template><view><web-view :webview-styles="webviewStyles" src="www.xxx.cn"></web-view></view>
</template>
- webview-styles：控制原生Webview样式
- src：指定加载的H5页面地址
2.2 核心控制逻辑
export default {onReady() {const currentWebview = this.$scope.$getAppWebview().children()[0];currentWebview.addEventListener("loaded", () => {currentWebview.evalJS(`$("ul.fed-part-rows a[href*='www.xxx.cn']").parent().hide();`);});},onBackPress(e) {this.$scope.$getAppWebview().children()[0].back();return true;}
}
三、关键技术点
3.1 DOM操作时机控制
- onReady生命周期保证组件初始化完成
- loaded事件监听确保H5页面完全加载
- evalJS执行时机验证：
- 100ms延迟检测
- DOMContentLoaded事件绑定
- 重试机制实现
3.2 选择器优化方案
// 原生DOM方案
document.querySelectorAll('ul.fed-part-rows a[href*="www.xxx.cn"]').forEach(el => el.parentNode.style.display = 'none');// 现代浏览器API
Array.from(document.getElementsByClassName('fed-part-rows')).flatMap(ul => [...ul.getElementsByTagName('a')]).filter(a => a.href.includes('www.xxx.cn')).forEach(a => a.parentElement.remove());
3.3 返回逻辑增强
// 多页面栈处理
const webview = this.$scope.$getAppWebview().children()[0];
if (webview.canBack()) {webview.back();
} else {uni.navigateBack();
}
return true;
四、安全与优化实践
4.1 安全防护措施
- 内容安全策略（CSP）设置
- 白名单域名验证
- 执行脚本过滤正则：
const sanitize = code => code.replace(/<\/?script>/gi, '');
4.2 性能优化方案
- Intersection Observer实现懒执行
- MutationObserver监听DOM变化
- 防抖执行机制：
let timeout;
const debounceEval = (code, delay = 300) => {clearTimeout(timeout);timeout = setTimeout(() => {currentWebview.evalJS(code);}, delay);
}
五、跨平台适配方案
| 特性 | Android | iOS |
|---|---|---|
| 滚动效果 | 需配置硬件加速 | 原生弹性滚动 |
| 缓存策略 | 多进程共享 | WebKit独立管理 |
| 手势事件 | 需处理长按延迟 | 3D Touch支持 |
| 调试工具 | Chrome Inspect | Safari Webkit |
六、扩展应用场景
6.1 双向通信实现
// H5页面
window.postMessage({ type: 'FROM_H5', data: ... });// Uniapp
const webview = ...;
webview.addEventListener('message', e => {console.log('Received:', JSON.parse(e.message));
});
6.2 混合渲染方案
// 原生组件覆盖
const coverView = new plus.nativeObj.View({position: 'absolute',styles: { background: 'transparent' }
});
coverView.addEventListener('click', () => {// 处理自定义交互
});
七、最佳实践建议
- 使用
<iframe>替代方案时需进行沙箱隔离 - 关键操作建议通过postMessage进行数据通信
- 定期检查Webview安全更新
- 复杂交互推荐使用Uni-WebSDK方案
- 性能监控建议：
const metrics = await currentWebview.getWebPerformance();
console.log('FPS:', metrics.framesPerSecond);
页面完整代码如下：
<template><view><web-view :webview-styles="webviewStyles" src="www.xxx.cn"></web-view></view>
</template><script>
export default {data() {return {};},onReady() {var currentWebview = this.$scope.$getAppWebview().children()[0];currentWebview.addEventListener("loaded", function() {currentWebview.evalJS("$(\"ul.fed-part-rows a[href*='www.xxx.cn']\").parent().hide();");});},onBackPress(e) {this.$scope.$getAppWebview().children()[0].back();return true;}
};
</script>