uni-app IOS升级Hbuilder后打包app上架更新后出现地图白屏

uni-app IOS升级Hbuilder后打包app上架更新后出现地图白屏

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：3.8.12

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：全系

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
<view>  
<map id="amap"  
style="{width: '750rpx', height: winH + 'px' }"
show-location="true"
show-scale="true"
show-compass="true"
longitude="center[0]"
latitude="center[1]"
scale="scale"
min-scale="3"
enable-rotate="true"
enable-satellite="true"
enable-overlooking="false"
polyline="[...lines]"
markers="points"
[@regionchange](/user/regionchange)="onchg"  
[@markertap](/user/markertap)="markertap"  
[@tap](/user/tap)="mapTap"  
></map>  
</view>
</template>

操作步骤：

老版本打包的app（IOS）— 升级HB — 打包上架更新 — 前端用户更新成功 — 进入地图页面

预期结果：

正常显示页面

实际结果：

白屏

bug描述：

上线的app版本是用 老版本的HB， 然后用新版本HB打包发布后，进入app， map组件无法渲染。 同一个hb版本升级未出现这类情况。 此类情况从上半年开始一直存在，起初怀疑代码问题，目前怀疑hb升级后打包导致。 请排查一下


更多关于uni-app IOS升级Hbuilder后打包app上架更新后出现地图白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

本地打自定义基座能复现嘛

更多关于uni-app IOS升级Hbuilder后打包app上架更新后出现地图白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发 iOS 应用时，如果升级了 Hbuilder 后打包上架，出现地图白屏的问题，可能是由于以下原因导致的。以下是一些可能的解决方案和排查步骤：

1. 检查地图 SDK 配置

  • 问题原因：升级 Hbuilder 后，地图 SDK 的配置可能发生了变化，导致地图无法正常加载。
  • 解决方案：
    • 确保在 manifest.json 中正确配置了地图 SDK（如高德地图、腾讯地图等）。
    • 检查地图 SDK 的 AppKey 是否正确，尤其是 iOS 平台的配置。
    • 如果使用的是高德地图，确保在 高德开放平台 中正确配置了 iOS 的 Bundle ID 和 AppKey。

2. 检查权限配置

  • 问题原因：iOS 平台对权限要求严格，如果缺少必要的权限，地图可能无法加载。
  • 解决方案：
    • 在 manifest.json 中确保已正确配置以下权限：
      "ios": {
    "permissions": {
        "LOCATION_ALWAYS": "描述",
        "LOCATION_WHEN_IN_USE": "描述"
    }
}
    • 在 Xcode 中检查 Info.plist 文件，确保已添加以下权限描述：
      <key>NSLocationAlwaysUsageDescription</key>
<string>需要访问您的位置以提供地图服务</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问您的位置以提供地图服务</string>

3. 检查地图组件代码

  • 问题原因：地图组件的代码可能存在问题，导致地图无法正常渲染。
  • 解决方案：
    • 检查地图组件的代码，确保正确引入了地图组件并设置了必要的参数。
    • 示例代码：
      <template>
  <map
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    style="width: 100%; height: 100%;"
  ></map>
</template>
<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.397,
          name: '北京'
        }
      ]
    };
  }
};
</script>
回到顶部