Sencha Touch 教你一键打包+发布

最新推荐文章于 2016-07-12 14:31:00 发布
最新推荐文章于 2016-07-12 14:31:00 发布
阅读量108 收藏
点赞数
原文链接：https://my.oschina.net/u/259577/blog/206148
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

思路介绍：

  1. cmd生成新的工程文件（以下简称目标工程）；

  2. 将当前正在开发的项目的app下面的文件copy到目标工程，并在copy过程中将对应的文件名放到app.json和bootstrap.json里面，将resources下面的文件全部移动到目标工程并将对应的css文件名放到app.json和bootstrap.json里面,并将lib下面的第三方js文件放到app.json下面一遍打包后能被项目找到；

  3. 将resources下面的图片全部放进缓存；

  4. 通过当前项目的app.js改变目标项目的app.js;

  5. 修改index.html文件（因为有时候我们会在项目中用到第三方的js包并在引入是配置相关参数，这时候我们就难免会在index.html中加入对应的js文件，比如百度地图的js文件需要配置key等等）;

  6. 由于cmd打包本地应用还存在问题。我们本版本就先忽略本地应用，主要打包类型为production，package；

  7. 用java执行cmd打包的bat命令；

  8. 源码下载地址：http://pan.baidu.com/s/1hq1IFzu

  9. 你可以加入交流群：377140502

  10. 部分关键代码如下:

/**
 * 比对和转换app.json和bootstrap.json
 * @author AvenGang
 *
 */
public class App_bootstrap_JSON {

	/**
	 * 单例
	 * @return
	 */
	public static App_bootstrap_JSON getInstance() {
		return abj;
	}
	
	/**
	 * 替换app.json和bootstrap.json
	 * @param tag 目标路径
	 * @throws IOException
	 */
	public void replace(String tag) throws IOException {
		//找到目标项目的app.json文件和bootstrap.json
		File tarFile = new File(tag + File.separator + "app.json");
		File tarBootstrapFile = new File(tag + File.separator + "bootstrap.json");
		String jsStr = "";
		if(js.lastIndexOf(",") > -1) {
			jsStr = js.substring(0, js.lastIndexOf(","));//去掉多余的逗号
		}
		jsStr += "\r\n],\r\n";//添加结尾
		String cssStr = "";
		if(css.lastIndexOf(",") > -1) {
			cssStr = css.substring(0, css.lastIndexOf(","));//去掉多余的逗号
		}
		String bootstrapCssStr = cssStr + "\r\n]\r\n";
		
		cssStr += "\r\n],\r\n";//添加结尾
		String appCacheStr = "";
		if(appCache.lastIndexOf(",") > -1) {
			appCacheStr = appCache.substring(0, appCache.lastIndexOf(","));//去掉多余的逗号
		}
		//添加结尾
		appCacheStr += "\r\n\t" +
							"],\r\n\t" +
							"\"network\": [\r\n\t\t" +
				            	"\"*\"\r\n\t" +
					        "],\r\n\t" +
					        "\"fallback\": []\r\n" +
				        "},\r\n";
		
		String jsonStr = FileUtil.file2Str(tarFile);
		String preStr = jsonStr.substring(0, jsonStr.indexOf("\"js\":"));
		String postStr = jsonStr.substring(jsonStr.indexOf("\"ignore\":"));
		preStr += jsStr;
		preStr += cssStr;
		preStr += appCacheStr;
		preStr += resources;
		PrintWriter pw = new PrintWriter(tarFile);
		//app.json写数据
		pw.write(preStr+postStr);
		pw.close();
		String idStr = jsonStr.substring(jsonStr.indexOf("\"id\":"),jsonStr.length() - 1);
		PrintWriter pw1 = new PrintWriter(tarBootstrapFile);
		String str = "{"+idStr+","+jsStr+bootstrapCssStr+"}";
		//bootstrap.json写数据
		pw1.write(str);
		pw1.close();
	}
	
	public void addJs(String libJsName) {
		if(libJsName.contains(".svn")) {
			return;
		}
		if(!libJsName.endsWith(".js")) {
			return;
		}
		String str = "\r\n\t" +
							"{\r\n\t\t" +
								"\"path\" : \"resources/lib/%1$s\"\r\n\t" +
							"},";
		str = String.format(str, libJsName);
		js.append(str);
	}
	
	public void addCss(String cssName) {
		if(cssName.contains(".svn")) {
			return;
		}
		if(!cssName.endsWith(".css")) {
			return;
		}
		String str = "\r\n\t" +
							"{\r\n\t\t" +
								"\"path\" : \"resources/css/%1$s\"\r\n\t" +
							"},";
		str = String.format(str, cssName);
		css.append(str);
	}
	
	public void addAppCache(String cachePathName) {
		if(cachePathName.contains(".svn")) {
			return;
		}
		String str = "\"%1$s\",\r\n\t\t";
		str = String.format(str, cachePathName);
		appCache.append(str);
	}
	
	private App_bootstrap_JSON() {
		initJs();
		initCss();
		initAppCache();
		initResources();
	}
	
	/**
	 * 初始化，将系统不变的js文件配置到app.json里面sencha-touch.js
	 */
	private void initJs() {
		js.append("\"js\": [\r\n\t" +
						"{\r\n\t\t" +
							"\"path\": \"touch/sencha-touch.js\",\r\n\t\t" +
							"\"x-bootstrap\": true\r\n\t" +
						"},\r\n\t" +
						"{\r\n\t\t" +
							"\"path\": \"bootstrap.js\",\r\n\t\t" +
							"\"x-bootstrap\": true\r\n\t" +
						"},\r\n\t" +
						"{\r\n\t\t" +
							"\"path\": \"app.js\",\r\n\t\t" +
							"\"bundle\": true,\r\n\t\t" +
							"\"update\": \"full\"\r\n\t" +
						"},");
	}
	
	public void initCss() {
		css.append("\"css\": [\r\n\t");
	}
	
	public void initAppCache() {
		appCache.append("\"appCache\": {\r\n\t" +
								"\"cache\": [\r\n\t\t" +
									"\"index.html\",\r\n\t\t");
	}
	
	public void initResources() {
		resources.append("\"resources\": [\r\n\t");
			resources.append("\"resources/images\",\r\n\t\t");
			resources.append("\"resources/icons\",\r\n\t\t");
			resources.append("\"resources/startup\",\r\n\t\t");
			resources.append("\"resources/lib\"\r\n\t");
		resources.append("],");
	}
	
	private static StringBuffer js = new StringBuffer();
	private static StringBuffer css = new StringBuffer();
	private static StringBuffer appCache = new StringBuffer();
	private static StringBuffer resources = new StringBuffer();
	private static App_bootstrap_JSON abj = new App_bootstrap_JSON();
}


/**
 * 修改app.js文件
 * @author AvenGang
 *
 */
public class App_JS {

	public static void replace(String src, String tag) throws IOException {
		File tagFile = new File(tag + File.separator + "app.js");
		File srcFile = new File(src + File.separator + "app.js");
		String srcJsonStr = FileUtil.file2Str(srcFile);
		String tagJsonStr = FileUtil.file2Str(tagFile);
		String iconStr = tagJsonStr.substring(tagJsonStr.indexOf("icon:"))
				.split("}")[0] + "},";

		String str = "requires:['Ext.MessageBox',";
		if (srcJsonStr.indexOf("requires:[") > -1) {
			srcJsonStr = srcJsonStr.replace("requires:[",str);
		} else if (srcJsonStr.indexOf("requires :[") > -1) {
			srcJsonStr = srcJsonStr.replace("requires :[",str);
		} else if (srcJsonStr.indexOf("requires: [") > -1) {
			srcJsonStr = srcJsonStr.replace("requires: [",str);
		} else if (srcJsonStr.indexOf("requires : [") > -1) {
			srcJsonStr = srcJsonStr.replace("requires : [",str);
		} else {//没有required属性
			
		}

		String post_preStr = tagJsonStr.substring(
				tagJsonStr.indexOf("isIconPrecomposed:"),
				tagJsonStr.indexOf("launch:"));

		if (srcJsonStr.indexOf("icon:") > -1) {
			iconStr = srcJsonStr.substring(srcJsonStr.indexOf("icon:")).split(
					"}")[0]
					+ "},";
		} else if (srcJsonStr.indexOf("icon :") > -1) {
			iconStr = srcJsonStr.substring(srcJsonStr.indexOf("icon :")).split(
					"}")[0]
					+ "},";
		} else {
			iconStr = "";
		}
		String onUpdatedStr = tagJsonStr.substring(tagJsonStr
				.indexOf("onUpdated:"));
		
		String endStr = iconStr + post_preStr + onUpdatedStr;
		srcJsonStr.replace("});", endStr);
		
		PrintWriter pw = new PrintWriter(tagFile);
		pw.write(srcJsonStr);
		pw.close();
	}
}



/**
 * 修改index.html的内容
 * @author AvenGang
 *
 */
public class INDEX_HTML {

	public static void replace(String src, String tag) throws FileNotFoundException {
		File srcFile = new File(src + File.separator + "index.html");
		File tagFile = new File(tag + File.separator + "index.html");
		String srcJsonStr = FileUtil.file2Str(srcFile);
		ArrayList<String> lists = StringUtil.getValueBetweenTwoMarkers(srcJsonStr, "<!--cmd-->", "<!--/cmd-->");
		String tagJsonStr = FileUtil.file2Str(tagFile);
		StringBuffer sb = new StringBuffer();
		for(String str : lists) {
			sb.append(str+"\r\n");
		}
		tagJsonStr = tagJsonStr.replace("</head>", sb.toString() + "</head>");
		PrintWriter pw = new PrintWriter(tagFile);
		pw.write(tagJsonStr);
		pw.close();
	}
}

10.效果图：

091616_KMjs_259577.jpg

091616_CumP_259577.jpg

091617_tysw_259577.jpg

091617_56e8_259577.jpg

091618_VRhV_259577.jpg

091618_gh9z_259577.jpg

把这个文件夹放到tomcat等服务器下面就能在网上访问了，怎么样，是不是觉得比以前方便多了呢！

转载于:https://my.oschina.net/u/259577/blog/206148

weixin_34402090
关注
sencha touch 扩展篇之将sencha touch打包成安装程序（上）- 使用sencha cmd打包安装程序...
weixin_30631587的博客
05-26 151
　　由于最近一直忙着android原生的开发，很久没有更新博客了，官方的sencha cmd工具功能非常强大，创建项目，压缩项目，打包安装程序都能轻松实现，这讲我们就给大家介绍下如何使用sencha cmd来打包我们的sencha touch项目， 　　为了更好地向大家演示如何打包一个sencha touch的项目，我们用sencha cmd创建一个演示项目，如果你的sencha cmd环境还没...
sencha touch打包
仰望 星空的专栏
02-08 1206
首先要安装好ruby和sencha cmd，这是我开发sencha touch是用的工具，不知还有没有其他工具打包的，那我就只介绍这种工具的打包方法了。一般到了打包的地步，基本上ruby和sencha cmd都是早就安装好了的。 1  打开.程序->Start Command Prompt with Ruby 2. 输入命令：cd  工程目录   接着切换到工程目录下
sencha touch 扩展篇之将sencha touch打包成安装程序（下）- 使用phonegap打包安装程序...
weixin_30548917的博客
06-25 136
　 这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app，这里我们只讲解打包android的apk，打包ios的过程有点类似，但是需要在mac环境下，最后通过xcode导出成ipa安装程序； 　　 　　一、phonegap环境搭建: 　　phonegap从3.0开始已经不再使用手动的方式搭建项目了，而是使用command-line命令...
如何用Sencha Touch打包Android的APK
weixin_33919950的博客
12-04 136
什么是Sencha Touch 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架。同时，ExtJS更名为Sencha，JQTouch的创始人D...
【Sencha Touch 2】SenchaTouch程序编译和打包
yanwushu的博客
12-16 8982
前言 我试过大概三种方式打包，但是最后只有一种能够成功（也是最方便的方式，但不代表别的方式就不行）。总结一下，仅供大家参考。 ü 使用sdkTools打包 ü 使用手动建立Android项目使用PhoneGap打包 ü 使用Eclipse的PhoneGap插件直接建立PhoneGap程序打包 编译 ST的‘编译（b
Sencha Touch 2 简介+组件+布局
04-03
Sencha Touch 2 简介知识，环境搭建，组件介绍和布局事例
sencha-touch + cordova(PhoneGap)使用adt-eclipse打包实例
06-23
3. **整合Cordova**：在Sencha Touch项目中，你需要创建一个名为`phonegap`的目录，然后在其中初始化Cordova项目。通过运行`cordova create`命令，指定项目ID、名称和目标平台（例如，Android）。接着，将Sencha ...
sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch
09-14
在"sencha-touch-1.0.1a.zip"中，你将找到Sencha Touch 的源代码，这是学习框架工作原理的好资源。源码通常包括JavaScript文件、样式表（CSS）、图片和其他资源。你可以通过阅读源码来了解框架如何组织和实现其功能...
api.zip_sencha _sencha touch api_sencha touch2 api
09-20
标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合，可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...
Sencha+Touch+Mobile+JavaScript+Framework.pdf
05-21
6. **发布与部署**：将应用打包并发布到各大应用商店或者作为Web应用部署到服务器上。 #### 六、案例分析 假设我们需要开发一款电商应用，其中包含商品浏览、购物车管理、订单提交等功能。我们可以使用Sencha Touch...
使用eclipse把sencha touch工程打包成apk
仰望 星空的专栏
01-09 2722
使用eclipse把sencha touch工程打包成apk 参考：http://blog.csdn.net/l863784757/article/details/37911103， 1.新建一个Android工程 2.解压Phonegap包（去phonegap官网下载压缩包，下载2.9.0的），找到里面的找到Android目录，会发现有如下文件(下载phonegap2.9.0的，2
sencha touch 打包android应用教程
little博客
02-06 1055
参照该篇教程可完成 实例讲解在线打包SenchaTouch2到Android客户端应用 但是我在生成android文件的时候出现了问题，需要先生成一个key，才能装换成apk keystore文件生成教程： dos下进入java JDK的bin目录，运行如下命令: keytool -genkey -alias android.keystore -keyalg RSA -vali
sencha 打包
weixin_34014555的博客
11-13 258
近期在用sencha 做一个微网站 ，完成后在手机上 测试,第一次载入实在太慢， 到项目中检查sencha.js 就2M 多，，用wifi 还好，如果用 3g,4g流量，光js就2m多，实在是有点吓人。 项目基本bug已修复完成，那接下来就是优化sencha.js 了. 下面就sencha移动网站 优化的思路及实践步骤 分享 出来，有不足之处，欢迎...
Sencha Touch 2 打包成IOS本地应用
www_tobesky_com的专栏
10-30 981
准备工作 软件 Mac OS X 10.6+ Xcode (iOS 模拟器所需要的) Apple iOS provisioning  Complete iOS provisioning on the Apple iOS provisioning portal and have the certificates and devices setup thr
sencha touch打包成apk的问题
u010783527的博客
07-12 1095
接上一个linux的，末尾说打包不成功，结果晚上换了几个方法就打包成功了，总结一下。 在尝试打包的时候换了好几个打包的方式，一般测试的时候打包都是sencha app build testing 打的测试包，可以再浏览器中调试，然后测试完成后尝试打成apk包，看了一下网上用sencha app build native，发现最后总是报错，网上的解决方法是在touch/cmd/sencha.c
ExtJS（6）- 用Sencha Cmd构建打包Ext项目
weixin_34290352的博客
06-10 388
用ExtJS组建前端框架有一年多了，考虑到ExtJS中js过多，为提高效率，所以开始寻找打包的方法，然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的，它同样具有构建前端框架的作用。以下为所需的环境：Sencha Cmd 下载地址：http://www.sencha.com/products/sencha-cmd/downlo...
sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
weixin_30338481的博客
04-08 154
　　经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢，经常要10秒左右的时间甚至更多， 　　大家都知道，sencha touch开发的项目中引用了大量的js文件，当我们打开项目时，st的项目会一个一个地加载这些js文件，这样就造成了项目加载速度慢，如果是web远程访问，还会产生大量的http请求影响加载速度，增加服务器压力。 　　所以，我们的项目需要使用sencha cm...
sencha touch cmd 环境配置（创建项目、打包、发布 ）
sunny68的专栏
03-18 2076
一、安装Sencha Cmd  用于生成、部署extjs项目     1、下载安装以下软件：           （1）JDK  http://www.oracle.com/technetwork/java/javase/downloads/               安装到指定路径，例如D:\Java               打开计算机属性——高级系统设置
MAC OS搭建Sencha Touch + Cordova混合应用开发环境
安装完成后，你可以在Sencha Touch项目中添加Cordova支持，生成iOS平台项目，然后构建和打包应用。 总结，配置MAC OS上的Sencha Touch + Cordova开发环境涉及多个步骤，包括安装必要的开发工具，设置Sencha Touch...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值