uni-app使用web-view组件APP实现返回上一页

news2025/5/10 23:44:32

一、功能概述

本案例实现了在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>