uniapp开发踩坑兼容问题【第二弹！！】，血泪史o(╥﹏╥)o，一次学习终生避雷！！！

uni-app开发兼容问题及解决方案

原创

已于 2025-02-13 17:28:14 修改 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #学习

于 2025-02-13 15:36:48 首次发布

包含项目搭建 h5端常见问题安卓端常见问题和请求的的封装按需使用栓Q

🚀 1. 项目搭建

环境准备

npm i -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

📂 项目结构

src/
├── api        # 接口管理
├── components # 全局组件
├── directives # 自定义指令
├── filter     # 全局过滤器
├── hybrid     # 混合页面
├── library    # 工具库
├── pages      # 页面文件
├── static     # 静态资源
└── store      # Vuex 状态管理

🛠️ 必备工具

{
  "devDependencies": {
    "pug": "^3.0.2",
    "stylus": "^0.59.0",
    "prettier": "^2.8.4",
    "postcss-comment": "^2.0.0"
  }
}

🤖 2. Android端疑难杂症

1️⃣ 启动白屏问题

症状：
Android 10+ 设备启动页消失后白屏

解决方案：
修改 build.gradle：

android {
    defaultConfig {
        targetSdkVersion 26  // 降级 SDK 版本
    }
}

📚 官方解决方案参考：https://ask.dcloud.net.cn/article/36199

3.关于APP端离线打包后定位失效的问题

我在本地打包后遇到这样一个问题：使用HBuilderX真机调试的时候，能够正常获取到定位。但离线打包后，就不可以获取到正确的定位信息，永远走的都是fail。经过一系列排查，发现需要在Android原生工程中进行相关配置才能正确获取到定位。

官方文档中提到：

Android由于谷歌服务被墙，或者手机上没有GMS，想正常定位就需要向高德等三方服务商申请SDK资质，获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：https://ask.dcloud.net.cn/article/29。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位，是因为真机运行基座使用了DCloud向高德申请的sdk配置，打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器，此时无需在manifest填写高德定位的sdk配置。

我使用的是高德定位，具体流程如下：

到高德开放平台申请应用

首先注册高德开放平台的账号，到控制台中
添加应用
然后在应用下添加key

其中：

SHA1码的获取方式：在命令行中输入以下命令获取


keytool -list -v -keystore test.keystore
Enter keystore password: // 输入密码，回车
PackageName为build.gradle中配置的包名

创建好应用及key后，记住此key

需要引入工程的jar/aar文件
需要将以下jar/aar文件（下载地址点这里）放到工程的libs目录下

路径文件
SDK\libs amap-libs-release.aar, geolocation-amap-release.aar
3. 在AndroidManifest.xml中配置
application节点前：

<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_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.READ_LOGS"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS"/>

application节点下：


<meta-data android:name="com.amap.api.v2.apikey" android:value=\"%用户申请的APPkey%\"></meta-data>
<service android:name="com.amap.api.location.APSService"></service>

在manifest.json中配置

在manifest.json中将key进行配置

4. Android端常见问题解决方案

1)当前运行环境无法运行启用“自定义组件模式”的uni-app应用

HBuilderX1.9.0及以上版本uni-app项目启用“自定义组件模式”，运行为APP时做了底层性能优化，可能出现兼容性问题引起白屏现象。

HBuilderX1.9.4及以上版本会自动检查基座环境是否支持启用“自定义组件模式”，如果不支持则会弹出以下提示框

解决方案：

将 uniapp-release.aar放于 app/libs目录下，并在 app/build.gradle中添加以下依赖：


dependencies {
   
   
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation fileTree(include: ['*.aar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    /*uniapp所需库-----------------------开始*/
    implementation 'com.android.support:recyclerview-v7:26.1.0'
    implementation 'com.facebook.fresco:fresco:1.13.0'
    implementation "com.facebook.fresco:animated-gif:1.13.0"
    /*uniapp所需库-----------------------结束*/
    // 基座需要，必须添加
    implementation 'com.github.bumptech.glide:glide:4.9.0' // 基座依赖
    implementation 'com.alibaba:fastjson:1.1.46.android'
}