码迷,mamicode.com
首页 > 移动开发 > 详细

Sencha学习笔记2:打包您的第一个Sencha安卓应用apk安装包

时间:2015-01-27 11:11:20      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:sencha

通过上一篇翻译的官方文章的介绍我们对sencha有了初步的印象,同时我们也通过该向导生成了第一个示例应用代码框架,那么下一步可能很多人都觉得应该根据该向导所提示的去看一下一个应用是如何建立起来的详细信息了,但我认为可以换一下学习的路径。

天地会珠海分舵是一个比较急功近利的人,所以有了第一个自动生成的代码示例后,他是比较急于想知道应该如何将该示例打包成一个安卓的apk安装包来安装到目标安卓机器上。刘备做得好,得陇就应该望蜀,做人还是有点追求的好。

下面我们就尝试通过一个HelloWorld的示例来看下应该如何使用sencha命令来把sencha应用打包成一个apk安装包并安装到目标安卓设备上面。

第一步: 创建示例代码

根据上一篇翻译的官方文章《Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南》所介绍的方法,我们先定位到sencha sdk所在的目录下面,然后执行对应sencha generate app命令来在sdk的父目录生成对应的应用框架文件:

技术分享

创建示例代码的命令输出结果如图所示:

技术分享

第二步:修改MVC模式的View文件app/view/Main.js以改变显示内容

这一步和第三步其实可以跳过,如果你百分之百确定新创建的示例应用运行起来没有任何问题的话,但毕竟天地会珠海分舵只是个初学者,我相信看官对本文感兴趣的应该也是如我一般是个初学者,所以建议还是多做几步顺便对sencha自动生成的代码有些初步印象的好。

sencha命令生成的示例代码框架中的app/view/Main.js就是MVC模式中的View,负责的士如何把ui呈现给用户,所以我们可以通过修改其中的一些选项来修改ui的一些显示。sencha默认生成的应用是有两个tab标签的应用,下面我们将应用的其中一个标签的标题改成"My First Sench App",把其主体内容改成"What an app!";并把另外一个标签的标题改成"Woohoo":

技术分享

修改之后进行保存,然后在下一步通过浏览器来检查该修改是否成功。

第三步:通过sencha命令启动web服务器

修改好MVC中的view显示后,我们就需要在浏览器中先调试检查下该修改是否已经成功,我们可以用大部分流行的web服务器来访问该示例应用,但为了简单起见,且我们的主要目的是为了去学习sencha touch,所以我们这里使用的sencha命令提供的web服务器来完成这个工作。下图显示了通过命令打开sencha自带web服务器的过程,注意在执行该命令前本人是先cd到应用目录下面的,这样我们在浏览器中就不用制定额外的路径来访问该应用了:

技术分享

注意上图最后一行打印出来的信息包含了访问该示例应用的端口信息:1841,我们下一步需要用到。


第四步:通过浏览器访问应用

最终通过浏览器定位到我们的应用,相信这种通过web服务器加上浏览器访问的方式主要是为了调试sencha touch应用的方便而设计的,毕竟sencha touch要打造的就是基于浏览器或者混合应用外壳的应用,所以用浏览器调试应该是最方便的。

下图显示了浏览器上通过本地ip和上一步提及的端口来访问我们修改过的view所显示的示例的内容,从中可以看到我们修改的内容已经起效了:

技术分享


第五步:确定sdk版本

这一步主要是要确定我们系统上下载的sdk版本,因为往下调用sencha命令来生成apk包的时候除了需要制定安卓sdk所在的位置之外还需要指定该sencha示例应用所应该编译到的对应的api level。

按照本人的经验,天地会珠海分舵认为应该有两个方法可以判断当前sdk支持的api level,第一种就是通过检查sdk目录下的platforms目录下面有哪些api level的文件夹:

技术分享

第二种就是我们可以通过"Android SDK Manager"来确定我们究竟安装了哪些level的安卓api:

技术分享

通过以上两种方法我们就可以知道我们系统现在支持的是api level多少级别的安卓系统了,当然,如果不满足你的需要的话,你可以通过Android SDK Manager下载更多满足要求的。这里我们会选取其中一个,比如我们这里选取api level 19。

第六步:修改应用顶层目录下的packager.json文件

该文件是一个指示sencha应该如何打包应用的文件,这里有几个地方需要进行修改的。

首先,我们需要修改的是示例应用的命名空间,其实在天地会珠海分舵看来,安卓上该命名空间就等同于应用的包名,往下我们会进行验证。请先看下图显示的命名空间applicationId选项的修改:

技术分享

该选项的值修改之前是“HelloWorld",为了遵循安卓的包命名规则,我们需要把它修改成如下格式"com.sample.HelloWorld"。图片显示的其他格式先不要动,保留原来是什么值就什么值。

然后往下我们还需要修改签名等相关的信息,如下图所示:

技术分享

首先platform应该修改成Android,因为我们现在的示例是演示如何打包安卓的apk安装包。其次就是把证书签名相关信息设置好,这些信息可以从前面的步骤获取到。最后就是指定安卓sdk的路径和上一步获得的api level了。修改后别忘记保存。


第七步:调用sencha命令生成apk安装包

到了现在是万事具备只欠东风了,该如何打包的配置文件在上一步已经完成,我们只需要执行“sencha app build native"命令,如果不出意外的话就能生成对应的apk安装包了。如果这个过程中出现问题的话,建议仔细查看错误输出提示,往往就是我们上一步的配置文件没有配置好导致的问题。当然,sencha除了提供“sencha app build native"命令来打包apk安装包之外,还提供了其他的一些打包方法,但是这里我们先不用管,今后学习的过程中我觉得有必要的话自然会对其进行尝试然后分享给大家的了。

请看下图执行sencha打包apk命令的部分输出信息:

技术分享

打包好的apk安装包会保存在示例应用顶层目录下的build文件夹的相应子目录下面,具体请看下图:

技术分享


第八步:把安装包安装到目标机器上并运行

有了该apk安装包后我们就可以像对待其他普通安装包一样,通过"adb install"命令来把该安装包安装到目标安卓设备上面了。安装后该应用的图标如下所示:

技术分享

触按该应用图标后打开该示例应用,大家可以看到其内容跟前面通过浏览器访问sencha示例应用是一致的:

技术分享


第九步:验证应用命名空间和示例应用包名是同一回事

上面的第六步中我们在packager.json这个打包配置文件中把示例应用的命名空间设置为“com.sample.HelloWorld“,当时我跟大家断言说该命名空间应该就是该安卓应用的包名,这里我们可以通过安卓的”pm list packages"这个专门列出所有安装包的命令来进行验证:

技术分享

从上图我们可以验证前面所有的包名和命名空间其实就是同一回事。


作者

自主博客

微信

CSDN

天地会珠海分舵

http://techgogogo.com


服务号:TechGoGoGo

扫描码:

技术分享

http://blog.csdn.net/zhubaitian



Sencha学习笔记2:打包您的第一个Sencha安卓应用apk安装包

标签:sencha

原文地址:http://blog.csdn.net/zhubaitian/article/details/43191969

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!