当前位置: 首页 > news >正文

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打开后是这样的:
    具体为啥不是平面的还没研究,有时间研究完再来追加。
    安卓app地图截图

成功!开森~

http://www.lryc.cn/news/135300.html

相关文章:

  • elelementui组件
  • 什么是安全测试报告,怎么获得软件安全检测报告?
  • JS中的Ajax
  • ImportError: cannot import name ‘SQLDatabaseChain‘ from ‘langchain‘解决方案
  • npm、yarn和pnpm
  • SparkSQL源码分析系列02-编译环境准备
  • 【计算机网络】日志与守护进程
  • 设计模式之职责链模式(ChainOfResponsibility)的C++实现
  • CGAL Mesh(网格数据)布尔操作
  • 技术分享| WebRTC之SDP详解
  • Flink Table API/SQL 多分支sink
  • Vue3 中 导航守卫 的使用
  • 云原生概论
  • hive-sql
  • Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)
  • 基于centos7完成docker服务的一些基础操作
  • Microsoft Visual Studio + Qt插件编程出现错误error MSB4184问题
  • QT Quick之quick与C++混合编程
  • Ros noetic Move_base 相关状态位置的获取 实战使用教程
  • 【SpringBoot】SpringBoot项目与Vue对接接口的步骤
  • Glog安装与使用
  • windows开发环境搭建
  • 8月17日上课内容 第三章 LVS+Keepalived群集
  • Threejs学习05——球缓冲几何体背景贴图和环境贴图
  • LVS+Keepalived群集实验
  • 软考高级之系统架构师之系统开发基础
  • Web 3.0 安全风险,您需要了解这些内容
  • 万宾科技22款产品入选《城市生命线安全工程监测技术产品名录》
  • MFC 隐藏窗口
  • Java数据库连接池原理及spring boot使用数据库连接池(HikariCP、Druid)