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     安装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 - intended for QA prior to production. All JavaScript and CSS source files are bundled, but not minified, which makes it easier to debug.

包：package - creates a self-contained, redistributable production build that normally runs from the local file system without a web server.

产品：production - creates a production build that is normally hosted on a web server and serves multiple clients (devices). The build is offline-capable using HTML 5 application cache, and is enabled to perform over-the-air updates.

本地：native - first generates a package build, then packages it as a native application, ready to be deployed to native platforms.

 

例如：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

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

         这时在你的应用程序的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-》下一步-》如果有可以使用原来的，没有可以创建一个，以及密码

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

                   下一步签名文件存放位置

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