Sencha Toucha环境安装

1. 下载

1.1     Sencha Touch 下载

http://www.sencha.com/products/touch/download/

1.2     Sencha Touch Docs下载(参考学习用)

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

http://docs.sencha.com/touch/2.3.2/

1.3     Sencha Touch CMD下载(用来支持用CMD命令来创建、打包发布app项目...还有更多...)

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

1.4     JRE下载(因为Sencha Touch CMD用Java开发的,所以需要Java runtime jre

http://www.veryhuo.com/down/html/36178.html

1.5     ruby下载( 打包APP时必需环境,SASS开发工具(预编译sass文件)

http://www.veryhuo.com/down/html/36178.html

2. 安装

2.1     安装JRE

2.2     安装Sencha Touch CMD

2.3     安装rubyInstaller

2.4     将Sencha Touch 解压到指定目录下。例如我解压至Sencha Touch CMD的安装目录同目录下:C:\Users\Administrator\

注意jdk,ruby,sencha cmd是否已自动添加到环境变量Path,如果没有需添加(一般ruby不会自动添加)。

3. 创建第一个App

从系统自带CMD或“Start Command Prompt with Ruby”命令行工具进入之前解压好的Sencha Touch目录,使用以下命令创建app项目:

Sencha generate app App名称 App路径

例如:

至此,一个app创建完成

Sencha Toucha环境安装_第1张图片

框架文件简介

.sencha:cmd命令运行的一些配置参数

app:整个项目

resources:项目的资源文件,包括css,images,icons[app图标],startup[启动闪屏图片]

touch:touch的核心包,源文件,资源文件等

app.js: 整个项目的入口,配置了需要加载那些js文件等等。

      从st2.x开始,项目启动时候加载的js,css等并不像以前一样全都写在index.html,而是通过app.json配置的形式来动态加载

st2.x的启动加载方式有多种,你可以参考http://www.cnblogs.com/dowinning/archive/2012/03/23/2413071.html

之所以保持官方这种方式,是因为后期我们可以直接通过cmd命令对项目压缩发布,或者打包等,如果破坏了目录结构,cmd将无法执行。

index.html:app启动页面

packager.json:该文件是为了app打包用的:

{
    "applicationName":"HzyApp",
    "applicationId":"com.hwayifashiongroup.HzyApp",/*必须是包括两个点*/
    "bundleSeedId":"KPXFEPZ6EF",
    "versionString":"1.0",
    "versionCode":"1",
    "icon": {
        "36":"resources/icons/Icon_Android36.png",
        "48":"resources/icons/Icon_Android48.png",
        "57":"resources/icons/Icon.png",
        "72":"resources/icons/Icon~ipad.png",
        "114":"resources/icons/[email protected]",
        "144":"resources/icons/[email protected]"
    },
    "inputPath":"./",
    "outputPath":"../build/",
    "configuration":"Debug",
    "platform":"Android",/*平台,还有IOS等类型*/
    "certificatePath":"X:/hzyapp.keystore",/*证书*/
    "certificateAlias":"hzyapp",/*证书别名*/
    "certificatePassword":"hzyapp",/*证书密码*/
    "sdkPath":"D:/GreenSoftWare/Android/android-sdk-windows",/*android-sdk路径*/
    "androidAPILevel":"8",/*Android版本,我用了2.2*/
    "permissions":[
            "INTERNET",
            "ACCESS_NETWORK_STATE",
            "CAMERA",
            "VIBRATE",
            "ACCESS_FINE_LOCATION",
            "ACCESS_COARSE_LOCATION",
            "CALL_PHONE"
        ]
}


4. 运行第一个App
将创建的MyApp项目部署到IIS上,注意需要添加MIME类型扩展名为“.json”,MIME类型为Win7:” application/x-json”或XP:“application/x-javascript”;

好了,运行,结果如下图:

Sencha Toucha环境安装_第2张图片


5.打包发布

Sencha给我们提供了4种发布方式

  • testing:供测试,QA使用版本
  • package:脱离web server,本地html文件资源包
  • production:正是发布的webapp产品
  • native:打包成android apk,或者ios app本地安装文件

必需在Start Command Prompt with Ruby”命令行工具中进入项目文件夹,执行一行命令即可发布我们的产品:


Sencha Toucha环境安装_第3张图片

html5离线缓存:如果你将已发布好的app,放到remote server上,第一次打开index.html,然后切断
网络,再次刷新index.html你会发现仍然可以显示,原因就是他采用了html5的离线缓存技术。
Sencha Touch App每次打开都会检查服务器是否有变动,如果有变动,会自动触发app.js里
onUpdated方法,提醒用户更新。这里还需要添加MIME类型以支持cache.appcache  html5缓存文
件,application/cache-manifest 。
小提示:您可以在项目目录下新建一个build.bat批处理文件,将编译命令写入,这样每次就不用手动执行命令了。双击改文件即可。



如果你想打包成nativeApp(即.apk安装包):

需下载android-sdk:http://download.pchome.net/development/sample/detail-142455.html

打开cmd进入java runtime jre安装目录 输入:

keytool -genkey -v -keystore hzyapp.keystore -alias hzyapp -keyalg RSA -keysize 2048 -validity 10000

/*说明:
	-genkey 产生密钥
        -alias demo.keystore 别名 demo.keystore
        -keyalg RSA 使用RSA算法对签名加密
        -validity 40000 有效期限4000天
        -keystore demo.keystore 
*/

Enter keystore password: (I entered "hzyapp")
What is your first and last name?
  [Unknown]: jack chen
What is the name of your organizational unit?
  [Unknown]: it
What is the name of your organization?
  [Unknown]: hzy
What is the name of your City or Locality?
  [Unknown]: jiaxing
What is the name of your State or Province?
  [Unknown]:  zhejiang
What is the two-letter country code for this unit?
  [Unknown]:  CN
Is CN=Patrick Chu, OU=Training, O=Sencha, L=Redwood City, ST=California, C=US correct?
  [no]:  y

Generating 2,048 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days
    for: CN=jack chen, OU=it, O=hzy, L=jiaxing, ST=zhejiang, C=CN
Enter key password for <hzyapp>
    (RETURN if same as keystore password):  
[Storing hzyapp.keystore]

 ok,这样你就产生了一个hzyapp.keystore证书,备用。

文件配置成功后,执行最关键的一步,打包命令

Sencha Toucha环境安装_第4张图片

 如果全线飘绿,那恭喜你,你成功了,赶紧到\build\MyApp\native目录下找你的apk吧,哈哈

Sencha Toucha环境安装_第5张图片



你可能感兴趣的:(Sencha Toucha环境安装)