uni-app 在第三方合思IOS APP中嵌入H5应用，后退直接退出应用

uni-app 在第三方合思IOS APP中嵌入H5应用，后退直接退出应用

操作步骤：

  • 查看视频

预期结果：

  • 按照路由层级一层一层后退

实际结果：

  • 进入多层页面后，关闭应用会直接退出H5应用

bug描述：

  • 在第三方合思 IOS APP中，打开H5应用的时候，进入多层路由后，直接点击后退，会直接退出H5应用，回到第三方APP中

附件：

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX类型 正式
HBuilderX版本 3.98
浏览器平台 Safari
浏览器版本 未知，在第三方合思APP中
项目创建方式 HBuilderX

更多关于uni-app 在第三方合思IOS APP中嵌入H5应用，后退直接退出应用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以提供一下复现的视频吗？

更多关于uni-app 在第三方合思IOS APP中嵌入H5应用，后退直接退出应用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


发好了，你看一下

在 uni-app 中嵌入 H5 应用到第三方合思 iOS APP 时，如果遇到点击后退按钮直接退出应用的问题，通常是因为 iOS 的 WebView 或嵌入方式没有正确处理后退事件。以下是一些可能的解决方案：

1. 检查 WebView 配置

确保 iOS 的 WebView 配置正确支持后退操作。例如，如果你使用的是 WKWebView，可以通过以下方式处理后退事件：

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if (webView.canGoBack) {
        [webView goBack];
        decisionHandler(WKNavigationActionPolicyCancel);
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

2. 处理 H5 页面的后退逻辑

在 uni-app 的 H5 页面中，可以通过监听路由变化或后退按钮事件，确保页面正确处理后退操作。例如：

// 监听路由变化
uni.$on('routeChange', (to, from) => {
  if (from && from.path === '/previousPage') {
    // 执行后退逻辑
  }
});

// 监听物理后退按钮（如 Android 的返回键）
document.addEventListener('backbutton', () => {
  uni.navigateBack();
}, false);

3. 与 iOS 原生代码通信

如果需要在 H5 中触发原生代码的后退逻辑，可以使用 JSBridge 或 postMessage 与 iOS 原生代码通信。例如：

  • H5 端：
window.webkit.messageHandlers.nativeBack.postMessage({});
  • iOS 端：
[userContentController addScriptMessageHandler:self name:@"nativeBack"];
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"nativeBack"]) {
        [self handleNativeBack];
    }
}
回到顶部