Cordova打包常见问题

摘要

随着HTML5的广泛使用和快速发展,前端领域所能涉及的范围也在迅速扩张,混合开发已经在App领域占有了举足轻重的地位。网络上大量的第三方App打包工具也如雨后春笋般涌现。对于web前端开发人员来说,涉猎App领域已经不是什么新鲜事了。

随着HTML5的广泛使用和快速发展,前端领域所能涉及的范围也在迅速扩张,混合开发已经在App领域占有了举足轻重的地位。网络上大量的第三方App打包工具也如雨后春笋般涌现。对于web前端开发人员来说,涉猎App领域已经不是什么新鲜事了。

对于涌现出的大批第三方App打包工具,如何取舍、如何配置打包环境成了一个让大多数初学者望而却步的“拦路虎”。今天,笔者将自己的实践经验分享出来(笔者实践的是Windows 7系统),希望能够帮助大家。

笔者将整个过程分为四步:

友情提醒:很多人推荐安装Android Studio来取代手工配置Android SDK的过程。经笔者测试,这并非一个明智的做法,因为安装完Android Studio后的默认环境与Cordova打包环境并不匹配。这里推荐使用笔者提供的一体化环境(地址:http://pan.baidu.com/s/1miEEGuk 密码:77ot),这里面包含了所必需的Java JDK、Android SDK、Gradle。如果分享失效,可以留言通知,笔者会尽快修正。

Cordova打包环境配置

1、安装Node(建议安装LTS版,此版本为长期稳定版)

2、安装Cordova(笔者使用的Cordova是7.1.0)

npm install cordova -g

3、安装Java JDK(JDK是Java语言的软件开发工具包,主要用于移动设备、嵌入式设备上的java应用程序)

解压后,根据自己的Windows系统选择对应的jdk版本安装即可

特别提醒:安装过程都保持默认配置即可——为了保证安装后的jdk和jre在同一个地方

4、配置Android SDK与Gradle

-->将解压后的Android文件夹(默认只包含gradle-4.1和Sdk这两个文件夹),剪切到C:\Users\Administrator\AppData\Local

-->配置Gradle环境变量,只需要把类似于C:\Users\Administrator\AppData\Local\Android\gradle-4.1\bin这里的路径添加到path即可,不会的可以网上搜一下添加环境变量。

特别说明:解压后的Android文件夹只能放在路径为C:\Users\(用户名)\AppData\Local的文件夹下,要不然后期Cordova环境检测可能失败。

至此,不出意外的话Cordova打包环境应该已经配置好了。

Cordova打包环境校验

1、Cordova创建项目(cordova create 项目名 org.apache.cordova.工程名 App名)

cordova create app-demo org.apache.cordova.demo demo

2、进入Cordova项目

cd app-demo

3、添加Android platform

cordova platform add android@latest -S

4、Cordova打包环境检查(如果检测通过,后面再打包项目时,可以跳过此步)

cordova requirements

5、Cordova打包命令

cordova build android

特别说明:虽然配置了Gradle,但第一次打包时还会下载一个Gradle的包和其它一些必要的东西,务必保持网络通畅(整个过程较漫长,请耐心等待)。第一次打包成功后,之后再进行其它项目的打包速度将会非常快。

如何利用Cordova打包vue项目

1、创建cordova项目

cordova create app-demo org.apache.cordova.demo demo

2、进入cordova项目

cd app-demo

3、添加Android platform

cordova platform add android@latest -S

4、修改vue项目config文件夹中的index.js中build为assetsPublicPath: './'

5、运行npm run build

6、将dist文件夹内所有文件全部复制到cordova项目中的www目录中(粘贴之前先将www目录清空)

7、执行打包命令

cordova build android

然后,你就可以耐心的等待App“出炉”。

Cordova中设置禁止横屏

修改cordova项目中的config.xml

在对应设备的platform标签内,添加<preference name="orientation" value="portrait" />

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: