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的指令:
npm install -g phonegap
如果是mac的环境,指令为
sudo npm install -g phonegap
指令执行之后需要耐心等待一段时间,安装的时间有时会比较长,
接着我们安装cordova,指令跟上面类似,只是把phonegap替换成了cordova
windows:
npm install -g cordova
mac:
sudo npm install -g cordova
phonegap跟cordova安装完毕后,我们可以用指令验证下是否安装成功
4.phonegap项目创建:
cordova跟phonegap都安装完毕后,我们开始创建我们的android项目,
打开cmd命令行工具,cd到你需要创建项目的文件夹内,然后执行以下指令
phonegap的创建指令:
phonegap create hello com.example.hello HelloWorld
hello是指你的项目文件夹名称,
com.example.hello是你的项目内部包名,packagename
HelloWorld是你的项目名称,打包出的安装程序安装后显示的名称即这个
cordova的创建指令:
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 <插件名称|插件地址>
例如我要添加官方的照相机插件,我可以执行
- 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的指令的话,我们只需要执行如下指令
- phonegap build android
如果是使用cordova指令的话需要先添加对应的平台,执行过程如下
- cordova platform add android
这样就添加了一个android项目,接下来再执行
- 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来自定义自己的插件
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), ...
- Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供
起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...
- Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供(转)
起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...
- 第二步 (仅供参考) sencha touch + PhoneGap(cordova 2.9 及其以下版本) 使用 adt eclipse进行打包
首先你得安装一个adt-eclipse 参考资料 http://www.crifan.com/android_eclipse_offline_install_adt/ 然后就可以运行adt-eclip ...
- rollup node.js 打包工具
最近在做一个提供给浏览器和node同时使用的js的url模板工具类,在用什么打包工具上纠结了一段时间,正好有一天在知乎上看到了关于rollup的介绍,在自己试了试之后,就决定用rollup.js来打包 ...
- [Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口
这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile ...
- [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序,转屏时,Ext.Viewport不能触发orientationchange事件的解决的方法
Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...
- 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)
和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
随机推荐
- 让xterm更舒服的设置
转自:http://codespider.is-programmer.com/posts/25247.html X11相关的配置位于/etc/X11下. xterm的配置是/etc/X11/app-d ...
- Android Saving Data(二)
Saving File android读写文件的形式和普通的java IO的方式并没有什么不同,唯一有所限制的是当我们创建文件的时候不能够在像javaSE那样随意了.一般android读写文件有两种形 ...
- LeetCode 【347. Top K Frequent Elements】
Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2 ...
- 使用dispatch_semaphore_t实现event的基本功能
在Windows平台下, 对线程的同步控制,可以有Critical Section,Mutex,Semaphore,Event 等方式. 在IOS平台,使用GCD进行简单的多线程编程时,可以使用dis ...
- 【转】关于启用 HTTPS 的一些经验分享
随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS.HTTPS 通过 TLS 层和证书机制提供了内容加密.身份认证和数据完整性三大功能,可以有效防止数据被查看或篡 ...
- C#连接操作mysql实例
第三方组件:Mysql.Data.dll说明:去官方网站下载Mysql.Data.dll,然后在项目中添加该组件的引用,在代码页里输入using Mysql.Data.MysqlClient,我们就可 ...
- C#使用StackTrace获取方法被谁调用
在方法中扔进这段 System.Diagnostics.Debug.WriteLine()); System.Diagnostics.StackTrace st = new System.Diagno ...
- mybaits中插入到mysql数据库自动返回id主键
在做电商项目时,做到添加商品时,添加商品涉及到图片表和最小销售单元表,这两个表有商品的id,添加图片和最小销售单元,要先返回产品的id.具体做法如下 <insert id="addPr ...
- LeetCode "Largest Divisible Subset" !
Very nice DP problem. The key fact of a mutual-divisible subset: if a new number n, is divisible wit ...
- JSP中动态include和静态include的区别(简版)
动态的include: 用法:<jsp:include page="1.jsp" flush="true" /> 特点:行为元素,可以带参数:先编译 ...