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应用程序,一直下一步就好
- 进入:E:\Work_Shine\WebFenZhenTai\phonegap-2.9.0\lib\android,也就是phonegap目录下
- 将“cordova-2.9.0.jar”拷贝至新建android项目的libs下。
- 在任何一个文件夹上右键单击选择“build Path”-》Configure build path-》libraries-》Add jars-》找到刚刚添加的jar文件。(注:也就是相当于添加引用)
- 在assets上添加文件夹,名称为:www,并且将“E:\Work_Shine\WebFenZhenTai\phonegap-2.9.0\lib\android”上的cordova.js拷贝过来
- 进入到src-》com.shine.phonegap 下,打开.java文件,将“Activity”写改成 DroidGap,并添加引用import org.apache.cordova.DroidGap;
- 注释掉:
/* @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-》下一步-》如果有可以使用原来的,没有可以创建一个,以及密码
下一步使用-别名,基本设置。
下一步签名文件存放位置
至此一个本地打包完成。。