如何將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

希望能有所幫助，歡呼