uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程
前言:
为什么会写这么一个教程,因为很久之前做过一个对接银行POS我们的系统是使用的H5开发的app应用。但是假如对结果银行相关业务的小伙伴应该都清楚,银行的业务相对于其他的对接方而言安全性比较高,而且一般都不会提供定制开发,所以只能我们自己来实现与他们的对接。因此我们把支付这一块做成了Android原生的对接,因为我们需要对接银行提供的Activity组件来来实现POS机扫码、刷卡等相关的支付功能。
uni-app跨平台框架介绍和快速入门
什么是原生开发?什么是混合开发?两者有什么区别?
开发环境准备:
Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区
(Android Studio 下载安装详细教程:https://blog.csdn.net/wangmx1993328/article/details/81905195)
uni-app开发环境安装:HBuilderX
App离线SDK下载:最新android平台SDK下载
下载uni-app 安卓打包所需要的 SDK:
https://nativesupport.dcloud.net.cn/AppDocs/download/android
下载成功,如下图所示:
使用Android Studio 打开Hbuilder-Hello (H5+项目模板),并编译:
注意:
下文中的Hbuilder-Hello等于HBuilder-HelloUniApp因为之前版本是叫做HBuilder-Hello,所以大家只要知道这两个SDK其实是一样的只是版本不一样而已。
注意不要把项目放在带有中文的文件夹目录下面,否则无法编译通过提示一下错误:
编译的时候会提示:项目路径包含非ASCII字符。这很可能会导致Windows上的生成失败。请将项目移到其他目录或者更改为英文文件名。
打开Hbuilder-Hello Android项目:
注意:导入成功以后进行项目编译,注意第一次项目编译可能会出现ERROR: Read timed out的情况,不过不要慌继续点击编译即可解决。
解决项目编译通过后无法直接在虚拟设备中运行提示Error:moudle not specified:
问题查找:
1、点击Edit Configurations:
2、 在弹出层左侧选择,Android App>app 查看General模块下的Module中是否存在其他模块:
Android Studio中运行项目时提示Error:moudle not specified,解决方案:
点击搜索按钮,输入【Sync Project With Gradle Files】,直接点击下面搜索到的内容,然后就会自动安装缺少的Gradle Files文件,安装完成之后项目即可运行!
使用Android Studio中的虚拟设备运行项目,查看运行效果:
如何使用Android Studio中的虚拟设备运行项目,如下图所示:
虚拟设备运行成功后的项目界面:
HBuilderX生成本地打包App资源:
生成本地打包App资源:
使用HBuilderX写好的项目,点击发行 > 原生app-本地打包 > 生成本地打包资源,打包完成后,HBuilderX控制台会输出打包信息和打包路径:
生成的资源文件如下图所示:
Android知识点补充,assets资源目录和res目录介绍:
Android的体系架构设计中,assets目录下的数据内容(图片、文件等等)将不会被Android系统压缩、二次处理等,assets目录下的文件将保持原汁原味打包进Android的apk文件中,因此,利用Android assets这一点特性,根据项目开发的需要,在某种情况下,可以在assets目录下存放一些不希望被Android系统二次处理的原始文件,就像在PC开发时候直接针对硬盘上存放的文件内容进行读写一样读出原始数据。
res目录下存放的可编译的资源文件:
这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件比较简单,通过R.XXX.ID即可。
HBuilder-Hello > app > src > main 文件图解:
![](https://img2020.cnblogs.com/blog/1336199/202105/1336199-20210504020149704-510468432.png)
将HBuilderX生成本地打包App资源复制到项目App>src>main>assets>apps目录下:
将本地App资源文件Copy到App>src>main>assets>apps目录中,并把之前的apps.HelloH5.www 删除(也可以不删除)。
![](https://img2020.cnblogs.com/blog/1336199/202105/1336199-20210504020308396-380944930.png)
apps目录下存在多个app项目如何指定对应项目运行:
![](https://img2020.cnblogs.com/blog/1336199/202105/1336199-20210504020417354-538245246.png)
替换dcloud_control.xml中的appid:
![](https://img2020.cnblogs.com/blog/1336199/202105/1336199-20210504020506999-1957317376.png)
替换项目appid后重新编译项目,查看HBuilderX生成的本地App资源效果:
替换appid后先点击Build先点击Clean Project(清理项目),然后在Make Project(重新编译项目):
虚拟设备运行成功后的项目界面:
uni-app&H5&Android混合开发教程汇总
uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程
uni-app&H5&Android混合开发二 || 使用Android Studio打包应用APK
uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
【新手指南】Android Studio中应用App的相关配置
相关文章
- 一文带你认知定时消息发布RocketMQ
- 云图说丨初识可信分布式身份服务
- 华为云构建云原生DevSecOps平台,保障软件供应链全流程安全可信
- 基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
- 基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
- 基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
- 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验
- 基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理
- 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
- 在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理
- 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成
- Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理
- 在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
- 总结开发中基于DevExpress的Winform界面效果
- 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
- 使用BootstrapVue相关组件,构建Vue项目界面
- 使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
- 浏览器、负载均衡 、进程内部层…那些你需要掌握的多级缓存
- 家电上云后,智能家居如何构建场景化应用
- 带你徒手完成基于MindSpore的CycleGAN实现