Vue3.0入门 + Vant3.0移动端实践(三)使用Cordova打包Android App

简介: Vue3.0入门 + Vant3.0移动端实践(三)使用Cordova打包Android App

接着上面两节,把做成的h5小应用打包成android的app放置在手机上看看效果。


如何把一个h5应用打包成android的app? 使用Cordova就是一种简单不错的办法。


当然也有其他的一些办法如使用HBuilderX这一强大的IDE工具,里面支持打包Android或ios的app,微信小程序等。或者一些第三方的打包平台,也支持把h5的应用打包成app,但有可能是收费的。


使用HBuilderX的话若开发体系都是基于HBuilder则是不错的选择,但太依赖于HBuilder。而使用Cordova打包的话,则依赖较少,比较简单。无论是网页的h5或者使用vue框架等打包的单页应用,都可以使用Cordova命令行工具快速的打包。


         


Cordova简介:



Cordova官网:Cordova中文网


Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能。应用的实现是通过web页面,默认的本地文件名称是是index.html,这个本地文件应用CSS,JavaScript,图片,媒体文件和其他运行需要的资源。应用执行在原生应用包装的WebView中。


简单来说就是:使用Cordova这个框架可以让你支持混合应用开发,把h5的web应用打包成各种平台上能跑的类似原生的应用体验。且它还提供了一些访问平台设备的插件或api,方便使用js访问到硬件功能。


为啥要用Cordova?


混合应用开发快啊,且一次开发多端部署。BAT大厂目前采用的都是这种技术,原生开发虽然性能和体验是好,但是无法跨平台,维护和开发成本过高。Hybrid App(混合模式移动应用)兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”所以很流行。使用Cordova,开发者可以用标准WEB技术HTML5、CSS3、JavaScript,来开发跨平台App。且一些原生才有的一些特性,cordova提供了一些符合标准的API绑定去访问每个设备的功能。


Cordova安装


Cordova的命令行运行在nodejs上面并且可以通过npm安装。 根据 平台具体指导安装相应平台的依赖。打开命令提示符或终端,然后键入npm install -g cordova.安装。


安装完成后,使用Cordova -v可以查看下是否安装成功。


Cordova打包android app步骤


1.第一步,创建demo模板应用。


cordova create hello com.example.hello demo 


(文件夹名称hello,包名com.example.hello,应用名demo)



2.第二步,在项目页面文件在www中,放入对应文件,直接把打包后dist里的文件拷贝进去替换即可。


3.第三步,命令符进入到Cordova项目中,添加browser平台 cordova platform add browser  


4. 第四步,浏览器运行  cordova run :


cordova run




5.第五步,打包apk安卓运行,生成的安卓包


cordova platform add android


(前提条件:电脑上已有jdk和android sdk等环境)



6.第六步骤,开始生成android的apk


cordova build android



提示这个,说明环境未就绪,根据提示,解决下这个问题。


环境变量添加 ANDROID_HOME,新建系统变量 ANDROID_HOME


变量名:ANDROID_HOME 变量值:D:\Android\SDK


添加Path变量,变量值:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools


gradle也需要加入到环境变量,Gradle是Android Studio用来构建和管理项目的一个插件。这上面的报错主要就是找不到gradle。


一般来说Android Studio默认下载Gradle包的路径为:C:\Users\用户名\ .gradle\wrapper\dists


如我的是:C:\Users\Administrator\.gradle\wrapper\dists



系统变量 中变量名输入 GRADLE_HOME



然后继续在下方的系统变量中找到Path变量,点击编辑-编辑文本,在Path的变量值后面添加;%GRADLE_HOME%\bin


添加环境变量成功后,打开dos命令行窗口,输入gredle -v显示版本信息,则说明配置正常。



最后,已经接近成功啦,


执行cordova build android





生成的app-debug.apk竟只有1.6M,够小够轻量。



安装到手机或设备上成功流畅运行。


运行效果截图:


 


最后打包完成后可能遇到的跨域问题,缓存问题,网上都有解决方案,可自行百度。比如跳转路由增加时间戳,可以有效解决缓存问题,设置代理,解决跨域问题。

相关文章
|
21小时前
|
Java 开发工具 Android开发
cordova打包android apk
cordova打包android apk
5 0
|
21小时前
|
Android开发 数据安全/隐私保护
打包 android apk签名
打包 android apk签名
6 0
|
2天前
|
安全 Java 数据挖掘
当 App 有了系统权限,真的可以为所欲为? Android Performance Systrace
当 App 有了系统权限,真的可以为所欲为? Android Performance Systrace 转载自: https://androidperformance.com/2023/05/14/bad-android-app-with-system-permissions/#/0-Dex-%E6%96%87%E4%BB%B6%E4%BF%A1%E6%81%AF
18 0
|
20天前
|
域名解析 JSON 测试技术
常见移动端APP测试场景
常见移动端APP测试场景
|
22天前
|
开发框架 JavaScript 前端开发
深入探讨Vue.js核心技术及uni-app跨平台开发实践
深入探讨Vue.js核心技术及uni-app跨平台开发实践
27 0
|
25天前
|
Android开发 开发者 iOS开发
APP开发后如何上架,上架Android应用市场前要准备什么
移动应用程序(APP)的开发已经成为现代企业和开发者的常见实践。然而,开发一个成功的APP只是第一步,将其上架到应用商店让用户下载和使用是实现其潜力的关键一步。
|
27天前
|
Android开发
闲暇时间收集和整理的Android的一些常用的App
闲暇时间收集和整理的Android的一些常用的App
9 0
|
27天前
|
移动开发 前端开发 Android开发
分享200个App移动端模板
分享200个App移动端模板
24 0
|
28天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
10 0
|
1月前
|
Android开发 UED 开发者
解释Android App Bundle是什么,它的优势是什么?
解释Android App Bundle是什么,它的优势是什么?
24 0

相关产品

  • 云迁移中心