您的位置首页百科知识

用Sencha Cmd搭建sencha Touch2.x环境创建项目

用Sencha Cmd搭建sencha Touch2.x环境创建项目

的有关信息介绍如下:

用Sencha Cmd搭建sencha Touch2.x环境创建项目

Sencha Touch是一个前端的js框架,使用它可以创建出类似于原生App的Web App,在使用Sencha Touch之前必须要搭建好环境,对于新版本的Sencha Touch(目前是最新的为2.4.2)官方推荐使用Sencha cmd来搭建环境,这就涉及到很多命令行操作,下面就以图文的形式详细的向大家介绍如何使用Sencha Cmd搭建环境并创建项目。

一、安装支持sencha touch浏览器

一般推荐使用的是chrome或safari浏览器,它们的内核都是webkit,之前sencha Touch是针对webkit设计的,貌似现在得Sencha Touch(目前最新版2.4.2)也支持IE10以上,以及火狐浏览器。笔者在这里使用的是火狐浏览器42.0。

二、下载Sencha Touch

登录Sencha Touch官网,点击菜单栏上的”Products“菜单,在下拉框中选择“Frameworks”-->“Sencha Touch”,如下图所示。

进入到提供填写”基本信息“页面,主要是填好邮件地址,其他的看情况填写,填好邮件地址,点击“DOWNLOAD TOUCH”按钮,官网会将下载连接发到你刚才填写的邮件中,所以一定要确保邮件是正确的。

登录刚才填写的邮箱,点击邮箱中Sencha Touch官网发来的下载链接,在链接中点击“DOWNLOAD NOW”按钮,实现Sencha Touch的下载,如下图所示。

点击“DOWNLOAD NOW”按钮,过一会会弹出一个窗口,选择将文件保存下来,如下图所示。

三、搭建JDK环境

因为后面的Sencha Cmd是用Java写的,还有要打包成Android的apk也需要Java的环境,所以在这里要单间好JDK的环境,搭建好好后在命令行中输入javac,如果出现一大堆有关java的提示信息则表示JDK已安装好,并且环境变量以及配置好,下图就是配置好的显示效果。(具体搭建过程可以参考下面的引用教程)

70win10怎么安装JDK8,怎么配置JDK8的环境变量

四、搭建Ruby环境

Ruby主要是用来对js和css进行压缩的,在使用Senca Cmd 生成测试包后部署包时调用的命令会用到Ruby。安装好Ruby后在Windows的“命令提示符界面”中输入ruby -v,如果显示版本号等信息,则表示安装完成。(具体搭建过程可以参考下面的引用教程)

0搭建Ruby开发环境

五、搭建Android开发环境

搭建Android开发环境是为了使应用最后打包生成apk应用,在这里需要下载Android SDK并配置好环境变量。(具体搭建过程可以参考下面的引用教程)

11在windows10上配置Android的环境变量

4如何在Windows上搭建Android开发环境

六、安装Sencha Cmd

sencha cmd 是一款功能强大的命令行工具,使用它你可以自由地创建Sencha Touch的app项目,以及将项目打包成相应移动平台的安装程序。所以必须要安装Sencha Cmd,基本上下载下来是傻瓜式安装(具体安装过程可以参考下面的引用教程),安装完成后需要配置环境变量,将安装路径配置到系统的Path中,如下图所示。

1怎么在Windows平台上下载安装Sencha Cmd

测试Sencha Cmd是否配置好环境变量,在命令行中输入sencha命令,如果出现cmd的版本及相关信息,怎么表明配置好了,如果没有,请进行上一步环境变量的配置。

七、创建项目

将刚才下载的Sencha Touch安装包解压,这里我解压在D盘,然后打开“命令提示符”窗口,进入到相应目录输入创建项目的命令sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp (其中-sdk /path/to/sdk是指向你解压后的安装包的目录,MyApp是应用的名字,/path/to/myapp在磁盘上生成项目文件夹的名字)。

在这里,我们已经进入安装包目录,在D盘根目录生成项目文件夹,所以在这里我输入命令sencha generate app MyApp /myapp

如果输入命令后一直没有报错,一直是绿色的如下图,代表项目创建成功。

创建好后可以看到,可以看到在D盘生成了一个项目myapp,项目的目录如下图所示。

直接将目录下的index.html文件用火狐浏览器打开,可以看到Sencha Touch2的欢迎界面,如下图所示。

将项目设置成虚拟目录到Tomcat服务器或直接将项目移动到Tomcat的webapps根目录下,在浏览器中输入localhost/myapp访问,如下图所示。

如果你使用的是火狐浏览器15-17步可以省略不看,如果你使用谷歌浏览器建议观看。

注意如果,你用谷歌浏览器测试,会遇到跨域问题,也就是直接打开index.html出现如下图情况,一种解决方法:将项目放到服务器中,然后再访问。

另一种解决方法:右击桌面的谷歌快捷方式图标,点击“属性”,然后在谷歌属性面板中的“快捷方式”一栏的目标(T)后面,加上“--disable-web-security”命令。

注意:“--disable-web-security”命令之前要空一格。

然后打开浏览器会看到谷歌浏览器提示“您使用的是不受支持的命令行标记:--disable-web-security。稳定性和安全性会有所下降。”的提示,证明设置成功,然后就可以不将项目放到服务器下,通过设置的”谷歌快捷方式图标“就可以访问了(直接将那个项目中的index.html拖入此谷歌快捷方式)。

八、程序编译和打包

SenchaCmd的编译打包实际上就是对应用的压缩。

SenchaCmd为我们提供了4种不同的编译和打包方式,分别是

sencha app build testing 供测试,QA使用版本

sencha app build package 脱离web server,本地html文件资源包

sencha app build production 正式发布的webapp产品

sencha app build native 打包成移动应用如android的apk或ios的app

首先,我们进入到项目目录输入

sencha app build testing

命令编译打包,如下图所示。

使用testing方式编译打包后,我们可以看到项目的目录下的build文件夹中会有一个testing文件,它下面生成了一个应用名称的文件夹,在这里为MyApp,如下图所示这是它的目录。

进入到项目目录输入

sencha app build package

命令编译打包,如下图所示。

进入到项目目录下的build-->package-->MyApp,可以看到打包后的应用如下。

进入到项目目录输入

sencha app build production

命令编译打包,如下图所示。

进入到项目目录下的build-->production-->MyApp,可以看到打包后的应用如下。

进入到项目目录输入

sencha app build native

命令编译打包,如下图所示。

进入到项目目录下的build-->native-->MyApp,可以看到打包后的应用如下。