jQuery MiniUI,Ajax Web开发

使用Cordova将ExtJS 6.2的Modern应用程序打包为安卓APP

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

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

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

不过,在刚开始的时候就犯二了。首先是想着,反正Visual Studio 2017也能装Cordova和安装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文件,因而要修改这个文件才起左右。修改首页文件后,再打包并安装到手机,运行一切如常,成功了,而且感觉挺流畅的。唯一的遗憾是使用导航列表,没有使用路由功能,使用手机的返回按钮导致直接退出应用程序了,不得不重新启动应用。

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

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

作者:黄灯桥
原文:http://blog.csdn.net/tianxiaode/article/details/78655385