sencha touch+phonegap+node.js打包

这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境下,最后通过xcode导出成ipa安装程序;

  

  一、phonegap环境搭建:

  phonegap从3.0开始已经不再使用手动的方式搭建项目了,而是使用command-line命令行工具来搭建项目环境,并且插件引入的机制也在3.0做了调整,采用了模块化的方式,即需要什么功能模块就通过命令行工具来安装对应的模块,而不是像3.0之前的那样架包包含了所有功能,这样,phonegap的项目体积就得了一定的缩减,项目加载的速度也就得到了一定的提升,截止到目前为止,phonegap已经更新到3.5.0版本了,更新的速度还是相当的快。

  简单的介绍之后我们开始来搭建我们的项目环境,

  1.安装node.js

  首先,我们需要下载跟安装node.js,对于nodejs我们就不做介绍了,网上一搜一大把,我们这里安装nodejs的目的是用来安装phonegap或者cordova用的,

  下载地址:http://nodejs.org/;

  下载之后进行安装,安装完成之后我们点击开始==>运行==>cmd,打开命令行工具,输入node -v,检测下node.js是否安装成功,安装成功后会显示对应的版本号:

  

  

  2.安装git:

  下载地址:http://git-scm.com/

  在这个界面下载对应版本的安装程序,进行安装,安装完成后,我们在cmd命令工具中执行git --version 检测下git是否安装成功,

  

  3.安装phonegap或者cordova:

  phonegap跟cordova本质上没什么区别,但是在指令执行创建项目上有些差别,为了能更好的演示,我们这里将phonegap跟cordova都安装一下

  打开cmd命令行,windows环境下执行安装phonegap的指令:

[ruby] view plaincopy

  1. npm install -g phonegap

  如果是mac的环境,指令为

[ruby] view plaincopy

  1. sudo npm install -g phonegap

  指令执行之后需要耐心等待一段时间,安装的时间有时会比较长,

  接着我们安装cordova,指令跟上面类似,只是把phonegap替换成了cordova

  windows:  

[ruby] view plaincopy

  1. npm install -g cordova

  mac:

[ruby] view plaincopy

  1. sudo npm install -g cordova

  

  phonegap跟cordova安装完毕后,我们可以用指令验证下是否安装成功

  

  4.phonegap项目创建:

  cordova跟phonegap都安装完毕后,我们开始创建我们的android项目,

  打开cmd命令行工具,cd到你需要创建项目的文件夹内,然后执行以下指令

  phonegap的创建指令: 

[ruby] view plaincopy

  1. phonegap create hello com.example.hello HelloWorld

  hello是指你的项目文件夹名称,

  com.example.hello是你的项目内部包名,packagename

  HelloWorld是你的项目名称,打包出的安装程序安装后显示的名称即这个

  cordova的创建指令: 

[ruby] view plaincopy

  1. cordova create hello com.example.hello HelloWorld

  参数跟phonegap的是一样的

  一般情况下,cordova创建项目的时间可能会稍微长一点

  指令执行完毕后,会在你对应的文件夹下创建一个hello的项目文件,

  进入hello后,目录结构大体如下:

  

  这里需要你去关心的主要就是3个目录,

  platforms:这个目录是用来生成各个移动平台项目的,用指令生成的各个平台的项目文件都将生成在这个目录中

  plugins:这个是添加phonegap插件的目录,你添加的过插件都会在这个目录中进行保存

  www: 这个是用来存放你的web项目的,这里就是指我们的sencha touch项目,打包压缩后的项目丢到这个里面就可以了

  在www目录中,有个config.xml需要配置一下,一般情况下,cordova指令创建的项目的config.xml里没有过多的配置,你可以不用修改,

  不过phonegap的项目存在一些问题,需要手动对config.xml里的配置做一些调整,

  首先要调整下config.xml里的 

  <access origin="*" />

  这里是用来配置网络访问白名单的,只有这里配置了的域名才能进行访问,phonegap 3.5之前的版本默认是127.0.0.1,如果不进行配置,将无法访问外部网络

  

 <access origin="127.0.0.1" />

  还有之前的phonegap版本config.xml中,<preference name="fullscreen" value="true" />的设置跟android的AndroidManifest.xml中的windowSoftInputMode会有冲突,所以如果需要屏幕能够根据软键盘调整大小需要将fullscreen设置为false;

  将这些设置完毕后,可以根据自己的需要添加需要的phonegap插件,

  5.添加phonegap插件:

  我们在上面的项目的基础上将cmd指令工具cd到hello项目目录下,这个时候就可以通过指令来安装插件了,在这里使用phonegap或者cordova的插件添加指令都一样,不过

官方文档上都是提供的cordova的指令,一般我这也是复制黏贴,所以我们这使用cordova的指令来安装插件,指令格式  

cordova plugin add <插件名称|插件地址>

例如我要添加官方的照相机插件,我可以执行

[ruby] view plaincopy

  1. cordova plugin add org.apache.cordova.camera

也可以将插件名称写成插件地址,这个地址可以是远程git上的地址,也可以是本地插件的地址

cordova plugin add git://git.apache.org/cordova-plugin-camera.git

这个地址是官网的插件地址,大家可以自己根据情况使用对应的插件

http://docs.phonegap.com/en/edge/cordova_plugins_pluginapis.md.html#Plugin%20APIs

  6.使用phonegap创建对应的android项目

  接下来我们来创建android平台的项目,使用phonegap的指令的话,我们只需要执行如下指令

  

[ruby] view plaincopy

  1. phonegap build android

  

  如果是使用cordova指令的话需要先添加对应的平台,执行过程如下  

[ruby] view plaincopy

  1. cordova platform add android

  这样就添加了一个android项目,接下来再执行

  

[ruby] view plaincopy

  1. cordova build android

  执行成功后,android项目中的插件才会被添加进项目生效

  7.使用eclipse导入项目,然后将项目导出成apk

  这里使用android官方提供专门用于android开发的eclipse,

  选择File==>import

  然后选择android项目

  

  选择你创建的项目下的platforms并打开,这时就能导入你创建的android项目了,

  最后就是导出成apk的过程了

  具体可以参照下面这篇文章

  http://www.cnblogs.com/tianguook/archive/2012/09/27/2705724.html

  这里我们就不多做描述了,下一讲,我们将介绍如何使用phonegap来自定义自己的插件

  

  

时间: 2024-08-09 17:46:23

sencha touch+phonegap+node.js打包的相关文章

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供

起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便,体温等情况.我想医生们应该也是通过这些数据来分析宝宝是否健康.宝宝刚才出生的几天,吃喝,大小便很频繁,但又不方便记录,很容易遗漏,所以想做一个APP来记录宝宝的一些数据.最近正在学习Sencha Touch+PhoneGap,经过几天的开发,基本成型,目前我的宝宝一些数据都是用这个软件来记录的.同时

Sencha Touch + PhoneGap + Html5 在Android下的性能优化

最近用Sencha Touch + PhoneGap 开发了一个产品,在IOS上运行流畅,在Android上切换页面几下就闪屏,字体也变模糊了.看上去是性能问题,GPU渲染,内存,都有可能,这绝对接受不了,得治. 团队开始分析内存,代码架构,折腾了一两周,感觉不明显,用户体验还是较差. 直到有一天,在看其他HTML5的框架中,无意提到了这点,hardwareAccelerated属性,硬件加速执行的所有的绘图操作都是使用GPU在View对象的画布上来进行的.启用硬加速最简单的的方法是对整个应用启

[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cordova-hot-code-push 以下是我对GitHub项目readme的翻译 ---------------------------------------------- Cordova Hot Code Push Plugin 此插件提供了能够使cordova app自己主动更新web内容的功

[Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口

这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序,打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移.例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位.例如以下图: 我的一些研究结果

[Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置

Phonegap/Cordova项目中的config.xml文件,里面配置了下面的内容: <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" /> <icon gap:platform="android" gap:qualifier="mdpi" src=&quo

[Phonegap+Sencha Touch] 移动开发35 让phonegap的webview(安卓)使用chromium内核

应该都知道,phonegap/Cordova(安卓)只是给webapp加了一个壳而已,也就是webapp运行于webview之上. 安卓的webview虽然是webkit内核,但是自带的webview和移动版chrome浏览器的内核还是有区别的.使用过移动版chrome浏览器的人可以明显感觉到性能比自带浏览器(或者webview)要流畅得多. 安卓4.4及以上自带的webview已经是chromium内核了,而4.4以下却不是.所以安卓4.4使用phonegap打包的apk的时候,会感觉比4.4

[Phonegap+Sencha Touch] 移动开发16 安卓webview中,input输入框不触发backspace回退键事件的解决办法

可以用安卓手机浏览器打开 http://javascript.info/tutorial/keyboard-events#test-stand-test-stand 测试看看. Android 4.2自带浏览器和webview的测试结果(其他版本没试过,估计4.X都是这样): 当input有内容的时候,点击软键盘回退键(keyCode=8),是有keyEvents事件(keyup keydown)触发的:当input是空的时候,再点击,就不触发keyEvents了. Chrome浏览器测试结果:

【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析. 虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常