使用cordova将Ext JS 6.2的Modern应用程序打包为安卓APP

近期使用Ext JS 6.2的Modern工具包写了一个应用程序，本意是作为一个移动应用程序，在移动端通过浏览器来访问的。但后来有个需求需要将应用程序打包为APP来实现，于是就尝试着使用cordova来实现打包。经过一番折腾，居然成功了，最终效果令人满意。为了做个笔记，特意写了此文，方便自己，也方便大家。

这个应用程序是使用单工具包形式创建的，不是通用应用程序，因而可避免一些麻烦，如果是使用通用应用程序的，步骤和方法可能会有些不同，这个要注意。

当笔者接到要打包的需求后，第一时间做的就是到官网的文档中查看相关的文档：Integrating With Cordova or PhoneGap。根据文档的内容，貌似挺简单的。

不过，在刚开始的时候就犯二了。首先是想着，反正Visual Studio 2017也能装Coredova和安装SDK。于是打开Visual Studio 2017，准备安装这两个东西，但发现网络下载不了，装不了，只能另想办法了。本来这东西之前是装过的，但某天系统提示C盘告急，后来发现安装SDK这东西居然占了差不多10G空间，只能卸载清空间了。在这里不得不吐槽一下，装这些东西的时候基本不用考虑系统问题，反正往用户的AppData\Roaming文件夹中塞东西准没错，准确高效，省时间。没办法，下载了个android studio来装sdk吧，装完后，又发现默认路径又是在AppData\Roaming中，还好，这次终于能在设置中修改路径了，修改路径重来。

装好了SDK，然后想着在用Sencha Touch的时候都不用装这些东西就能打包，应该差不多吧，于是在应用程序根目录运行以下命令：

sencha cordova init com.mycompany.MyApp MyApp

以上命令要注意修改mycompany和MyApp这两个的名字。

结果当然是失败的，主要错误是：

cordova 不是内部或外部命令，也不是可运行的程序

看来还是要装cordova才行。于是先装nodejs，然后再用npm装cordova。安装好以后，再来，错误提示是找不到SDK，默认是去AppData\Roaming中找SDK的，好吧，找了下怎么设置SDK路径的，在系统变量中添加几个参数就行了：

在系统变量中添加ANDROID_HOME，路径为安卓SDK的安装路径。在系统变量的PATH中添加SDK中tools文件夹的路径在用户变量的PATH中添加路径：%ANDROID_HOME%\platform-tools

好了，继续打包，这次的错误提示如下：

You have not accepted the license agreements of the following SDK components

我顶，还有这样才错误，还好，在stackoverflow有标准答案，要在SDK的tools\bin下运行以下命令：

./sdkmanager --licenses

运行后出错，打开bat文件检查，发现需要在系统变量中定义JAVA_HOME来指定JAVA的文件夹。设置好以后，再运行注册完成注册。

继续打包，这次终于成功了。在应用程序的根目录下创建了一个名为cordova的文件夹。

接下来一步就是在app.json文件中添加生成对象了，代码如下：

"builds": {    "native": {        "packager": "cordova",        "cordova" : {            "config": {                "platforms": "android"                "id": "com.mycompany.MyApp"            }        }    }}

以上要修改的地方就是id值，需要与init中的名字相同。

做完以上工作后，就可以使用以下命令来创建apk包：

sencha app build native

要注意的是，参数navive的作用是指定使用app.json中builds下的native配置来打包。等待一会后，就可在cordova\platforms\android\build\outputs\apk文件夹下找到打包后的apk文件了。

在手机上安装并运行，发现提示访问路径错误，还好，由于采用了URI类来指定访问地址，因而只要修改index文件中的ROOTPATH就行了。修改要注意的是，打包用的是app.json中指定的那个index.html文件，因而要修改这个文件才起左右。修改首页文件后，再打包并安装到手机，运行一切如常，成功了，而且感觉挺流畅的。唯一的遗憾是使用导航列表，没有使用路由功能，使用手机的返回按钮导致直接退出应用程序了，不得不重新启动应用。

以下是打包后的应用界面：

总的来说，打包还是挺简单的，主要问题还是在开发上和用户体验上的，这个在开发的时候需要引起足够重视。