webview跳会uniapp

在 UniApp 中使用 `web-view` 组件嵌入网页时，若需要从 WebView 返回到原生页面（即 UniApp 页面栈中的上一页），可以通过结合 `onBackPress` 生命周期函数与原生页面跳转逻辑实现。以下是实现方法的详细说明： ### 1. 使用 `onBackPress` 拦截返回事件 在页面中监听返回事件，判断当前是否在 WebView 页面，并通过调用 `uni.navigateBack()` 返回上一页。 ```javascript onBackPress(e) { if (e.from === 'navigateBack') { return false; // 防止死循环 } let pages = getCurrentPages(); let page = pages[pages.length - 1]; let currentWebview = page.$getAppWebview(); currentWebview.close(); // 关闭当前 webview 实例 uni.navigateBack({ delta: 1 }); // 返回上一页 return true; } ``` ### 2. 控制 WebView 的生命周期与关闭逻辑 在某些设备（如 Android）上，直接调用 `close()` 可能无法立即生效，建议使用 `setTimeout` 延迟执行页面返回逻辑以确保 WebView 已关闭： ```javascript let currentWebview = this.$mp.page.$getAppWebview(); currentWebview.children()[0].close(); setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 0); ``` ### 3. 通过注入 JS 实现页面内返回 如果 WebView 内部已经发生了多次跳转，可以通过调用 `back()` 方法使 WebView 返回上一个页面，而不是直接关闭： ```javascript this.$getAppWebview().children()[0].back(); ``` ### 4. 页面结构与模板示例 确保页面结构中正确使用 `web-view` 组件，并根据业务逻辑动态设置 `src` 属性： ```vue <template> <view> <web-view v-if="newurl" :src="newurl"></web-view> </view> </template> <script> export default { data() { return { newurl: '' }; }, onBackPress(e) { if (e.from === 'navigateBack') { return false; } let pages = getCurrentPages(); let page = pages[pages.length - 1]; let currentWebview = page.$getAppWebview(); currentWebview.close(); uni.navigateBack({ delta: 1 }); return true; }, onLoad(opts) { this.newurl = "https://www.example.com"; } }; </script> <style> page { background-color: #fff; } </style> ``` ### 5. 注意事项 - 在某些 Android 设备上，WebView 的关闭与页面返回可能需要使用 `setTimeout` 来延迟执行，以确保操作顺序正确。 - 若 WebView 页面内部存在多级跳转，应优先使用 `back()` 方法而非直接关闭页面。 - `onBackPress` 返回 `true` 表示已处理返回事件，避免系统默认行为干扰。 ---