uni-app中使用webview引入H5页面(使用高德地图实现的相关3D功能)，安卓正常，IOS无效

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中使用webview引入H5页面(使用高德地图实现的相关3D功能)，安卓正常，IOS无效

问题描述

使用webview引入H5页面(使用高德地图web api实现的相关3D功能)，安卓正常，IOS无效，使用IOS的浏览器打开同一页面可以正常显示，但是通过APP webview引入的就无效了

Harmonyos Next教程
6 回复

ios 无效测试了多少设备，你同事是否正常，测试了哪些系统、机型的模拟器、真机？加载 webview 其他页面是否正常


办公室6个IOS设备(ip8,ip5,ip11,ip14新旧机器都有)都无效，真机，webview是正常的，就是webview里加载高德地图的3D功能不行，加载高德地图也正常，一开3D就不行，3D功能无效

回复 晓寒1987: 发我网址我试一试。3d 功能如何开启也告诉我一下

回复 DCloud_UNI_OttoJi: https://m.onfun.net/house/house_3d.php?hid=824 这个链接你直接打开是有3D效果的，你用webview引入到IOS里，就发现上边内容全没了。小程序IOS和安卓都正常的哟

回复 晓寒1987: 我看到了这个问题，可能是某些特性还不支持，如果你熟悉 3d 效果可以简化一下项目，明确具体的是哪个 api 不支持。

在uni-app中使用webview引入H5页面（尤其是包含高德地图3D功能的情况下），遇到安卓正常而iOS无效的问题，通常可能是由于iOS对webview的限制或者高德地图在iOS上的特定实现方式导致的。下面提供一个基本的代码示例，以及针对iOS可能需要的配置调整。

基本代码示例

首先，确保在manifest.json中配置了webview的相关权限和设置：

{
  "mp-weixin": { // 其他平台配置类似
    "appid": "your-appid",
    "setting": {
      "webview": {
        "payment": {},
        "h5": {
          "devServer": true,
          "devPath": "/",
          "pages": []
        }
      }
    }
  }
}

然后，在你的uni-app页面中引入webview组件：

<template>
  <view>
    <web-view src="https://your-h5-page-with-gaode-map.html"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 你可以在这里存储webview相关的状态或数据
    };
  },
  onLoad() {
    // 可以在这里处理页面加载的逻辑
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

针对iOS的配置调整

  1. 检查Info.plist： 确保你的iOS项目中Info.plist文件包含了允许加载任意URL的权限（尽管这通常不推荐用于生产环境，因为它可能带来安全风险）。

    <key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

  2. WKWebView配置： uni-app在iOS上默认使用WKWebView。如果你需要自定义WKWebView的行为，可能需要通过原生插件来实现。例如，你可能需要配置WKWebView的WKWebViewConfiguration来允许特定的行为或加载策略。

  3. 高德地图SDK： 如果高德地图的3D功能依赖于其原生SDK，你可能需要在iOS项目中直接集成高德地图的iOS SDK，并通过原生插件与uni-app进行交互。这通常涉及到Objective-C或Swift代码，以及uni-app的原生模块开发。

由于直接修改uni-app的webview行为以支持特定功能（如高德地图的3D功能）可能需要深入的原生开发知识，建议查阅uni-app的官方文档和社区资源，了解是否有现成的插件或解决方案可以满足你的需求。如果问题依旧存在，可能需要考虑与高德地图的技术支持团队联系，以获取针对iOS平台的具体指导。

回到顶部