sencha touch 学习笔记- 安装与环境

最新推荐文章于 2017-03-10 19:52:26 发布

_wangtao

最新推荐文章于 2017-03-10 19:52:26 发布

阅读量1.8k

点赞数

分类专栏： EXTJS 移动端文章标签： extjs4

EXTJS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

环境搭建视频共享链接
百度网盘: http://pan.baidu.com/s/1mg5DpS8

参考资料：
http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html
http://www.admin10000.com/document/140.html
这里我主要讲的是如何加入全局变量、公用类、自定义扩展、资源文件
官网地址： http://www.sencha.com/products/touch/
官当最新doc： http://docs.sencha.com/touch/

1.环境搭建
　　a.安装java
　　　　先下载JAVA，下载地址： http://www.oracle.com/technetwork/java/javase/downloads/index.html
　　　　安装到指定路径，例如F:\Java
　　　　打开计算机属性——高级系统设置——环境变量（如上文）
　　　　配置环境变量
　　　　　　变量： JAVA_HOME       值：安装路径：F:\Java\jdk1.6.0_10
　　　　　　变量： Path             添加值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
　　　　　　变量： CLASSPATH    添加值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
　　　　JAVA配置完成，接下来验证配置是否成功。
　　　　击运行——输入 cmd ——回车——输入 javac ——回车，，如果出现一堆英文，如下图所示，即表示配置成功。
　　b.安装cmd
　　　　再下载 sencha touch 的sdk （一个js压缩包），现在最新的版本为2.3，我用的2.2.1版本
　　　　下载地址： http://www.sencha.com/products/touch/download/
　　　　然后下载 sencha touch cmd，一个工具，主要用来创建项目、生成测试包、部署包等，我用的4.0版本
　　　　下载地址： http://www.sencha.com/products/sencha-cmd/download/
　　c.安装ruby
　　　　用 sencha touch cmd 生成测试包或部署包时调用的命令需要ruby，主要用来做js和css压缩
　　　　下载地址： http://rubyinstaller.org/   （ps：需要下载1.93的版本，不要下载2.0的版本）
　　　　安装过程出现如下界面。如图
　　　　

　　　　有3个选项分别是：(1) 是否安装tclTk支持。(2) 添加ruby命令路径到系统环境变量PATH。(3)是否将 .rb 和.rbw 文件关联到Ruby。
　　　　这里选择第二项即可
　　　　安装之后测试cmd 是否安装成功
　　　　运行-》cmd ；输入sencha，看到下面的就说明cmd安装好了
　　　　

　　　　检测当前cmd版本
　　　　sencha upgrade --check
　　　　更新cmd
　　　　sencha upgrade
　　　　如果你想升级到测试版
　　　　sencha upgrade --check --beta
　　　　sencha upgrade --beta

2.创建项目：
在cmd中输入以下命令
sencha -sdk D:\ASPX\touch-2.2.1 generate app app D:\ASPX\Test
D:\ASPX\touch-2.2.1:你选择的sdk根目录
app D:\ASPX\Test：在指定目录创建一个项目，命名空间为app

在谷歌浏览器中可以直接运行，不必搭建服务器。
如果开发过程中涉及到跨域问题，可以如下处理
找到谷歌浏览器，为其创建一个快捷方式，加入以下命令。--disable-web-security

关闭所有已经打开的谷歌浏览器，然后用你创建的快捷方式再次打开

把项目中index.html文件拖入即可。

3.加入全局变量以及公用类js

这是一个简略的开发环境
如图在app文件夹中加入config.js(全局变量),util.js(公用类)
他们的代码分别如下

/*
*所有配置信息
*/
Ext.define('app.config', {
alternateClassName: 'config', //设置别名是为了方便调用，这样直接config.weather就能获取到变量。
statics: {
//天气预报接口
weather: 'http://www.weather.com.cn/data/cityinfo/101210904.html',
//博客园
Cnblogs: 'http://www.cnblogs.com/mlzs/rss'
}
});

复制代码

/*公共类*/
Ext.define('app.util', {
alternateClassName: 'util',
statics: {
//加载stroe
storeLoad: function(id) {
var store = Ext.getStore(id);
if (store.getCount() < 1) {
store.load();
}
},
//Viewport添加新项,Viewport之中始终只有一项
ePush: function(xtype) {
var me = Ext.Viewport,
view = me.getActiveItem();
if (view && view.getItemId() == xtype) {
return;
}
view = Ext.create(xtype, {
itemId: xtype
});
//切换
me.animateActiveItem(view, {
type: 'slide',
direction: 'left'
});
},
//监控Viewport界面切换,切换时销毁旧项
eActiveitemchange: function() {
var me = Ext.Viewport;
me.onAfter('activeitemchange',
function(t, value, oldValue, eOpts) {
if (oldValue) {
//强制销毁，防止销毁不完全引发错误
me.remove(oldValue, true);
}
});
},
/*为Ext.Viewport添加一个消息提示组件*/
addMessage: function() {
Ext.Viewport.setMasked({
xtype: 'loadmask',
cls: 'message',
transparent: true,
indicator: false
});
this.hideMessage();
},
/*显示一个消息提示*/
showMessage: function(mes, autoHide) {
var me = this,
message = this.getMessage();
message.setMessage(mes);
message.show();
//是否自动关闭提示
if (autoHide) {
setTimeout(function() {
message.hide();
},
500);
}
},
/*隐藏消息提示*/
hideMessage: function() {
this.getMessage().hide();
},
//消息组件
getMessage: function() {
return Ext.Viewport.getMasked();
},
//重写ajax
overrideAjax: function() {
var me = this;
//开始加载
Ext.Ajax.on('beforerequest',
function(connection, options) {
if (!options.hidMessage) {
me.showMessage('正在努力加载中...');
}
});
//加载成功
Ext.Ajax.on('requestcomplete',
function(connection, options) {
me.hideMessage();
});
//加载失败
Ext.Ajax.on('requestexception',
function(connection, options) {
if (!options.hidMessage) {
me.showMessage('加载失败，请稍后再试...', true);
}
});
},
//重写list
overrideList: function() {
//重写分页插件
Ext.define("Ext.zh.plugin.ListPaging", {
override: "Ext.plugin.ListPaging",
config: {
//自动加载
autoPaging: true,
//滚动到最底部时是否自动加载下一页数据
noMoreRecordsText: '没有更多内容了',
loadMoreText: '加载更多...' //加载更多按钮显示内容
}
});
//重写List
Ext.define("Ext.zh.List", {
override: "Ext.List",
config: {
//取消选择效果
selectedCls: '',
//禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
loadingText: false,
emptyText: '没有更多内容了'
}
});
},
//app初始化执行
inIt: function() {
this.eActiveitemchange();
this.overrideList();
this.overrideAjax();
this.addMessage();
}
}
});

复制代码

直接utli.inIt();

config.weather就可以直接使用
创建一个ux文件夹，里面放置扩展插件。例如：

/*
*模仿tabpanel导航栏
*/
Ext.define('ux.TabBar', {
alternateClassName: 'tabBar',
extend: 'Ext.Toolbar',
xtype: 'tabBar',
config: {
docked: 'bottom',
cls: 'navToolbar',
layout: {
align: 'stretch'
},
defaults: {
flex: 1
},
//被选中的按钮
selectButton: null
},
initialize: function () {
var me = this;
me.callParent();
//监听按钮点击事件
me.on({
delegate: '> button',
scope: me,
tap: 'onButtonTap'
});
},
//更新被选中按钮
updateSelectButton: function (newItem, oldItem) {
if (oldItem) {
oldItem.removeCls('x-tabBar-pressing');
}
if (newItem) {
newItem.addCls('x-tabBar-pressing');
}
},
//当按钮被点击时
onButtonTap: function (button) {
if (!button.getInitialConfig('noSelect')) {
this.setSelectButton(button);
}
},
/**
* @private
*执行添加项，调用add方法后自动执行
*/
onItemAdd: function (item, index) {
if (!this.getSelectButton() && item.getInitialConfig('selected')) {
this.setSelectButton(item);
}
this.callParent(arguments);
}
});

复制代码

在app.js中需要加入

//指定ux起调目录
Ext.Loader.setPath({
'ux': 'app/ux'
});
//简略写法
Ext.application({
name: 'app',
appFolder: 'app',
controllers: ['Main', 'Panel', 'Layout', 'List'],
requires: ['app.config', 'app.util'],
launch: function () {
util.inIt();
}
});

复制代码

这样就可以通过ux.TabBar来使用自定义控件了
例如：

Ext.define('app.view.MyBar', {
alternateClassName: 'myBar',
extend: 'ux.TabBar',
xtype: 'myBar',
requires: ['app.view.About'],
config: {
items: [
{
xtype: 'button',
text: '首页',
//只有第一个设置的属性有效
selected: true,
action: 'redirect',
redirect: 'home'
},
{
xtype: 'button',
text: '关于',
action: 'redirect',
redirect: 'about'
},
{
xtype: 'button',
text: '其他',
//没有选中效果
noSelect:true,
action: 'other'
}]
}
});

复制代码

下面是资源文件的引入
在app.json文件中：
通过resources来配置资源文件，这样使用cmd打包时才会将资源文件复制到生成的项目中
下面是我的app.json,其中有我对各个配置的理解

{
/**
* 项目的命名空间
*/
"name": "app",
/**
* 项目起始html文件，路径相对于此app.json文件
*/
"indexHtmlPath": "index.html",
/**
* 运行此项目的url路径，比如: "http://localhost/myapp/index.html".
*
*当设置此值时，将不能通过文件系统直接访问。
*/
"url": null,
/**
* 所需引用js文件
* 单个格式如下
* {
* "path": "path/to/script.js" // 文件路径，如果本地文件，路径相对于此app.json文件
* "remote": true // (可选值)
* // -默认值为"false"
* // -"true"，如果这个文件是一个远程文件不会被复制
* "update": "delta" // (可选值)
* // 如果没有指定，这个文件将只加载一次，
* // 缓存到localStorage里面，直到这个值被改变。
* // - "delta" 增量更新此文件
* // - "full" 当文件改变时，完全更新此文件
* "x-bootstrap": true // (可选值)
* // 表示这是项目依赖文件。
* // 该文件不会被复制到生成目录或引用
*
* }
*/
"js": [{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "app.js",
/* 表示所有的类生成到这个文件 */
"bundle": true,
"update": "delta"
}],
/**
*所需引用js文件
* 单个格式如下
* {
* "path": "path/to/script.js" // 文件路径，如果本地文件，路径相对于此app.json文件
* "remote": true // (可选值)
* // -默认值为"false"
* // -"true"，如果这个文件是一个远程文件不会被复制
* "update": "delta" // (可选值)
* // 如果没有指定，这个文件将只加载一次，
* // 缓存到localStorage里面，直到这个文件被改变。
* // - "delta" 增量更新此文件
* // - "full" 当文件改变时，完全更新此文件
*
* }
*/
"css": [{
"path": "resources/css/app.css",
"update": "delta"
},
{
"path": "resources/css/main.css",
"update": "delta"
}],
/**
*项目生成时用于自动生成HTML5应用程序缓存清单（cache.manifest）
*/
"appCache": {
/**
* 本地缓存名单
*/
"cache": ["index.html"],
/**
* 网络缓存名单
*/
"network": ["*"],
/**
* FALLBACK缓存名单
*/
"fallback": []
},
/**
* 项目生成时需要复制的资源文件
*/
"resources": ["resources/images", "resources/icons", "resources/startup"],
/**
* 项目生成时忽略的文件/目录名称匹配，必须是有效的正则表达式
*/
"ignore": ["\.svn[ DISCUZ_CODE_5 ]quot;],
/**
* 之前生成项目储存目录，用于进行增量更新，不可随意改变此目录下的文件
*/
"archivePath": "archive",
/**
* 在cmd创建时需要引用的类
*/
"requires": [],
/**
* 唯一ID，作为localStorage前缀。
* 通常情况下，你不应该改变这个值。
*/
"id": "d8504e05-a9fc-4692-bdbc-94c3190751f5"
}

复制代码

4.通过cmd生成项目
运行命令行工具，进入你的项目目录

运行cmd生成命令：
sencha app build native：直接打包成本地苹果或者安卓应用，具体参见 http://www.cnblogs.com/mlzs/p/3470224.html
sencha app build production:生成web包,主要用于发布web版本
sencha app build package：生成压缩包
sencha app build testing：生成测试包
生成过程中，有错误请根据提示进行排错

如上生成成功
示例demo可以看这里： http://www.cnblogs.com/mlzs/p/3382229.html
此项目为了开发方便对结构进行了简化，使用cmd生成一个命名空间为app的项目，将demo项目中的文件复制到对应app项目目录中，使用cmd打包成功（已测）
项目build目录下可以找到生成之后的项目
类似下图：

_wangtao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
sencha touch 学习笔记- 安装与环境

环境搭建视频共享链接百度网盘:http://pan.baidu.com/s/1mg5DpS8参考资料：http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.htmlhttp://www.admin10000.com/document/140.html这里我主要讲的是如何加入全局变量、公用类、自定义扩展、资源文件
复制链接

扫一扫