首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程

uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程

作者头像
追逐时光者
发布于 2021-05-07 08:04:58
发布于 2021-05-07 08:04:58
4.5K1
举报
文章被收录于专栏:编程进阶实战编程进阶实战

前言:

  为什么会写这么一个教程,因为很久之前做过一个对接银行POS我们的系统是使用的H5开发的app应用。但是假如对结果银行相关业务的小伙伴应该都清楚,银行的业务相对于其他的对接方而言安全性比较高,而且一般都不会提供定制开发,所以只能我们自己来实现与他们的对接。因此我们把支付这一块做成了Android原生的对接,因为我们需要对接银行提供的Activity组件来来实现POS机扫码、刷卡等相关的支付功能。

什么是原生开发?什么是混合开发?两者有什么区别?

详情概述:https://zhuanlan.zhihu.com/p/32146560

开发环境准备:

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目录介绍:

assets目录下存放的原生资源文件(不会被编译):

Android的体系架构设计中,assets目录下的数据内容(图片、文件等等)将不会被Android系统压缩、二次处理等,assets目录下的文件将保持原汁原味打包进Android的apk文件中,因此,利用Android assets这一点特性,根据项目开发的需要,在某种情况下,可以在assets目录下存放一些不希望被Android系统二次处理的原始文件,就像在PC开发时候直接针对硬盘上存放的文件内容进行读写一样读出原始数据。

res目录下存放的可编译的资源文件:

这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件比较简单,通过R.XXX.ID即可。

HBuilder-Hello > app > src > main 文件图解:

打开android studio 切换项目到project目录,依次打开 HBuilder-Hello > app > src > main > assets,能看到apps.HelloH5.www 和 data 两个文件夹:

将HBuilderX生成本地打包App资源复制到项目App>src>main>assets>apps目录下:

将本地App资源文件Copy到App>src>main>assets>apps目录中,并把之前的apps.HelloH5.www 删除(也可以不删除)。

apps目录下存在多个app项目如何指定对应项目运行:

当我们没有删除apps目录文件夹下的apps.HelloH5.www项目时,在存在两个app项目的情况下如何指定对应的项目运行,下图所示:

替换dcloud_control.xml中的appid:

复制apps.HelloH5.www>maindest.json 中的id(__UNI__18BEDD3 我项目中的id),替换data>dcloud_control.xml 中的 appid:

替换项目appid后重新编译项目,查看HBuilderX生成的本地App资源效果:

替换appid后先点击Build先点击Clean Project(清理项目),然后在Make Project(重新编译项目):

虚拟设备运行成功后的项目界面:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
想联你,有邮箱吗?
想联你,有邮箱吗?
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
uni-app的app打包过程
https://nativesupport.dcloud.net.cn/AppDocs/README
达达前端
2020/11/16
4.8K0
uni-app的app打包过程
uni-app入门教程(1)uni-app简介、部署和目录结构
本文主要介绍了uni-app的基本情况,并引导快速创建和运行第一个uni-app项目,同时对项目的目录结构和代码规范进行详细说明,适合uni-app零基础初学者。
cutercorley
2020/12/16
6.5K0
uni-app入门教程(1)uni-app简介、部署和目录结构
Uni-App项目搭建以及准备工作
Uni-App项目开发,需要“定制化IDE”,也就是“HBuilderX”工具,主要是因为模拟运行调试一块,其他IDE不具备,其他功能和VS code、Submit Text 基本一致。
Javanx
2019/09/04
2.8K0
Uni-App项目搭建以及准备工作
使用HBuilder离线本地打包ipa教程
注意:如果版本不一致,app启动时会弹出版本不一致的提示框,并且可能导致功能异常
用户6808043
2022/02/24
5K0
使用HBuilder离线本地打包ipa教程
MUI、HBuilderX、H5+开发APP本地打包(iOS)
同款Android的在这里: MUI、HBuilderX开发APP本地打包(Android篇)
Light413
2020/04/08
2K0
MUI、HBuilderX、H5+开发APP本地打包(iOS)
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
陶然同学
2024/04/30
2930
uni-app(优医咨询)项目实战 - 第1天
uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
  关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式。
追逐时光者
2021/07/27
7K0
FinClip SaaS 平台——小程序转APP操作指南及其实现
前面一篇文章介绍了从零到一开发小程序并将小程序内嵌到APP中,可查看前面文章进行操作,本文介绍FinClip SaaS 平台推出的新功能 生成APP
小柔
2022/10/09
9570
FinClip SaaS 平台——小程序转APP操作指南及其实现
uni-app x 支持鸿蒙
国产替代浪潮奔涌,鸿蒙适配已成为一个必答题,这里面跨端框架是破局多 OS 割裂的最优解。比如 uniapp x,之前有很多 app 可能是用 uniappx 做的,那么如何支持鸿蒙呢?
徐建国
2025/04/15
4250
uni-app x 支持鸿蒙
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
即构美颜sdk不支持uniapp,我们需要制作uni原生插件,安卓和IOS双端都需要
卓伊凡
2025/01/24
4380
一套代码,14个平台运行,牛!
前端技术有HTML5、CSS3、JavaScript、Node,目前较火的前端框架有Vue、React,流行的多端开发框架有uni-app、Taro等。本文主要介绍uni-app。 一、uni-app到底是什么 简单来讲,uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,即可发布到iOS、Android、H5及各种小程序(如微信、支付宝、百度、头条、QQ、钉钉、淘宝等)、快应用等多个平台。 uni-app在开发者数量、案例数量、跨平台能力、扩展灵活性、性能体验、周边生态、学
江南一点雨
2022/09/21
2.8K0
一套代码,14个平台运行,牛!
android离线打包[通俗易懂]
Android Studio 链接:Download Android Studio and SDK tools | Android Developers
全栈程序员站长
2022/11/15
1.8K0
android离线打包[通俗易懂]
uniapp下载apk并且安装(uniapp打包后apk白屏)
-alias xxx : xxx是别名 xxx.keystore : 文件名
全栈程序员站长
2022/08/01
7.2K0
uniapp下载apk并且安装(uniapp打包后apk白屏)
使用uni-app进行开发前准备
使用uni-app进行开发,需要遵循一定的步骤和流程。以下是一个详细的指南,帮助你开始使用uni-app进行开发:
FGGIT
2024/12/20
3850
用uniapp开发跨端应用开发打包发布完整指南
用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目,下面示例项目采用 HBuilderX可视化界面 的方式创建,cli项目可参考uni文档,大部分流程都是通用的。
人人都是码农
2023/11/16
2.9K0
用uniapp开发跨端应用开发打包发布完整指南
uni-app基础教程 环境配置【uniapp 专题 01】
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。当然uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
徐建国
2022/03/29
2.2K0
uni-app基础教程 环境配置【uniapp 专题 01】
uni-app for Harmony
uni-app 是一个使用 Vue.js[1] 开发所有前端应用的框架,开发者编写一套代码,可发布到 HarmonyOS、iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
徐建国
2024/12/19
2240
uni-app for Harmony
uni-app iOS平台-离线打包制作自定义基座
1、在打包原生工程里找到 control.xml文件,在HBuilder节点里查看是否有这2个: debug="true" syncDebug="true" 配置(注意-打AppStore包的时候,这个配置需要去掉,否则会导致热更新失败!),没有的话增加上,然后保存。
赵哥窟
2021/12/16
3.2K0
uni-app iOS平台-离线打包制作自定义基座
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
程序员朱永胜
2024/04/18
3340
uni-app(优医咨询)项目实战 - 第1天
手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
好久不见,很久没更新博客了,前段时间在深圳出差,胡吃海喝颓废了很久,不想每天下班刷抖音、打游戏虚度光阴,准备把之前做的一个小程序案例详细的介绍一下,从安装编译器开始重新开发复盘一遍,希望对初入小程序的你有所帮助。
Tz一号
2020/09/10
2.5K0
推荐阅读
相关推荐
uni-app的app打包过程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档