Sencha Toucha环境安装

最新推荐文章于 2022-04-07 14:30:16 发布

yuan_jie

最新推荐文章于 2022-04-07 14:30:16 发布

阅读量964

点赞数

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：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/Icon@2x.png",
        "144":"resources/icons/Icon~ipad@2x.png"
    },
    "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”；

好了，运行，结果如下图：

5.打包发布

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

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

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

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]