uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）

对于引入外部资源如阿里图标遇到的“文件查找失败”的情况，在 `iconfont.css` 文件中的相对路径应更改为绝对路径（即将 `./` 改为 `@/`），这样可以在解决移动端显示异常的同时保持H5端正常工作[^2]。 #### 处理...

<think>问题分析：在UniApp中引入高德地图，在内置浏览器（如H5）中显示正常，但在手机端（App）不显示，通常有以下几个原因：1.平台差异：H5平台使用浏览器环境，而App平台使用的是原生环境（WebView），两者加载地图的方式不同。2.权限问题：App端可能需要配置地图模块和权限。3.地图插件未正确引入：在App端，需要使用UniApp的`web-view`组件或者使用原生地图插件（如高德地图的SDK）。4.未正确区分运行平台：代码中可能需要根据平台做不同的处理。解决方案：步骤1：在H5平台，可以直接使用高德地图的JavaScriptAPI，但在App端，不能直接使用，因为App端是运行在WebView中，但需要原生支持。步骤2：对于App端，我们有两种选择：a)使用`web-view`组件嵌入一个H5页面（该页面包含高德地图），这样就和在H5中显示一样。b)使用UniApp的原生地图插件（如DCloud官方提供的map组件，或者使用高德地图的原生SDK插件）。步骤3：如果选择使用原生地图组件（推荐），可以按照以下步骤：-使用UniApp内置的`map`组件，该组件在App端会自动使用高德地图SDK（iOS和Android）。-注意：需要在manifest.json中配置高德地图的AppKey。步骤4：配置manifest.json：-打开manifest.json，选择“App模块配置”，勾选“Maps”下的“高德地图”，并填写高德地图的AppKey（需要在高德开放平台申请，且注意申请的是App端的Key，与H5的Key不同）。步骤5：使用map组件：-在页面中使用`<map>`标签，设置属性`provider="amap"`（在App端指定使用高德地图，H5端不支持该属性，但H5端可以直接用JS API）。步骤6：注意：在H5端，我们仍然可以使用高德地图JS API，但需要编写两套代码（或者通过条件编译）。所以，为了统一，我们可以：-在H5端使用JSAPI（通过`<script>`引入）并创建地图。-在App端使用原生`<map>`组件。步骤7：条件编译处理平台差异。示例代码：1.在H5端，我们使用传统的引入高德地图JS的方式，创建一个div作为容器。2.在App端，使用`<map>`组件。由于在UniApp中，App端使用`<map>`组件时，不需要引入额外的JS，但需要配置manifest.json。具体代码实现：首先，在`index.vue`中，通过条件编译处理：```html<template><view><!-- #ifdefH5--><divid="map-container" style="width:100%;height:300px;"></div><!--#endif--><!-- #ifdefAPP-PLUS--><mapstyle="width:100%; height:300px;":latitude="latitude":longitude="longitude":markers="markers"provider="amap"></map><!-- #endif --></view></template> <script>//在H5环境下，使用高德地图JS API// #ifdefH5exportdefault {mounted() {//动态加载高德地图JS APIconst script= document.createElement('script');script.src ='https://webapi.amap.com/maps?v=2.0&key=您的高德地图H5的Key';script.onload =() =>{this.initAMap();};document.head.appendChild(script);},methods: {initAMap() {constmap =new AMap.Map('map-container',{center: [116.397428,39.90923],zoom:13});//可以添加标记等操作}}}//#endif//在App环境下，使用uni-app的map组件// #ifdefAPP-PLUSexport default{data(){return {latitude:39.90923,//纬度longitude:116.397428, //经度markers: [{id:1,latitude:39.90923,longitude:116.397428,title: '北京'}]}}}// #endif</script> ```注意：上面的代码中，我们使用了条件编译，分别处理了H5和App平台。步骤8：配置manifest.json（App端）：-打开manifest.json，在“App模块配置”中，勾选“Maps(地图)”，然后选择“高德地图”，填写你在高德开放平台申请的AppKey（注意：这个Key是专门用于App的，与H5的Key不同）。步骤9：高德开放平台申请Key的注意事项：-H5的Key：在创建应用时选择“Web端”。-App的Key：创建应用时选择“Android平台”或“iOS平台”，需要填写应用的包名和签名（Android）或BundleID（iOS）。在UniApp中，包名等信息可以在manifest.json中查看。步骤10：运行到手机端时，需要打包自定义基座才能测试，因为默认基座不包含高德地图SDK。打包自定义基座步骤：-在HBuilderX中，选择“运行”->“运行到手机或模拟器”->“制作自定义调试基座”。-打包完成后，选择“运行”->“运行到手机或模拟器”->“使用自定义基座运行”。可能遇到的问题：1. App端地图不显示：检查manifest.json中是否配置了高德地图的AppKey，并且是否正确。2.打包自定义基座：一定要使用自定义基座，因为官方默认基座没有高德地图SDK。3.包名和签名：在高德开放平台配置AppKey时，Android需要填写包名和签名。UniApp的包名在manifest.json中，Android的签名可以使用默认的，在HBuilderX安装目录下的`plugins\launcher\tools\keystore`，文件名为`debug.keystore`，密码为`android`，别名和密码都是`android`。正式发布时需要自己生成。补充：如果需要在App端使用更复杂的高德地图功能，可能需要使用原生插件，可以到UniApp插件市场搜索高德地图相关插件。总结：- H5平台：使用JS API，通过动态加载脚本。- App平台：使用原生`<map>`组件，配置manifest.json，打包自定义基座。这样，就可以解决在内置浏览器显示而手机端不显示的问题。注意：在同一个页面中同时处理多个平台，条件编译是必要的。如果还有问题，请检查控制台错误信息，根据错误信息进行调试。§§相关问题§§:1.如何在UniApp中同时兼容H5和App平台的地图显示？2.在UniApp中使用高德地图，如何申请和配置AppKey？3.打包UniApp自定义基座的步骤是什么？4.如何在UniApp中实现地图定位功能？</think>### 解决 Uniapp 高德地图在手机端不显示问题 在 Uniapp 中使用高德地图时，常见问题是在内置浏览器（H5）显示正常，但在打包到手机端（App）后地图不显示。以下是完整解决方案： #### 核心原因分析 1. **平台差异**：H5 使用浏览器 API，App 使用原生 WebView 2. **密钥配置问题**：App 端需要额外配置安全密钥 3. **权限缺失**：Android/iOS 需要特定定位权限 4. **地图初始化时机错误**：组件生命周期问题 5. **原生插件未启用**：未配置高德地图原生 SDK --- ### 完整解决方案 #### 步骤 1：配置 manifest.json ```json { "app-plus": { "modules": { "Maps": {} }, "distribute": { "android": { "permissions": [ "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>" ] }, "ios": { "permissions": { "NSLocationAlwaysUsageDescription": "需要定位权限以显示地图", "NSLocationWhenInUseUsageDescription": "需要定位权限以显示地图" } } } } } ``` #### 步骤 2：安装高德地图原生插件 ```bash # 安装原生 SDK 插件 npm install @dcloudio/uni-maps --save ``` #### 步骤 3：地图组件实现（兼容 H5 和 App） ```html <template> <view class="map-container"> <!-- H5 端使用 iframe --> <!-- #ifdef H5 --> <iframe v-if="h5MapUrl" :src="h5MapUrl" style="width:100%;height:100vh;border:none" ></iframe> <!-- #endif --> <!-- App 端使用原生地图 --> <!-- #ifdef APP-PLUS --> <map v-if="showMap" id="myMap" style="width:100%;height:100vh" :latitude="latitude" :longitude="longitude" :markers="markers" :show-location="true" :enable-traffic="true" @loaded="onMapLoaded" ></map> <!-- #endif --> </view> </template> <script> // #ifdef APP-PLUS const amap = require('@dcloudio/uni-maps/lib/amap.js'); // #endif export default { data() { return { latitude: 39.90923, // 默认纬度（北京） longitude: 116.397428, // 默认经度 markers: [{ id: 1, latitude: 39.90923, longitude: 116.397428, title: '北京市中心' }], h5MapUrl: '', showMap: false }; }, mounted() { // #ifdef H5 this.initH5Map(); // #endif // #ifdef APP-PLUS this.initAppMap(); // #endif }, methods: { // H5 端初始化 initH5Map() { const key = 'YOUR_H5_API_KEY'; const securityCode = 'YOUR_H5_SECURITY_CODE'; this.h5MapUrl = `https://uri.amap.com/marker?position=116.397428,39.90923&src=uniapp&callnative=1&key=${key}&scode=${securityCode}`; }, // App 端初始化 initAppMap() { // 配置高德原生 SDK amap.initMap({ key: 'YOUR_APP_API_KEY', // 从高德控制台获取的 App Key securityJsCode: 'YOUR_APP_SECURITY_CODE' // App 端专用安全密钥 }); // 获取当前位置 uni.getLocation({ type: 'gcj02', // 高德坐标系 success: (res) => { this.latitude = res.latitude; this.longitude = res.longitude; this.markers[0].latitude = res.latitude; this.markers[0].longitude = res.longitude; this.showMap = true; // 确保获取位置后再显示地图 }, fail: () => { this.showMap = true; // 即使定位失败也显示地图 } }); }, // 地图加载完成回调 onMapLoaded(e) { console.log('地图加载完成', e); // #ifdef APP-PLUS const mapContext = uni.createMapContext('myMap', this); mapContext.moveToLocation(); // #endif } } }; </script> ``` #### 步骤 4：关键配置说明 1. **密钥区分**： - H5 和 App 需要分别申请不同的 API Key - App 端安全密钥在高德控制台「应用管理」中创建 2. **坐标系设置**： ```javascript uni.getLocation({ type: 'gcj02', // 必须使用高德坐标系 }); ``` 3. **Android 特殊配置**： 在 `src/main/AndroidManifest.xml` 中添加： ```xml <meta-data android:name="com.amap.api.v2.apikey" android:value="YOUR_ANDROID_API_KEY" /> ``` 4. **iOS 特殊配置**： 在 `AppDelegate.m` 中添加： ```objectivec #import <AMapFoundationKit/AMapFoundationKit.h> - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [AMapServices sharedServices].apiKey = @"YOUR_IOS_API_KEY"; // 其他代码... } ``` --- ### 常见问题排查 1. **地图空白但无报错**： - 检查是否调用了 `amap.initMap` - 确认 `showMap` 在获取位置后设置为 true 2. **INVALID_USER_SCOD 错误**： ```javascript // 确保安全密钥正确配置 amap.initMap({ key: '正确的APP_KEY', securityJsCode: '正确的SECURITY_CODE' // 32位字符串 }); ``` 3. **定位偏移问题**： - 确认所有坐标都使用 GCJ-02 坐标系 - 避免混合使用百度坐标系 4. **打包后地图不显示**： - 检查自定义基座是否包含地图模块 - 确认原生插件已正确打包： ```bash npx uni modules --add @dcloudio/uni-maps ``` --- ### 平台兼容性处理技巧 1. **条件编译**： ```javascript // #ifdef H5 // H5 特定代码 // #endif // #ifdef APP-PLUS // App 特定代码 // #endif ``` 2. **统一 API 封装**： ```javascript export default { methods: { openLocation() { // #ifdef H5 window.open(this.h5MapUrl); // #endif // #ifdef APP-PLUS uni.openLocation({ latitude: this.latitude, longitude: this.longitude }); // #endif } } } ```