uniapp 鸿蒙 如何跳转到手机浏览器

在uniapp开发中，如何实现从应用内跳转到手机浏览器打开指定网页？特别是在鸿蒙系统上，是否有特殊的兼容性处理或代码写法？求具体的实现方法和注意事项。

2 回复

在uniapp中，使用uni.navigateTo无法直接跳转外部浏览器。需使用plus.runtime.openURL或window.open，例如：

plus.runtime.openURL('https://xxx.com');

注意：需在真机测试，部分平台需配置白名单。

更多关于uniapp 鸿蒙 如何跳转到手机浏览器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中，可以通过 uni.navigateTo 或 uni.redirectTo 方法结合 url 参数实现跳转到手机默认浏览器。具体步骤如下：

  1. 使用 uni.navigateTo 或 uni.redirectTo：
    这两个方法用于页面跳转，但通过指定 url 为以 http:// 或 https:// 开头的网页链接，系统会自动在手机默认浏览器中打开该链接。

  2. 示例代码：

    // 在 UniApp 页面中的方法
navigateToBrowser() {
  const url = 'https://www.example.com'; // 替换为目标网址
  uni.navigateTo({
    url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
    // 注意：直接跳转外部链接可能受限，推荐使用 web-view 组件或以下方法
  });
}

    更直接的方法（适用于外部链接）：
    如果只是简单跳转，可以使用 uni.navigateTo 直接指定外部 URL（部分平台支持），但为了兼容性，建议通过 plus.runtime.openURL（5+ App）或条件编译处理。

    // 在 App 端使用 5+ API（需在 App 环境中）
navigateToBrowser() {
  const url = 'https://www.example.com';
  // #ifdef APP-PLUS
  plus.runtime.openURL(url); // 直接调用系统浏览器打开
  // #endif
}

  3. 注意事项：

    • 平台差异：H5 端直接使用 window.location.href 即可，但 App 端需通过 plus.runtime.openURL 实现。
    • 权限配置：在 App 端使用 plus.runtime.openURL 时，需在 manifest.json 中配置相关权限（通常默认支持）。
    • 鸿蒙系统：鸿蒙（HarmonyOS）基于 Android，因此方法通用，无需特殊处理。

总结：在 UniApp 中跳转手机浏览器，推荐使用条件编译针对 App 端调用 plus.runtime.openURL，简单高效。

回到顶部