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

Posted 2021-12-12 特立独行的猫a

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

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

运行效果截图：

   

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