如何将Sencha CMD与Cordova结合使用以生成WP8和Android应用（几乎存在）

Question

更新3：

这是我运行以生成应用程序并将其部署在设备上的命令：

1. sencha -sdk / path / to / touch-sdk生成应用程序TestSenchaApp TestSenchaApp
2. cd TestSenchaApp
3. sencha cordova init com.test.myApp
4. 编辑“ cordova.local.properties” 4a。 将行cordova.platforms = ios更改为cordova.platforms = wp8 4b。 保存文件并退出编辑器
5. Sencha ant cordova-sencha-prepare
6. 科尔多瓦
7. cordova s​​erve wp8->我在IE，Chrome和Firefox上进行了测试，它可以在所有程序上正常运行。
8. 科尔多瓦运行--device

跑到第8步，仍然遇到相同的问题……

更新2：

这是运行日志：cordova run --device。

    F:\Workplace\TestSenchaApp\cordova>cordova run --device
Preparing wp8 project
[TypeError: undefined is not a function]
Running command: cmd args=["/c","F:\\Workplace\\TestSenchaApp\\cordova\\platforms\\wp8\\cordova\\run","--device"]
WARNING: [ --debug | --release | --nobuild ] not specified, defaulting to --debug.

Cleaning cordova project...
Building Cordova-WP8 Project:
        Configuration : Debug
        Directory : F:\Workplace\TestSenchaApp\cordova\platforms\wp8
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
  TestSenchaApp -> F:\Workplace\TestSenchaApp\cordova\platforms\wp8\Bin\Debug\com.test.myApp.dll
  Begin application manifest generation
  Application manifest generation completed successfully
  Begin Xap packaging
BUILD SUCCESS.

Deploying to device ...
Connecting to device :: 30F105C9-681E-420b-A277-7C086EAD8A4E : Device
Installing app on Device
Launching app on Device
EXIT


F:\Workplace\TestSenchaApp\cordova>

---

更新1：

文件：MySenCha / app.js

Ext.application({
    name: 'MySenCha',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
        'Main'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function () {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: "bottom",

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',

                    html: [
                         '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists, and forms to create a simple app.</p>",
                        '<h2>Sencha Touch</h2>'
                    ].join("")

                },
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',
                    store: {
                        type: 'tree',
                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content', { name: 'leaf', defaultValue: true }
                        ],

                        root: { leaf: false },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function (nestedList, list, inde, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            height: 285,
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: "button",
                            text: 'Send',
                            ui: 'confirm',
                            handler: function () {
                                this.up('formpanel').submit();
                            }
                        }
                    ]

                }
            ]
        });

        //// Initialize the main view
        //Ext.Viewport.add(Ext.create('MySenCha.view.Main'));
    },

    onUpdated: function () {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function (buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

文件：app.json

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

    /**
     * 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": "http://localhost:1841/index.html",

    /**
     * List of all JavaScript assets in the right execution order.
     * Each item is an object with the following format:
     *      {
     *          "path": "path/to/script.js" // Path to file, if local file it must be relative to this app.json file
     *          "remote": true              // (Optional)
     *                                      // - Defaults to undefined (falsey) to signal a local file which will be copied
     *                                      // - Specify true if this file is a remote file which will not to be copied
     *          "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
     *          "x-bootstrap": true         // (Optional)
     *                                      // Indicates a development mode only dependency.  
     *                                      // These files will not be copied into the build directory or referenced
     *                                      // in the generate app.json manifest for the micro loader.
     *
     *      }
     */
    "js": [
        {
            "path": "cordova.js",
            "remote": true
        },
        {
            "path": "touch/sencha-touch.js",
            "x-bootstrap": true
        },
        {
            "path": "bootstrap.js",
            "x-bootstrap": true
        },
        {
            "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" // Path to file, if local file it must be relative to this app.json file
     *          "remote": true             // (Optional)
     *                                     // - Defaults to undefined (falsey) to signal a local file which will be copied
     *                                     // - Specify true if this file is a remote file which will not to be copied
     *          "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": [
        "config.xml",
        "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",

    /**
     * List of package names to require for the cmd build process
     */
    "requires": [
    ],

    /**
     * Uniquely generated id for this application, used as prefix for localStorage keys.
     * Normally you should never change this value.
     */
    "id": "19f378b6-7681-4874-9579-87ab900c2cde"
}

---

我将SenCha Touch 2.3.1与SenCha CMD 4.0.2.67结合使用，并与Cordova 3.4一起使用。

我这样做的目的是要知道如何使用SenCha工具创建移动应用，然后使用SenCha CMD + Cordova在Android和Windows Phone 8平台上构建和运行。（我已经在PC上设置了这两种环境，并设法仅使用适用于Android和WP8的Cordova来构建和运行我的移动应用）。

现在，我按照SenCha上的教程创建了第一个应用程序（ http://docs.sencha.com/touch/2.3.0/#!/guide/first_app ），遇到了很多奇怪的崩溃，但是幸运的是，我以某种方式修复了所有问题到目前为止，学习过程对我来说非常令人兴奋，我发现SenCha CMD甚至可以启动WP和Android模拟器！

现在的问题是：当我执行命令时：-> sencha app build -run native这两个平台都生成并运行了我的应用程序，但是我在SenCha下创建的面板没有显示。 我得到的是带有4个闪烁点的启动屏幕。 它假定显示一个具有3个tabPanels的UI。

这是我的app.js：

launch: function () {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: "bottom",

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',

                    html: [
                         '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists, and forms to create a simple app.</p>",
                        '<h2>Sencha Touch</h2>'
                    ].join("")

                },
                { // the 2nd item}, {// the 3rd one}

这是index.html中MyApp / cordova / platforms / wp8下生成的SenCha。

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MySenCha</title>
    <style type="text/css">
        /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #1985D0;
        }

        #appLoadingIndicator {
            position: absolute;

              // many lines of generated css
            }
        }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script type="text/javascript">(function(e){var c=e.document.head||e.document.getElementsByTagName("head")[0],b=e.Ext;if(typeof b=="undefined"){e.Ext=b={}}function d(f){document.write(f)}function a(f,g){var h=document.createElement("meta");h.setAttribute("name",f);h.setAttribute("content",g);c.appendChild(h)}b.blink=function(q){var k=q.js||[],o=q.css||[],m,n,p,h,l,g;if(navigator.userAgent.match(/IEMobile\/10\.0/)){var j=document.createElement("style");j.appendChild(document.createTextNode("@media screen and (orientation: portrait) {@-ms-viewport {width: 320px !important;}}@media screen and (orientation: landscape) {@-ms-viewport {width: 560px !important;}}"));document.getElementsByTagName("head")[0].appendChild(j)}a("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");a("apple-mobile-web-app-capable","yes");a("apple-touch-fullscreen","yes");b.microloaded=true;var f=window.Ext.filterPlatform=function(u){var D=false,s=navigator.userAgent,w,A;u=[].concat(u);function z(E){var i=/Mobile(\/|\s)/.test(E);return/(iPhone|iPod)/.test(E)||(!/(Silk)/.test(E)&&(/(Android)/.test(E)&&(/(Android 2)/.test(E)||i)))||(/(BlackBerry|BB)/.test(E)&&i)||/(Windows Phone)/.test(E)}function y(i){return !z(i)&&(/iPad/.test(i)||/Android|Silk/.test(i)||/(RIM Tablet OS)/.test(i)||(/MSIE 10/.test(i)&&/; Touch/.test(i)))}var r=window.location.search.substr(1),t=r.split("&"),v={},B,x;for(x=0;x<t.length;x++){var C=t[x].split("=");v[C[0]]=C[1]}B=v.platform;if(B){return u.indexOf(B)!=-1}for(w=0,A=u.length;w<A;w++){switch(u[w]){case"phone":D=z(s);break;case"tablet":D=y(s);break;case"desktop":D=!z(s)&&!y(s);break;case"ios":D=/(iPad|iPhone|iPod)/.test(s);break;case"android":D=/(Android|Silk)/.test(s);break;case"blackberry":D=/(BlackBerry|BB)/.test(s);break;case"safari":D=/Safari/.test(s)&&!(/(BlackBerry|BB)/.test(s));break;case"chrome":D=/Chrome/.test(s);break;case"ie10":D=/MSIE 10/.test(s);break;case"windows":D=/MSIE 10/.test(s)||/Trident/.test(s);break;case"tizen":D=/Tizen/.test(s);break;case"firefox":D=/Firefox/.test(s)}if(D){return true}}return false};for(m=0,n=o.length;m<n;m++){p=o[m];if(typeof p!="string"){h=p.platform;g=p.exclude;l=p.theme;p=p.path}if(h){if(!f(h)||f(g)){continue}if(!b.theme){b.theme={}}if(!b.theme.name){b.theme.name=l||"Default"}}d('<link rel="stylesheet" href="'+p+'">')}for(m=0,n=k.length;m<n;m++){p=k[m];if(typeof p!="string"){h=p.platform;g=p.exclude;p=p.path}if(h){if(!f(h)||f(g)){continue}}d('<script src="'+p+'"><\/script>')}}})(this);Ext.blink({id:"19f378b6-7681-4874-9579-87ab900c2cde",js:[{path:"cordova.js",remote:true},{path:"app.js",update:"delta"}],css:[{path:"resources/css/app.css",update:"delta"}]});</script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

如您在这里看到的“ Ext.Blink（id .......，....，....，js：[xxxx，'app.js']））”。

这是wp8 / www文件夹下的app.js

(function(){var global=this,...many code more than 570000 letters, so I have to cut the m down..................if(window.scrollY!==0){window.scrollTo(0,0)}}})}}});Ext.define("Ext.viewport.WindowsPhone",{requires:[],alternateClassName:"Ext.viewport.WP",extend:Ext.viewport.Default,config:{translatable:{translationMethod:"csstransform"}},initialize:function(){var a=function(d){var c=d.srcElement.nodeName.toUpperCase(),b=["INPUT","TEXTAREA"];if(b.indexOf(c)==-1){return false}};document.body.addEventListener("onselectstart",a);this.callParent(arguments)},supportsOrientation:function(){return false},onResize:function(){this.waitUntil(function(){var c=this.windowWidth,f=this.windowHeight,e=this.getWindowWidth(),a=this.getWindowHeight(),d=this.getOrientation(),b=this.determineOrientation();return((c!==e&&f!==a)&&d!==b)},function(){var b=this.getOrientation(),a=this.determineOrientation();this.fireOrientationChangeEvent(a,b)},Ext.emptyFn,250)}});Ext.define("Ext.viewport.Viewport",{constructor:function(b){var c=Ext.os.name,d,a;switch(c){case"Android":d=(Ext.browser.name=="ChromeMobile")?"Default":"Android";break;case"iOS":d="Ios";break;case"Windows":d=(Ext.browser.name=="IE")?"WindowsPhone":"Default";break;case"WindowsPhone":d="WindowsPhone";break;default:d="Default";break}a=Ext.create("Ext.viewport."+d,b);return a}});Ext.define("MySenCha.view.Main",{extend:Ext.tab.Panel,xtype:"main",config:{tabBarPosition:"bottom",items:[{title:"My Home",iconCls:"home",styleHtmlContent:true,scrollable:true,items:{docked:"top",xtype:"titlebar",title:"Welcome to Sencha Touch 2"},html:["You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ","contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ","and refresh to change what's rendered here."].join("")},{title:"Get Started",iconCls:"action",items:[{docked:"top",xtype:"titlebar",title:"Getting Started"},{xtype:"video",url:"http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c",posterUrl:"http://b.vimeocdn.com/ts/261/062/261062119_640.jpg"}]}]}});Ext.application({name:"MySenCha",views:["Main"],icon:{"57":"resources/icons/Icon.png","72":"resources/icons/Icon~ipad.png","114":"resources/icons/Icon@2x.png","144":"resources/icons/Icon~ipad@2x.png"},isIconPrecomposed:true,startupImage:{"320x460":"resources/startup/320x460.jpg","640x920":"resources/startup/640x920.png","768x1004":"resources/startup/768x1004.png","748x1024":"resources/startup/748x1024.png","1536x2008":"resources/startup/1536x2008.png","1496x2048":"resources/startup/1496x2048.png"},launch:function(){Ext.fly("appLoadingIndicator").destroy();Ext.create("Ext.tab.Panel",{fullscreen:true,tabBarPosition:"bottom",items:[{title:"Home",iconCls:"home",cls:"home",html:['<img src="http://staging.sencha.com/img/sencha.png" />',"<h1>Welcome to Sencha Touch</h1>","<p>You're creating the Getting Started app. This demonstrates how ","to use tabs, lists, and forms to create a simple app.</p>","<h2>Sencha Touch</h2>"].join("")},{xtype:"nestedlist",title:"Blog",iconCls:"star",displayField:"title",store:{type:"tree",fields:["title","link","author","contentSnippet","content",{name:"leaf",defaultValue:true}],root:{leaf:false},proxy:{type:"jsonp",url:"https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog",reader:{type:"json",rootProperty:"responseData.feed.entries"}}},detailCard:{xtype:"panel",scrollable:true,styleHtmlContent:true},listeners:{itemtap:function(e,d,a,c,b){this.getDetailCard().setHtml(b.get("content"))}}},{title:"Contact",iconCls:"user",xtype:"formpanel",url:"contact.php",layout:"vbox",items:[{xtype:"fieldset",title:"Contact Us",instructions:"(email address is optional)",height:285,items:[{xtype:"textfield",label:"Name"},{xtype:"emailfield",label:"Email"},{xtype:"textareafield",label:"Message"}]},{xtype:"button",text:"Send",ui:"confirm",handler:function(){this.up("formpanel").submit()}}]}]})},onUpdated:function(){Ext.Msg.confirm("Application Update","This application has just successfully been updated to the latest version. Reload now?",function(a){if(a==="yes"){window.location.reload()}})}});

如果您能读到这里，谢谢。 我终于找到了我的代码，正如您可能看到的那样，我的代码已包含在app.js的wp8 / www文件夹下。

但是，当我尝试从index.html运行或将应用程序部署到设备上时，只得到了Cordova启动画面和蓝屏，根本没有选项卡面板。

我还检查了在构建和运行我的应用程序期间生成的日志，发现在运行WP8应用程序时，它说：[TypeError：undefined不是一个函数]然后，当我生成生成的index.html时，确实找到了很多。

顺便说一句，我在3种浏览器上运行了我的应用程序：IE10，Chrome（最新），Firfox（刚刚下载）。 只有Firefox才能成功运行SenCha Touch应用程序。 其他人只能在演示中显示蓝屏，没有字符和图片，也没有选项卡面板停靠在底部。

我觉得我非常接近学习的最终成功。

有人可以帮我吗。 我非常感谢你！

Answer 1

@Franva，现在我可以看到问题了。 确实是“需要”。 我会解释：

Sencha Touch是一个包含许多组件的框架。 当您使用“ x-type”时，您使用的是特定组件的继承。

例：

“ Ext.create（” Ext.tab.Panel“”：您正在使用Panel ，并且组件在sencha中是模块化的，您可以在此处查看源代码

当您进行开发时，sencha touch的微型加载器将为您“动态”加载该文件。 但是，当您使用cmd时，生成的软件包将仅包含您定义的sencha touch部分。 那就是不要用您不使用的组件制作一个大尺寸的包装。

因此，对于您的软件包，您必须在组件/应用程序中定义需求。 如果要使用MVC（模型视图控制器）或其他多个文件系统来创建您的应用，以便可以为每个文件添加需求详细信息，则cmd将添加一次组件。

您正在使用的组件列表：

• Ext.tab.Panel
• Ext.dataview.NestedList
• 外部面板
• 扩展表单面板
• 扩展字段文本
• Ext.field.TextArea
• 扩展域电子邮件
• 分机按钮

如果您在开发（ff或chrome）上打开控制台，则sencha touch将向您显示有关缺少此要求的警告。

我没有搜索其他错误，但是有了这一更改，所有内容可能都会显示：

requires: [
    'Ext.MessageBox',
    'Ext.tab.Panel',
    'Ext.Panel',
    'Ext.dataview.NestedList',
    'Ext.form.Panel',
    'Ext.field.Text',
    'Ext.field.TextArea',
    'Ext.field.Email',
    'Ext.Button',
],

您应该阅读有关成分的文档，对您有帮助。

Answer 2

最后，我发现了这个问题的根源。

这是因为我在.cordova / lib上有一个凌乱的cordova。 因此，我所做的是在C：\\ Users \\\\下删除了整个.cordova。

并重新安装科尔多瓦。

然后问题解决了:)

有关更多详细信息，请参见此处： http : //www.sencha.com/forum/showthread.php?282942- App-runs-but-stuck-at-the-loading-screen（3点屏）

在＃15

希望能有所帮助，欢呼