使用Sencha Architect开发Sencha Touch应用的整理

官网：http://www.sencha.com/

其实官网上的文档都很清楚了，不过整理一下总比较好





第一步，软件准备

---

注： 以下软件的安装本着这样两条原则

一是不要安装在中文目录下

二是不要安装在带空格的目录下，例如program files目录



1、Sencha Touch 2.2.1 

   解压缩出来即可

   例如，我解压缩以后改了一下目录名E:\project\sencha\sencha-touch-2.2.1



2、Sencha Architect 2.2.2

   安装完成之后，第一次运行需要连接到官网，并且需要登录，所以要注册一个帐号

   软件可以无限期试用，参看另一个文章http://blog.chinaunix.net/uid-20078486-id-3866938.html

   例如，我安装的目录是D:\Dev\Sencha\SenchaArchitect



3、Sencha Cmd http://www.sencha.com/products/sencha-cmd/download
3.1.2

   例如，我安装的目录是D:\Dev\Sencha\bin



4、Ruby 1.9.3.n http://rubyinstaller.org/downloads/ Ruby
1.9.3-p448

   官网明确说了，只能安装1.9.3版本，所以新的2.0版还不能装，安装的时候把3个选项都选上

   例如，我安装的目录是D:\Dev\Ruby193





5、Android SDK Tools https://developer.android.com/sdk/index.html

   把sencha touch的项目打包成android的apk需要用到该开发包，如果只是浏览器里测试一下，则不需要

   页面的“DOWNLOAD FOR OTHER PLATFORMS”，下载安装后，在联网状态下运行，需要下载各个版本的开发包，当然，只要下载几个主要版本的即可

   

6、httpd

   偶使用apache的http服务器，官网http://httpd.apache.org/，但我貌似没看到最新版的windows发布包

   于是到这里http://www.apachelounge.com/download/ 下载最新版的windows包

   不过要仔细阅读，选择适合自己系统的，并注意下载对应的vc运行库

   偶下载的是VC11版x64位，并下载了对应的vc11运行库，解压缩到D:\Dev\Apache24

   然后修改conf\httpd.conf文件，把4个地方的c:/Apache24修改成D:/Dev/Apache24，当然如果你刚好解压在C:\Apache24，那就可以省略这一步

   打开cmd命令行窗口，切换目录到D:\Dev\Apache24\bin，运行httpd -k install 安装服务，以后就可以用ApacheMonitor管理服务了

   把服务启动起来，浏览器里面输入http://localhost，页面显示"It Works!"，那就成了





   当然http服务器用微软的iis也是可以的，不过需要增加一个MIME TYPE：application/x-json

   控制面板-管理工具-Internet 信息服务-网站-默认网站-右键属性-HTTP 头-MINE映射-文件类型-新类型（扩展名 .json 内容类型 application/x-json）





7、Chrome or Safari.

   浏览器测试就靠他们了，貌似据说firefox也是可以的，抽空看看





8、差点忘记官网第一个要装的软件，就是java，这个就不赘述了，官网说最好用1.7，当然用1.6也是可以的









第二步，开始简单开发

---

1、运行Sencha Architect



2、如果按照之前的教程获得了无限期试用，在第一个窗口中点击继续试用即可



3、接下来问要打开项目还是新建项目，果断选择新建project "Sencha Touch 2.2.x","GO"



4、保存项目，“Save”，选择一个路径，“project name"取名test，会在路径下新建一个test文件夹和一个项目文件



5、发布目录配置：点击“settings”-"Project"-"Publish path"，

  用之前apache服务器的根文档路径加上项目名称D:/Dev/Apache24/htdocs/test



6、点击Package，"install plug-ins"，之前的Sencha Cmd安装无误的话，这里会自动找到，右边出现一个绿色的对勾installed√



7、接上一步，"Setup project with Cmd"，

    Browse找到之前解压缩的"Sencha Touch 2.2.1"所在目录，E:/project/sencha/sencha-touch-2.2.1

    点击“Setup project with Cmd”按钮，自动把一些用到的文件复制到项目目录下



8、“Package setting”是打包的配置，先不管，close



9、点击工具栏“Publish”，把项目发布到apache服务器上



10、打开chrome浏览器,http://localhost/test



打完收工