Sencha Toucha 2 —1.环境安装配置、在线打包、离线打包

环境安装配置       

1. 下载       

1.1     Sencha Touch 下载

http://cdn.sencha.com/touch/sencha-touch-2.2.1-gpl.zip

1.2     Sencha Touch Docs下载

http://cdn.sencha.com/downloads/docs/touch-docs-2.2.1.zip

1.3     Sencha Touch CMD下载

http://www.sencha.com/products/sencha-cmd/download  

1.4     JRE下载

http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html  

1.5     Ruby 下载

http://rubyinstaller.org/downloads/  

2. 安装       

2.1     将Sencha Touch 以及Sencha Touch CMD部署到IIS上

注意需要添加MIME类型扩展名为“.json”,MIME类型为” application/x-json”或“application/x-javascript”；测试网站即可使用

2.2 sencha sdk tool2.0无法创建api为sencha-touch-2.2.1的项目，需要使用SenchaCmd代替sencha sdk tool,其步骤如下：

2.2.1 安装senchaCmd

2.2.2 一路next,安装完之后，进入cmd,敲入：sencha，展示一些关于sencha的信息，表示senchaCmd安装成功

2.2.3，使用senchaCmd生成项目

2.2.4 下载sencha-touch-2.2.1,去官网填写email,邮箱里会收到下载地址

2.2.5下载完成后，在dos下进入sencha-touch-2.2.1的解压缩目录，例如：我的目录如下：

d:\sencha\IUCD\WebRoot\TOUCH-2.2.1\

备注：sencha cmd 必须运行在SDK目录或app目录

2.2.6使用SenchaCmd的命令生成项目，具体如下：

sencha generate app MyApp /path/to/MyApp

运行完之后会在D：/path/to/MyApp

2.2     安装JRE

2.3     安装Sencha Touch CMD

2.4     安装Ruby：

Ruby 安装之后 ，打开Start Command Prompt with Ruby，命令控制器：输入sass –v 提示不是内部命名，这时需要安装：gem install sass 安装即可，安装之后继续安装compass：gem install compass。

3. 创建第一个App       

从CMD进入SDK（sencha touch）所在的根目录，使用以下命令创建app

Sencha generate app App名称 App路径

例如：sencha generate app MyApp ../MyApp

至此，一个app创建完成

4. App文件简要描述       

app：主要就是模型，视图，控制器，和商店。（sencha Touch 2主要使用的是MVC模式思想）

app.js:主要的js代码，以及应用的入口application

app.json:配置文件

index.html：应用的html代码

packager.json:应用中所用的包

resources：主要是资源文件，CSS、images等

基本介绍：application为应用程序的首要执行方法，launch方法是程序的入口，类似main方法，但是这里的launch可不是唯一进入程序的入口。默认视图窗口使用卡片布局，默认的应用程序添加到主视图窗口，使其可以使用

         打开文件app/view/Main.js

5. 发布应用       

Sencha app build CMD：具体命令有一下几种

 testing:构建一个处于测试阶段的应用程序，所有javascript脚本文件都被原样复制到应用程序中，不对这些脚本文件进行压缩，便于开发者对其进行调试。

 package:构建一个本地可运行的应用程序，开发者可以不使用web服务器，而是从文件系统中直接打开该应用程序

 production:构建一个需要使用Web服务器来运行的应用程序，支持使用各种设备来访问该应用程序，同时该应用程序也是一个可离线使用的应用程序

 native: 首先构建一个可以在文件系统中直接打开的应用程序，然后将其打包成一个可以在本机的Web服务器中运行的应用程序。

>sencha app build production //打包手机端，电脑端都能用的形式

>sencha app build testing  //打包测试版

>sencha app build package  //打包到手机端

sencha package run package.json //主要是生成Android或iphone的APK

sencha app build -e native

例如：cmd》sencha app build production

第一次运行：可能会出现error

Please ensure this command was executed from a valid application directory

Unable to locate 'app.dir' config property from sencha.cfg

第一次运行：可能会出现误差

请确保此命令是从一个有效的应用程序目录执行

无法找到“应用程序目录的配置属性从sencha.cfg。

这可能是你没有进入你的应用程序的根目录

         这时在你的应用程序的Build下即可找到你打包的应用

在线打包       

6. 使用在线打包发布各种版本       

前提：将刚刚build之后的文件打包成zip格式，即名称为production.zip

    6.1   PhoneGap：打开网址：     https://build.phonegap.com/     （提前需要注册一个账户）  

6.2   点击右上角sign in

6.3   在进入之后使用sign in with Github一起登陆，输入用户名密码，登陆就可以了。

6.4   登陆之后右上角会有一个“+new app”，选择private，选择upload a.zip file

6.5   上传production.zip此文件即可

离线打包       

7. phonegap离线打包       

7.1   下载地址：     http://phonegap.com/install/  

将docs文档部署成网站：查看菜单为: Platform Guides

这里你会找到各种平台的部署生成

7.2   安装 android 开发环境：eclipse、android sdk，adt

7.3   创建一个android应用程序，一直下一步就好

1. 进入：E:\Work_Shine\WebFenZhenTai\phonegap-2.9.0\lib\android，也就是phonegap目录下
2. 将“cordova-2.9.0.jar”拷贝至新建android项目的libs下。
3. 在任何一个文件夹上右键单击选择“build Path”-》Configure build path-》libraries-》Add jars-》找到刚刚添加的jar文件。（注：也就是相当于添加引用）
4. 在assets上添加文件夹,名称为：www，并且将“E:\Work_Shine\WebFenZhenTai\phonegap-2.9.0\lib\android”上的cordova.js拷贝过来
5. 进入到src-》com.shine.phonegap 下，打开.java文件，将“Activity”写改成 DroidGap，并添加引用import org.apache.cordova.DroidGap;
6. 注释掉：
   

   /*
   
            @Override
   
            public boolean onCreateOptionsMenu(Menu menu) {
   
                      // Inflate the menu; this adds items to the action bar if it is present.
   
                      getMenuInflater().inflate(R.menu.main, menu);
   
                      return true;
   
            }
   
   */
   
   //setContentView(R.layout.activity_main);

   

   以及将“protected void onCreate(Bundle savedInstanceState) {”

   修改成public void onCreate(Bundle savedInstanceState) {

   添加这句：super.setIntegerProperty("loadUrlTimeoutValue", 60000);//加载url超时时间

   继续添加：super.loadUrl("file:///android_assets/www/index.html");

   将生成好的production拷贝至www文件夹即可

   附注：android打包       

      打包，一般时候有些人使用这个保存放位置的bin下的文件下的apk，这是多数没有签名，故一般时候使用

                      项目上—》右键单价-》Android Tools-》Export signed Application Package-》下一步-》如果有可以使用原来的，没有可以创建一个，以及密码

                      下一步使用-别名，基本设置。

                      下一步签名文件存放位置

            至此一个本地打包完成。。