zoukankan      html  css  js  c++  java
  • sencha touch 入门系列 (三)sencha touch 项目创建

      通过上一章节的学习,我们的开发环境已经配置好了,接下来我们开始创建第一个sencha touch的项目,网络上很多sencha touch的教程都是手动搭建项目的,

      不过手动搭建的项目缺少一些sencha cmd对项目代码打包压缩编译的关键文件,

      所以在这里我们从创建项目开始都是使用sencha cmd工具,请确保上一章节中所有的环境配置都已经成功,

      那么接下来我们开始我们的项目创建:

      1.项目创建

        在项目创建前,我们先确认下我们的sencha cmd的版本,

        点击开始==》运行==》cmd,

        键入sencha,会显示cmd的版本,

        现在最新的是4.0,如果不是最新的版本,可以键入指令    

       sencha upgrade

        该指令会自动从远程服务器上更新sencha cmd的版本,

        确认版本更新完毕后,我们来创建一个新的项目,

        用cmd创建sencha touch的项目需要在sencha touch的sdk包的环境下进行,我们有两种方式:

        1.1 在sencha sdk包目录下进行创建

        点击开始==》运行==》键入cmd,

        一般默认显示是系统用户文件夹路径下,

        我的sdk包被我拷到了iis的站点文件夹下D:webtest ouch-2.3.1,

        所以这里我输入d:,然后回车,

        cd D:webtest ouch-2.3.1,

        进入到sdk包目录下,如图:

        

        这个时候,我们运行sencha cmd创建项目的指令

      

        sencha generate app MyFirst ../MyFirst

        generate app是创建一个新的项目,

        第一个参数MyFirst对应的是项目的名称,

        第二个参数../MyFirst对应是项目的输出地址,是相对路径,指向是cmd当前指定路径的上级目录,

        有web开发经验的同学应该一眼就能看懂,

        指令执行后,如图所示:

         

        在不报错的情况下项目就创建成功了,

        此时在我的D:/webtest目录下就会生成一个MyFirst项目文件,这就是我们新创建的sencha touch项目,

        因为已经在服务站点路径下,如果生成的项目路径不在web服务站点路径下,可以把项目拷过去,

        接着我们可以打开浏览器通过http://127.0.0.1/MyFirst/进行访问,

        在等在文件载入完成后,我们便能看到我们第一个项目了,如图:

        

         是不是很兴奋,你可以试着调整下浏览器的窗口大小,整个项目完全是响应式的,会根据你的窗口大小调整布局

         有些人可能想直接点击新建项目下的index.html文件运行项目,此时页面会卡在载入界面并报如下错误:

        这是因为cmd创建项目的时候,会生成一个bootstrap.json文件,这个文件的访问是在development.js中通过xhr的方式实现的

        var xhr = new XMLHttpRequest();
         xhr.open('GET', 'bootstrap.json', false);
         xhr.send(null);

        需要http请求,所以会报错,

        不过整个项目完成后用cmd指令打包后,json文件都会被去掉,这个时候就不会出现该问题了,

        接下来我们讲一下另一种创建方式

        1.2 通过cmd指令直接指定sdk路径创建

        该创建方式跟上一种大同小异,唯一的区别在于,不用先将指令指定到sdk包路径下了,我们可以直接用

      

       sencha -sdk D:webtest	ouch-2.3.1 generate app MyFirst D:webtestMyFirst

         我们在generate app 前面加上了

        -sdk D:webtest	ouch-2.3.1,

        -sdk后面跟的就是我们的sencha touch的sdk包的路径,这样执行上面的指令,跟我们方法一里的效果是一样的,

        指令执行后,我们的MyFirst项目就被创建完成了

      

         下一章我们将对生成的项目结构做系统的分析

     

        

        

  • 相关阅读:
    iOS
    iOS
    iOS
    iOS
    iOS(WKWebView)OC与JS交互 之三
    iOS(UIWebView 和WKWebView)OC与JS交互 之二
    CentOS VMware 下SSH配置方法详解
    15个nosql数据库
    MySql 优化
    Elasticsearch 相关名词理解
  • 原文地址:https://www.cnblogs.com/cjpx00008/p/3478869.html
Copyright © 2011-2022 走看看