uni-app打包后安卓不显示地图及相关操作详解

新公司最近用uni-app写app,之前的代码有很多问题,正好趁着改bug的时间学习下uni-app。

问题现象:

使用uni-app在浏览器调试的时候,地图是展示的,但是打包完成后,在app端是空白的。咱第一次写app,啥也不懂啊不是。

附上一张浏览器调试的截图:

安卓app上是空白页,就不附图了。

问题排查

因为我们用的就是uni-app自带的组件,所以一般遇到这种问题,去官网查看相关资料就行。

  1. 官网最下方的注意事项中提到:"App端使用map推荐使用nvue"

    那项目中尽量使用.nvue文件,具体.vue文件能不能行,小伙伴们可以评论区告诉下~

  2. 注意事项中提到:"H5为腾讯地图或谷歌地图或高德地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。"

    H5的地图,也就是在浏览器中调试的地图,是根据你在manifest.json文件中,有个 web配置 模块配置生成的,我在项目中配的腾讯地图,所以在上面截图中是显示腾讯地图。因为我们加载地图的文件使用的是.nvue,所以我们app打包后是高德地图。

  3. 注意事项中提到**"向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest文件中勾选相应模块,在SDK配置中填写Appkey。"**

    所以我们没有填AppKey是不行的。

解决步骤

  1. 打开高德地图网站,进入右上角的控制台 ,进入应用管理 - 我的应用 后,添加key ,然后添加key名称、选择服务平台,接下来就是填写发布版安全码SHA1、PackageName

    SHA1可参照官方提供的几种方式去获取,生成SHA1要使用你打包的那个.keystore文件。

    PackageName可以使用HbuilderX云打包时的Android包名

  2. 填写好对应信息,提交后会生成key。打开HBuilderX找到 App模块配置 后找到 Maps,找到高德地图,把刚获取的key填上。(如果app只是安卓的,可以只填安卓的appkey。)

  3. 重新打包,安装app。

    app打开后是这样的:

    具体为啥不是平面的还没研究,有时间研究完再来追加。

成功!开森~

相关推荐
F-2H19 分钟前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
苹果酱056722 分钟前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
mmsx1 小时前
android sqlite 数据库简单封装示例(java)
android·java·数据库
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
众拾达人4 小时前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言