extjs - 如何使用 Cordova/PhoneGap 构建 Sencha 应用

Question

对于客户端，我需要使用 Sencha Touch 和 Cordova 构建 native 应用程序。

为了提高性能，我使用 SDK 工具中的命令“sencha app build package”来缩小 javascript 源。

开发用Sencha，webview用Corova没问题。但我需要使用 Sencha 无法实现的 Cordova 函数(如 FileSystem 等)。

问题是，当我使用“sencha app build package”时，出现类似[ERROR] ReferenceError: Can't find variable: fileSystem 的错误。

我读了很多讨论 Sencha + Cordova 的帖子，但没有一篇讨论使用 Cordova + Sencha 构建/缩小源代码。

有没有人遇到过这个问题，你是怎么解决的？

最好的问候

2012 年 5 月 31 日更新

我为每个需要访问 cordova 变量的方法使用一个名为 CordovaFunctions.js 的文件，我的 app.js 和其他 View / Controller 调用 CordovaFunctions.js 中的方法 ...

这是我的 app.json :

{
/**
 * The application's namespace, used by Sencha Command to generate classes
 */
"name": "ImageDownloader",

/**
 * 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": [

    {
       "path": "cordova-1.7.0.js"
    },/*
    {
       "path": "CordovaFunctions.js"
    },*/
    {
        "path": "sdk/sencha-touch.js"
    }
    ,
    {
        "path": "app.js",
        "bundle": true,  // Indicates that all class dependencies are concatenated into this file when build 
        "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": [
    {
        "path": "resources/css/app.css",
        "update": "delta"
    }
],

/**
 * Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
 */
"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
 */
"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": "dfbad430-a63b-11e1-a218-a1757e9a8324"
}

Answer 1

在您的 app.json 配置文件中，您需要告诉 Sencha 构建命令您的应用程序需要 phoneGap 库。将其添加到js节点:

/**
 * 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": [
    {
        "path": "sdk/sencha-touch.js"
    },
    {
        "path": "cordova-1.5.0.js"
    },
    {
        "path": "app.js",
        "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
        "update": "delta"
    }
],