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>