【Sencha Touch 2】SenchaTouch程序编译和打包

前言

我试过大概三种方式打包，但是最后只有一种能够成功（也是最方便的方式，但不代表别的方式就不行）。总结一下，仅供大家参考。

ü 使用sdkTools打包

ü 使用手动建立Android项目使用PhoneGap打包

ü 使用Eclipse的PhoneGap插件直接建立PhoneGap程序打包

编译

ST的‘编译（build）’只是指将项目进行压缩，其中并没有其他语言中编译（Compiled）的概念。ST的编译还是挺简单的，这里要使用SdkTools。

NOTE：关于sdkTools（或者sencha Command）的使用，可以参考官方文档(文章最后资源链接)。

编译过程中需要一个配置文件，通常这个配置文件叫做app.json，每一个配置项都有注释。

NOTE:另外程序还提供一个配置文件叫packager.json，这个配置文件用来打包本地应用。

{
    /**
     * The application's namespace, used by Sencha Command to generate classes
 *	应用名称  
     */
    "name": "com.shs.MS",
    /**
     * The file path to this application's front HTML document, relative to this app.json file
 	 *	应用程序的首页
     */
    "indexHtmlPath": "index.html",
    /**
     * The absolute URL to this application in development environment, i.e: the URL to run this application
     * on your web browser during development, e.g: "http://localhost/myapp/index.html".
     *
     * This value is needed when build to resolve your application's dependencies if it requires server-side resources
     * that are not accessible via file system protocol.
*  访问应用程序的绝对路径，当依赖服务端资源的时候需要配置这个项
     */
    "url": null,
    /**
     * List of all JavaScript assets in the right execution order.
     * Each item is an object with the following format:
     *      {
     *          "path": "path/to/script.js" // Relative path to this app.json file
     *          "update": "delta"           // (Optional)
     *                                      //  - If not specified, this file will only be loaded once, and
     *                                      //    cached inside localStorage until this value is changed.
     *                                      //  - "delta" to enable over-the-air delta update for this file
     *                                      //  - "full" means full update will be made when this file changes
     *
     *      }
 * 	js文件列表 
     */
    "js": [
        {
            "path": "sdk/sencha-touch.js"
        },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build 
* 这个配置为true的话，你的app中所有的js代码都会压倒这个js文件中
*/
            "update": "delta"
        }
    ],
    /**
     * List of all CSS assets in the right inclusion order.
     * Each item is an object with the following format:
     *      {
     *          "path": "path/to/item.css" // Relative path to this app.json file
     *          "update": "delta"          // (Optional)
     *                                     //  - If not specified, this file will only be loaded once, and
     *                                     //    cached inside localStorage until this value is changed to either one below
     *                                     //  - "delta" to enable over-the-air delta update for this file
     *                                     //  - "full" means full update will be made when this file changes
     *
     *      }
 	 * 	css文件列表
     */
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],
    /**
     * Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
 *  应用缓存，用来编译时生成cahe.manifest配置文件（HTML5 的缓存配置文件）
     */
    "appCache": {
        /**
         * List of items in the CACHE MANIFEST section
         */
        "cache": [
            "index.html"
        ],
        /**
         * List of items in the NETWORK section
         */
        "network": [
            "*"
        ],
        /**
         * List of items in the FALLBACK section
         */
        "fallback": []
    },
    /**
     * Extra resources to be copied along when build
 * 资源目录
     */
    "resources": [
        "resources/images",
        "resources/icons",
        "resources/startup"
    ],
    /**
     * File / directory name matchers to ignore when copying to the builds, must be valid regular expressions
 *　编译时需要忽略的文件或者目录，内容要符合正则表达式规则
     */
    "ignore": [
        "\.svn$"
    ],
    /**
     * Directory path to store all previous production builds. Note that the content generated inside this directory
     * must be kept intact for proper generation of deltas between updates
* 存储以往版本的目录
     */
    "archivePath": "archive",
    /**
     * Default paths to build this application to for each environment
 *  编译之后的产品的保存路径，ST有4中编译目标（target），test,production,pakcage,native
     */
    "buildPaths": {
        "testing": "build/testing",
        "production": "build/production",
        "package": "build/package",
        "native": "build/native"
    },
    /**
     * Build options
* 编译选项
     */
    "buildOptions": {
        "product": "touch",
        "minVersion": 3,
        "debug": false,
        "logger": "no"
    },
    /**
     * Uniquely generated id for this application, used as prefix for localStorage keys.
     * Normally you should never change this value.
 * 应用的唯一id，存在localstorage中，不要修改，与程序的更新有关。
     */
    "id": "d2e2efe0-3777-11e2-89d7-89af0cfb7ac5"
}

生成这个配置文件之后，在命令行下到你的项目根目录，运行:

sencha app build package

你会在build/目录下找到你编译之后的项目，他们被压缩到了一个js文件中。

Note：关于编译SenchTouch项目，下方资源中第5个介绍的很清楚详细。

Note：将编译之后的项目部署到服务器，你可能会看到控制台报异常：找不到某些文件，这个问题笔者也没有搞清楚，只是简单的将找不到的文件复制复制到了项目中；之后便能够正常运行。

打包

试过3种方式：

第一种是按照SenchaTouch的官方文档上Sencha Touch 2 Native Packaging for Android这篇文章做的。使用这种方式曾经成功过一次，但是之后再打包就从来没能成功过。但这不意味着使用sdkTools不能实现打包，失败原因只是笔者能力有限。个人对SdkTools印象不好。感觉这个工具非常难用，并且有bug。

第二种是使用PoneGap打包。手动进行PhoneGap项目的搭建，要经历建立android项目->导入PhoneGap（2.0之后叫Cordova）jar包->修改Activity->添加xml目录->修改menifest.xml文件等一系列步骤。这个步骤当然可以使你从一定层次上理解PhoneGap的工作原理，但是只是为了打包的话，就必要做这些琐事了，有一个Eclipse插件实现了这些功能。这种方法你可以在PhoneGap的官方文档GetStartWithPhoneGap（下文资源第3个）中找到，过程很详细很简单。

第三种就是使用Eclipse的PhoneGap插件进行直接创建PhoneGap程序了。关于此插件的安装请参考资源中第6个。如果有需要详细解释的地方请与博主联系，非常愿意为你提供帮助。

资源

大多是ST的官方文档，您可以很容易地在网上搜索到一夕翻译的一系列文档。

1.http://docs.sencha.com/touch/2-0/#!/guide/native_android

2.http://docs.sencha.com/touch/2-0/#!/guide/command

3.http://docs.phonegap.com/en/2.2.0/guide_getting-started_index.md.html

4.http://open.zhui.cn/index.php?title=SenchaTouch#.E5.BC.80.E5.A7.8B.E7.AC.AC.E4.B8.80.E4.B8.AASencha_Touch.E7.A8.8B.E5.BA.8F

5.http://open.zhui.cn/index.php?title=%E5%BC%80%E5%A7%8B%E7%AC%AC%E4%B8%80%E4%B8%AASencha_Touch%E7%A8%8B%E5%BA%8F

6.http://blog.csdn.net/yanwushu/article/details/8233319