sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析

  通过上一章节的操作,我们的项目已经创建完成了,

   大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用,

   接下来,我们展开我们项目,如图所示:

   sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析 

  一、目录结构   

   1. .sencha目录

    .sencha 文件夹下主要是sencha cmd创建项目时生成的一些配置文件,对我们的开发并没有太大影响,我们可以暂时先不去管它  

   2. app 目录

    app文件夹是我们的项目主体文件夹,我们整个项目的功能代码基本都在这个目录中,

    整个目录体现了sencha touch的mvc结构,

    sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析

    我们展开app目录,可以看到六个子目录,

    我们看一下这些目录分别存放什么作用的文件

    --app
      ----controller

         通过监听view界面上的用户交互操作,

         例如滑动、点击等事件来执行相关的操作

      ----form

         这个是cmd生成的文件夹,从字面意思来看是表单的意思,但是官方文档中并未提及到该文件夹,

         我想可能是用于以后将form表单这类view放到其中进行控制的吧

      ----model

         用于定义一种类型的数据,如电子商务程序所需要对应用户,订单,产品型号等数据类型,用oop的说法应该就是实体类

      ----profile

         用来判断用户的设备类型,并且可以做相应的操作跳转为对应平台设计的view界面

      ----store

         在这里我们把它称之为数据仓库,可以帮助你载入数据到list,dataview这类的功能强大的视图组件上,

         store一般需要跟model做关联

      ----view

         用来展现我们的用户程序界面

      这里我们只对目录文件做个简单的介绍,在后面的教程中我们会详细讲解各个模块的详细用法

   

   3.build目录

    默认设置情况下,我们用sencha cmd指令打包压缩编译的项目会生成在该文件夹下

    等讲到如何打包的时候我们会详细讲解

   4.resources目录  

    项目的css文件,图片等资源都存放在这里,

    还有我们强大的scss文件,这是css框架sass的文件,sencha touch把它很好地结合到了项目中,

    通过对它的编写,我们可以很容易地实现对项目的主题修改,样式编辑等功能

    

   5.touch目录 

    这个文件夹将sdk包中的资源文件拷了过来,包含了css样式,启动图片,src项目源码等文件

   6.bootstrap.js和bootstrap.json

    这两个是cmd创建项目时生成的默认的引导文件,建议大家不要去修改,

    bootstrap.js里提供了全局的Ext文件的引用,

    bootstrap.json则是app.json跟packager.json的合并内容

   
   7.build.xml和packager.json

    build.xml是cmd的配置文件,

    packager.json是用cmd打包移动设备安装程序的配置文件

   
   8.app.js和app.json

    app.js是我们整个程序的入口js文件

    app.json是用来配置应用程序的访问资源的,如css,js以及离线缓存文件的配置

  
   9.index.html

    index.html是我们整个程序的访问入口

  这就是我们整个项目的结构了,这里只做了简单介绍,

  下一章,我们会完整地讲解整个项目是如何运行的,并对项目的代码进行讲解

  

    

    

      

上一篇:一篇文章一张思维导图看懂Android学习最佳路线


下一篇:UTI 唯一类型标识