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,够小够轻量。



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


运行效果截图:


 


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

相关文章
|
1月前
|
调度 数据库 Android开发
构建高效Android应用:Kotlin协程的实践与优化
在Android开发领域,Kotlin以其简洁的语法和平台友好性成为了开发的首选语言。其中,Kotlin协程作为处理异步任务的强大工具,它通过提供轻量级的线程管理机制,使得开发者能够在不阻塞主线程的情况下执行后台任务,从而提升应用性能和用户体验。本文将深入探讨Kotlin协程的核心概念,并通过实例演示如何在实际的Android应用中有效地使用协程进行网络请求、数据库操作以及UI的流畅更新。同时,我们还将讨论协程的调试技巧和常见问题的解决方法,以帮助开发者避免常见的陷阱,构建更加健壮和高效的Android应用。
36 4
|
1月前
|
移动开发 Java Android开发
构建高效Android应用:Kotlin协程的实践之路
【2月更文挑战第31天】 在移动开发领域,性能优化和流畅的用户体验一直是开发者追求的目标。随着Kotlin语言的流行,其异步编程解决方案——协程(Coroutines),为Android应用带来了革命性的并发处理能力。本文将深入探讨Kotlin协程的核心概念、设计原理以及在Android应用中的实际应用案例,旨在帮助开发者掌握这一强大的工具,从而提升应用的性能和响应能力。
|
1月前
|
移动开发 调度 Android开发
构建高效Android应用:探究Kotlin协程的优势与实践
【2月更文挑战第30天】 在移动开发领域,尤其是针对Android平台,性能优化和应用流畅度始终是开发者关注的重点。近年来,Kotlin语言凭借其简洁性和功能性成为Android开发的热门选择。其中,Kotlin协程作为一种轻量级的线程管理解决方案,为异步编程提供了强大支持,使得编写非阻塞性代码变得更加容易。本文将深入分析Kotlin协程的核心优势,并通过实际案例展示如何有效利用协程提升Android应用的性能和响应速度。
|
1月前
|
数据库 Android开发 开发者
构建高性能微服务架构:从理论到实践构建高效Android应用:探究Kotlin协程的优势
【2月更文挑战第16天】 在当今快速迭代和竞争激烈的软件市场中,微服务架构以其灵活性、可扩展性和独立部署能力而受到企业的青睐。本文将深入探讨如何构建一个高性能的微服务系统,涵盖从理论基础到具体实现的各个方面。我们将重点讨论服务拆分策略、通信机制、数据一致性以及性能优化等关键主题,为读者提供一个清晰、实用的指南,以便在复杂多变的业务环境中构建和维护健壮的微服务体系结构。 【2月更文挑战第16天】 在移动开发领域,性能优化和流畅的用户体验是至关重要的。随着技术的不断进步,Kotlin作为一种现代编程语言,在Android开发中被广泛采用,尤其是其协程特性为异步编程带来了革命性的改进。本文旨在深入
241 5
|
1月前
|
JavaScript Android开发
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
26 0
|
1月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
49 3
|
26天前
|
Java Android开发 开发者
构建高效Android应用:Kotlin协程的实践与优化
在响应式编程范式日益盛行的今天,Kotlin协程作为一种轻量级的线程管理解决方案,为Android开发带来了性能和效率的双重提升。本文旨在探讨Kotlin协程的核心概念、实践方法及其在Android应用中的优化策略,帮助开发者构建更加流畅和高效的应用程序。通过深入分析协程的原理与应用场景,结合实际案例,本文将指导读者如何优雅地解决异步任务处理,避免阻塞UI线程,从而优化用户体验。
|
1天前
|
安全 数据处理 Android开发
构建高效Android应用:Kotlin协程的实践之路
【4月更文挑战第26天】 在面对现代Android开发时,性能优化和流畅的用户体验成为了开发者们追求的目标。Kotlin作为一种现代化的编程语言,通过其协程特性为Android应用带来了前所未有的并发处理能力。本文将深入探讨如何利用Kotlin协程提升Android应用的响应性和效率,同时保持代码的简洁性。我们将从协程的基础概念出发,逐步揭示如何在实际应用中运用这些强大的工具,以及它们如何改善应用架构和用户交互体验。
|
3天前
|
调度 Android开发 开发者
构建高效Android应用:探究Kotlin协程的优势与实践
【4月更文挑战第24天】随着移动开发技术的不断演进,提升应用性能和用户体验已成为开发者的核心任务。在Android平台上,Kotlin语言凭借其简洁性和功能性成为主流选择之一。特别是Kotlin的协程功能,它为异步编程提供了一种轻量级的解决方案,使得处理并发任务更加高效和简洁。本文将深入探讨Kotlin协程在Android开发中的应用,通过实际案例分析协程如何优化应用性能,以及如何在项目中实现协程。
|
19天前
|
移动开发 API Android开发
构建高效Android应用:探究Kotlin协程的优势与实践
【4月更文挑战第7天】 在移动开发领域,性能优化和应用响应性的提升一直是开发者追求的目标。近年来,Kotlin语言因其简洁性和功能性在Android社区中受到青睐,特别是其对协程(Coroutines)的支持,为编写异步代码和处理并发任务提供了一种更加优雅的解决方案。本文将探讨Kotlin协程在Android开发中的应用,揭示其在提高应用性能和简化代码结构方面的潜在优势,并展示如何在实际项目中实现和优化协程。