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

2023-11-01

接着上面两节,把做成的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,够小够轻量。

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

运行效果截图:

   

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • C# 将ComboBox设置为禁止编辑的方法

    2018年5月8日14 53 21 将ComboBox的DropDownStyle 属性设置为 DropDownList即可 Simple 简单的下拉列表框 始终显示列表 DropDown 可以编辑 与有下拉列表 默认 DropDownLi
  • 对于随机森林的通俗理解

    原文 http blog csdn net mao xiao feng article details 52728164 对于随机森林的通俗理解 一 决策树 决策树是机器学习最基本的模型 在不考虑其他复杂情况下 我们可以用一句话来描述决策树
  • Python 量化投资实战教程(4) —KDJ 策略

    量化投资系列文章 Backtrader 教程 Python 量化投资实战教程 1 Python 量化投资实战教程 2 MACD策略 26 9 Python 量化投资实战教程 3 A股回测MACD策略 Github仓库 https githu
  • 服务治理spring cloud Admin/链路跟踪 ZipKin

    1 Spring Boot Admin Spring Boot Admin 用于监控基于 Spring Boot 的应用 它是在 Spring Boot Actuator 的基础上提供简洁的可视化 WEB UI 1 1 简介 Spring
  • linux 下 性能,Linux(ubuntu)下iostat的安装和系统性能监控

    linux系统出现了性能问题 一般我们可以通过top iostat free vmstat等命令 来查看初步定位问题 其中iostat可以给我们提供丰富的IO状态数据 iostat 由 Red Hat Enterprise Linux AS
  • IBL-镜面反射(预滤波篇)

    文章目录 1低差异序列 2重要性采样 3 GGX重要性采样 3 1 将uv坐标转化为半球向量坐标 3 2 将半球向量坐标转化为笛卡尔坐标 3 3 将切线坐标转化为世界坐标 3 4 完整代码 4 预滤波器卷积着色器 4 1 近似 4 2 获取
  • 【深入理解C++】产生临时对象的情况和解决

    文章目录 1 临时对象 2 对象作为函数的参数 以传值的方式传给函数 3 类型转换生成的临时对象 4 对象作为函数的返回值 以值的方式从函数返回 1 临时对象 临时对象 也称为匿名对象 没有变量名 没有被指针指向的对象 用完后马上调用析构
  • 使用C# ASP.NET框架构建Web应用程序

    在本文中 我们将介绍如何使用C ASP NET框架来构建功能强大的Web应用程序 ASP NET是一种用于构建Web应用程序的开发框架 而C 是一种用于编写 NET应用程序的编程语言 通过结合这两种技术 我们可以创建出稳定 可扩展和易于维护
  • 【学习day4】模型选择+过拟合和欠拟合

    主要来源 李沐老师的pytorch 动手学习深度学习 鞠躬感谢 记录每日所学 欢迎讨论 目录 一 模型选择 二 训练误差和泛化误差 三 多项式回归 1 生成数据集 2 对模型进行测试和训练 3 三阶多项式函数拟合 正态 4 线性函数拟合 欠
  • tomcat加内存限制和启动多个tomcat和设置连接数

    1 加内存限制 vim opt tomcat bin catalina sh 搜索OS 在cygwin false上加上如图那句代码 JAVA OPTS server Xms4096m Xmx4096m XX MaxPermSize 512
  • 集成学习、boosting、bagging、Adaboost、GBDT、随机森林

    集成学习算法简介 什么是集成学习 集成学习通过建立几个模型来解决单一预测问题 它的工作原理是生成多个分类器 模型 各自独立地学习和作出预测 这些预测最后结合成组合预测 因此优于任何一个单分类的做出预测 机器学习的两个核心任务 如何优化训练任
  • spring 详解三 IOC(spring实例化及后处理器)

    Spring实例化基本流程 Spring在容器初始化的时候 读取XMl配置 将其封装成BeanDefinition Bean定义 对象 描述所有bean的信息 BeanDefinition会注册存储到beanDefinitionMap集合中
  • Linux安装中文字体

    前言 Lunix默认没有中文字库 很容易导致项目开发时出现中文字符乱码的情况 1 查看linux已安装字体 fc list 如出现 bash fc list command not found 说明Linux中没有安装字体库 需要先安装字体
  • Eclipse 安装checkstyle插件

    为什么80 的码农都做不了架构师 gt gt gt CheckStyle是SourceForge下的一个项目 提供了一个帮助JAVA开发人员遵守某些编码规范的工具 它能够自动化代码规范检查过程 从而使得开发人员从这项重要 但是枯燥的任务中解
  • IOS开发 生成app图标

    1 一键生成所有尺寸对应的应用图标 链接如下 图标工场 移动应用图标 启动图生成工具 一键生成所有尺寸的应用图标 启动图 2 在Assets中 将图标放在对应的位置 3 在Build Settings中 给app命名 4 Build即可
  • 【华为OD机试c++】最大化控制资源成本【2023 Q1

    华为OD机试 题目列表 2023Q1 点这里 2023华为OD机试 刷题指南 点这里 题目描述 公司创新实验室正在研究如何最小化资源成本 最大化资源利用率 请你设计算法帮他们解决一个任务混部问题 有taskNum项任务 每个任务有开始时间
  • SetFileCompletionNotificationModes FILE_SKIP_COMPLETION_PORT_ON_SUCCESS

    SetFileCompletionNotificationModes function Sets the notification modes for a file handle allowing you to specify how co
  • [git03] 通过pycharm使用git和github的步骤(图文详解)

    一 在Pycharm工具中配置集成Git和GitHub 1 集成Git 打开Pycharm 点击File gt Settins gt Version Control gt Git 然后在 Path to Git executable中选择本
  • Django根据数据库表反向生成models

    1 创建Django项目 创建工程 django admin py startproject movie 创建app python manage py startapp App 在settings py里面添加App INSTALLED A
  • Vue3.0入门 + Vant3.0移动端实践(三)使用Cordova打包Android App

    接着上面两节 把做成的h5小应用打包成android的app放置在手机上看看效果 如何把一个h5应用打包成android的app 使用Cordova就是一种简单不错的办法 当然也有其他的一些办法如使用HBuilderX这一强大的IDE工具