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



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


运行效果截图:


 


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

相关文章
|
11月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
1019 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
|
数据采集 JSON 网络安全
移动端数据抓取:Android App的TLS流量解密方案
本文介绍了一种通过TLS流量解密技术抓取知乎App热榜数据的方法。利用Charles Proxy解密HTTPS流量,分析App与服务器通信内容;结合Python Requests库模拟请求,配置特定请求头以绕过反爬机制。同时使用代理IP隐藏真实IP地址,确保抓取稳定。最终成功提取热榜标题、内容简介、链接等信息,为分析热点话题和用户趋势提供数据支持。此方法也可应用于其他Android App的数据采集,但需注意选择可靠的代理服务。
741 11
移动端数据抓取:Android App的TLS流量解密方案
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
674 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1752 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
存储 文件存储 Android开发
仿第八区APP分发下载打包封装系统源码
该系统为仿第八区APP分发下载打包封装系统源码,支持安卓、iOS及EXE程序分发,自动判断并稳定安装。智能提取应用信息,自动生成PLIST文件和图标,提供合理的点数扣除机制。支持企业签名在线提交、专属下载页面生成、云端存储(阿里云、七牛云),并优化签名流程,支持中文包及合并分发,确保高效稳定的下载体验。 [点击查看源码](https://download.csdn.net/download/huayula/90463452)
927 22
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
711 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
607 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
576 0

热门文章

最新文章