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

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

前言:

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

uni-app跨平台框架介绍和快速入门

uni-app跨平台框架介绍和快速入门

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

详情概述: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

1336199-20210503002130073-951731530.png

下载成功,如下图所示:

1336199-20210503002355426-1075300695.png

使用Android Studio 打开Hbuilder-Hello (H5+项目模板),并编译:

注意:

下文中的Hbuilder-Hello等于HBuilder-HelloUniApp因为之前版本是叫做HBuilder-Hello,所以大家只要知道这两个SDK其实是一样的只是版本不一样而已。

注意不要把项目放在带有中文的文件夹目录下面,否则无法编译通过提示一下错误:

编译的时候会提示:项目路径包含非ASCII字符。这很可能会导致Windows上的生成失败。请将项目移到其他目录或者更改为英文文件名。

1336199-20210503002617687-1292032710.png

打开Hbuilder-Hello Android项目:

1336199-20210503003122556-913161711.png

注意:导入成功以后进行项目编译,注意第一次项目编译可能会出现ERROR: Read timed out的情况,不过不要慌继续点击编译即可解决。

1336199-20210503003204935-2067239834.png

解决项目编译通过后无法直接在虚拟设备中运行提示Error:moudle not specified:

问题查找:

1、点击Edit Configurations:

1336199-20210503003704178-82182320.png

2、 在弹出层左侧选择,Android App>app 查看General模块下的Module中是否存在其他模块:

1336199-20210503003802802-1488376628.png

Android Studio中运行项目时提示Error:moudle not specified,解决方案:

点击搜索按钮,输入【Sync Project With Gradle Files】,直接点击下面搜索到的内容,然后就会自动安装缺少的Gradle Files文件,安装完成之后项目即可运行!

1336199-20210503004055503-1377591329.png


使用Android Studio中的虚拟设备运行项目,查看运行效果:

如何使用Android Studio中的虚拟设备运行项目,如下图所示:

1336199-20210503004149257-2005104072.png


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

1336199-20210503004208713-1038128421.png

HBuilderX生成本地打包App资源:

生成本地打包App资源:

使用HBuilderX写好的项目,点击发行 > 原生app-本地打包 > 生成本地打包资源,打包完成后,HBuilderX控制台会输出打包信息和打包路径:

1336199-20210504014136595-1712070452.png

 

生成的资源文件如下图所示:

1336199-20210504014211881-1946536733.png

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 两个文件夹:

1336199-20210504020149704-510468432.png

1336199-20210504020203561-1531346423.png

1336199-20210504020218247-853585432.png

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

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

1336199-20210504020308396-380944930.png

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

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

1336199-20210504020417354-538245246.png

替换dcloud_control.xml中的appid:

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

1336199-20210504020506999-1957317376.png

1336199-20210504020516820-114001324.png

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

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

1336199-20210504020831125-1807993778.png

 

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

1336199-20210504020859419-79387272.png

 

相关文章
|
28天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
422 7
|
28天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
480 1
|
14天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
28天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
61 9
|
28天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
185 3
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
172 1
|
11天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
502 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
20天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
28天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
290 0

热门文章

最新文章