平安口袋银行
移动互联网
PhoneGap论坛新帖
第一季 PhoneGap教程+Cordova视频教程+JqueryMobile视屏教程(免费)
第二季phonegap教程+Cordova教程+JqMObi+SenchaTouch视频教程(赞助)
第三季phonegap教程+Cordova教程+Ionic教程+Angularjs视频教程(部分赞助)
PhoneGap教程/Cordova教程
jqmobi教程/Jquery Mobile教程/Sencha Touch
phonegap案例/Cordova案例
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered byCordova&APP调试
这篇文章的所讲的方法，不仅适用于Cordova(Phonegap)开发的APP，对于所有包含webview的APP调试都适用。
准备工具：
android手机（系统必须4.4或以上）
Chrome浏览器
Safari浏览器
1、安装APK到手机
手机用数据线连接电脑后可以使用命令行：cordova run
android、或是把生成的android项目导入到开发工具(Eclipse、Android
Studio)中然后用工具运行安装。（必须是debug包，部分手机版本开启能开启全局调试的用release包也是可以调试的）
2、手机上打开应用，截图如下：
3、打开Chrome浏览器，地址栏输入：chrome://inspect回车，如果你的手机是4.4+的版本就会出现你打开的应用，点击inpect进入调试界面。截图如下：
4、点击inspect前最好先开翻墙工具，不然你得到的就是一片空白，问我为什么(因为众所周知的原因)。还好只是第一次打开需要翻墙，不用每一次。翻墙打开后截图如下，这个界面我就不多说什么，熟悉前端的人比我要清楚百倍。
1、iOS手机打开设置开启Web检查器，设置-&Safari-&高级-&打开web检查器。
&Mac打开safari浏览器开启开发菜单，打开浏览器点左上Safari-&偏好设置-&高级-&显示“开发”菜单
2、用cordova生成项目后导入xcode，运行项目安装应用到iOS手机打开。
&Mac打开safari浏览器点击开发就能看到你的手机。截图如下：
3、点击index.html打开调试页面，基本和chrome那边差不多，只是没法看到手机画面，这个影响也不大。
好吧就说这样了。。我感觉应该是挺详细的了。
（转帖都注明出处哦。。。。。）
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。玩转cordova-android100学习网
玩转cordova
话说HTML5和原生代码这个口水仗打了很久了。打口水仗的人多半都是喷口水而已。这其中的奥妙真正干活的人才知道。如果说HTML5能完全代替原生，那要原生干什么？如果说HTML5完全
话说HTML5和原生代码这个口水仗打了很久了。打口水仗的人多半都是喷口水而已。这其中的奥妙真正干活的人才知道。如果说HTML5能完全代替原生，那要原生干什么？如果说HTML5完全不可用，那这么多牛逼的网站是打脸的么？所以说呢，webview在android和ios就是个控件，你就好好的当他控件来用。webview是一个有完整UI系统和生态系统的控件。用好了那是好处多多的。
好，那么问题来了。作为一个控件，是少不了和原生代码交互的。但是常见的用法似乎只是用来打开一个网页。这个勉强算是 "原生代码 call js", 还是一次性的。但是"js call 原生"要怎么玩呢？我曾经研究过一番，在前人的基础上写了个工具/fangj/WebViewJavascriptBridge 但是不太完善。那么有现成的cordova是要用起来的。
在说cordova之前。我大概说一下webview和原生怎么交互的：
Android-&JS : loadUrl
JS-&Android: JavascriptInterface
IOS IOS-&JS: loadUrl
JS-&IOS: loadUrl, IOS拦截自定义schema
下面正式开始讲：
主要内容都在文档里
http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface
http://cordova.apache.org/docs/en/4.0.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide
http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_plugin.md.html
http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_plugin.md.html
用命令行工具生成cordova工程
sudo npm install -g cordova
cordova create hello com.example.hello HelloWorld
cordova platform add ios
cordova platform add android
cordova build
此时android和ios的工程已经生成，可以用你的IDE打开运行了。
开始写插件。先看JS里怎么调用：
cordova.exec(function(winParam) {},
function(error) {},
"service",
["firstArgument", "secondArgument", 42, false]);
几个参数分别是：成功回调。失败回调。要调用的对象(service)。要调用的方法(action)。方法的参数[...]。
在IOS里怎么写插件
#import "CDVPlugin.h"
@interface Echo : CDVPlugin
- (void)echo:(CDVInvokedUrlCommand*)
#import "Echo.h"
@implementation Echo
- (void)echo:(CDVInvokedUrlCommand*)command
CDVPluginResult* pluginResult =
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] & 0) {
NSLog(@"ios received %@",echo);
NSLog(@"ios send OK");
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
NSLog(@"ios send fail");
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
[mandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
还有很关键的。在ios工程目录下找到config.xml，加上这么一句
feature name是JS中调用的插件名，ios-package的value是IOS中对应的类名。
Android 中插件怎么玩
package org.apache.cordova.
import android.util.L
import org.apache.cordova.CallbackC
import org.apache.cordova.CordovaP
import org.json.JSONA
import org.json.JSONE
* Created by fangjian on 14-11-28.
public class Echo extends CordovaPlugin {
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("echo")) {
String message = args.getString(0);
this.echo(message, callbackContext);
private void echo(String message, CallbackContext callbackContext) {
if (message != null && message.length() & 0) {
Log.d("cordova plugin", "android sent OK");
callbackContext.success(message);
Log.d("cordova plugin", "android sent Fail");
callbackContext.error("Expected one non-empty string argument.");
同样，需要找到Android工程目录下的config.xml，加上这么一句
android-package是android对应的类名。
现在可以玩起来了。 对于ios.可以打开safari进入开发模式进行调试 对于chrome。可以打开chrome,进入chrome://inspect/ 进行调试。详见：.cn/article/130135.cn/article/130379初学指南：利用Meteor进行移动开发
发表于 15:06|
作者David Turnbull
摘要：在本教程中，只涉及到用Meteor创建一个移动友好应用的基础知识，不过希望这些足够吸引你进一步去挖掘。Meteor是一个非常有趣的框架，而Cordova对于那些不感兴趣于学习其他技术的人来说提供了一个简洁的选择。
如果你是一个Web开发者，想要转向iOS和Android，或许你不需要学习一种新的语言或全新的概念，只需要对Meteor有一个基本的了解，然后对移动开发细节有一个基础的了解。第一步：为移动开发准备Meteor显然，第一步你需要在你的电脑上安装Meteor，如果你的电脑里没有的话，你可以在终端中输入这个命令：curl &a href="/"&/&/a& | sh你需要对Meteor有一个基本的了解，你可以去了解，这里也推荐一本书给初学者，。为iOS开发时，在你的系统上需要安装一个Xcode副本。这个可以从Mac应用商店。第二步：为一个项目添加移动支持Cordova包含在Meteor中，但是必须手动添加到任何特定的Meteor项目中。这避免了每个项目的膨胀，因为有的项目可能不需要。可以通过添加特定的平台添加支持Cordova。例如，为了支持iOS，在终端输入以下命令：meteor add-platform ios支持Android时，在终端输入以下命令：meteor add-platform android当添加支持Android时，系统会提示你安装相关的系统里没有安装的软件。第三步：创建一个移动配置文件在项目文件夹中，创建一个mobile-config.js文件。在该文件中，我们可以为应用的移动部分设置一组配置选项，包括：元数据，比如应用名称和描述；预设，比如应用的默认定向；特定Cordova插件的额外预设。Meteor官方文档中提供了一个：// This section sets up some basic app metadata,
// the entire section is optional.
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: '',
website: ''
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/icon-60@2x.png',
// ... more screen sizes and platforms ...
App.launchScreens({
'iphone': 'splash/Default~iphone.png',
'iphone_2x': 'splash/Default@2x~iphone.png',
// ... more screen sizes and platforms ...
// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '',
API_KEY: 'supersecretapikey'
});你也可以看下config.xml文件，。第四步：编写Cordova-only代码通过Meteor创建移动应用，你可以一次编写大多数功能。大多数代码将跨平台工作。但是并不是所有的代码都应该跨平台的，同样我们可以通过isClient和isServer条件语句控制某些代码是否运行于客户端或服务端，当然也包括isCordova条件语句：if(Meteor.isCordova){
// code goes here
}上面的代码块将只运行于Cordova移动环境下。第五步：为你的应用添加移动包目前有三种官方的Meteor包可以使你更容易的为应用添加移动特性：：在移动设备或台式电脑上拍照；：根据设备的GPS追踪用户位置；：当应用的一个更新有效时可以通知用户，并支持他们重新查看更改信息。此外，非官方的包可以在atmospherejs上找到，。上面提供的链接可以帮助你在没有进一步解释的情况下了解这些包的使用方法。这里我们用Camera包作为例子。我们要做的是创建一个按钮，在点击的时候可以打开用户设备（Android、iOS或桌面）上的相机并允许他们拍照。如果他们拍照了，数据将会返回到应用，届时我们便可以对照片作出处理。首先将Camera包添加到项目中：meteor add mdg:camera然后删除你项目中默认的HTML文件目录，并用以下内容代替：&head&
&title&Camera Example&/title&
{{& takePhoto}}
&template name="takePhoto"&
&p&&input type="button" class="capture" value="Take Photo"&&/p&
&/template&接下来创建一个包含“Take Photo”按钮的接口。在默认的JavaScript文件中，删除当前的内容并替换成下面所显示的内容：if(Meteor.isClient){
Template.takePhoto.events({
'click .capture': function(){
console.log("Button clicked.");
}由于创建了这个事件，每当单机按钮时，一个消息将会出现在JavaScript控制台。在这个事件中，写下这一行：MeteorCamera.getPicture();这是内置于Camera包中的函数，使我们能够利用用户的硬件来捕捉照片，它接受两个参数：选项：如设置图片的高度和宽度；一个回调函数：用于检索照片的数据。就目前这个我们将无法通过任何选项：MeteorCamera.getPicture({});但是我们将通过一个回调函数作为第二个参数：MeteorCamera.getPicture({}, function(error, data){
// something goes here
});因为这个回调函数，我们现在可以检索任何捕获到的照片数据的错误。为了看到这些，使用log声明：MeteorCamera.getPicture({}, function(error, data){
console.log(data);
});在一个允许网络摄像头启动的电脑上测试应用，注意到在你捕捉到一个照片后，一个URL出现在控制台。我们可以使用这个URL将图片嵌入到接口中。首先，将图像数据存储到一个session中：MeteorCamera.getPicture({}, function(error, data){
Session.set('photo', data);
});然后为“takePhoto”模板创建一个helpers块：Template.takePhoto.helpers({
'photo': function(){
/// code goes here
});我们需要返回“photo”session的值：Template.takePhoto.helpers({
'photo': function(){
return Session.get('photo');
});接下来在“takePhoto”模块中，简单的引用该helper：&template name="takePhoto"&
&p&&input type="button" class="capture" value="Take Photo"&&/p&
&p&{{photo}}&/p&
&/template&现在当我们捕获一张照片时，会有一个类似于字符串的出现在内部接口。而字符串将通过以下方式完美工作：&template name="takePhoto"&
&p&&input type="button" class="capture" value="Take Photo"&&/p&
&p&&img src="{{photo}}"&&/p&
&/template&当然，我们只是在电脑上执行了这段代码，而我们真正想要的是在一个移动应用中去执行它。第六步：测试应用你可以通过在命令行输入以下命令让应用运行于iOS模拟器中：meteor run ios注意到照片功能实际上不会工作于iOS模拟器中，它将工作于手机本身、Android模拟器以及桌面浏览器中。使用以下命令在Android模拟器中运行应用：meteor run android如果你没有使用meteor add-platform android命令，你会安装一些额外的软件，不过不用担心，终端将指导你完成这一过程。结论在本教程中，只涉及到用Meteor创建一个移动友好应用的基础知识，不过希望这些足够吸引你进一步去挖掘。Meteor是一个非常有趣的框架，在许多情况下构建移动应用可能更有意义，而Cordova对于那些不感兴趣于学习其他技术的人来说提供了一个简洁的选择。（编译：陈明）原文来自：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章查看: 597|回复: 6
请问在eclipse写的安卓cordova，如何导入xcode？
主题帖子积分
新手上路, 积分 43, 距离下一级还需 7 积分
新手上路, 积分 43, 距离下一级还需 7 积分
我下载了一份安卓的代码，如何导入xcode，变成ios也可以用的ipa？
主题帖子积分
高级会员, 积分 548, 距离下一级还需 452 积分
高级会员, 积分 548, 距离下一级还需 452 积分
在 mac电脑上面首先安装xcode，
其次命令安装cordova&&
再次安装成功后去对应目录找到 xcode识别的文件，点开就可以运行
主题帖子积分
新手上路, 积分 43, 距离下一级还需 7 积分
新手上路, 积分 43, 距离下一级还需 7 积分
在 mac电脑上面首先安装xcode，
其次命令安装cordova&&
我的xcode是6.4的，已经用命令行给platform添加了ios，也build了cordova项目。我的问题是怎么把用eclipse写好的cordova安卓代码导入到xcode的项目里？难道是把安卓源码的assets/www文件夹的内容复制到mac下的ios/www的文件夹下吗？
主题帖子积分
新手上路, 积分 43, 距离下一级还需 7 积分
新手上路, 积分 43, 距离下一级还需 7 积分
但我这样试过，用xcode的模拟器运行起来，只是显示device is ready。
主题帖子积分
注册会员, 积分 68, 距离下一级还需 132 积分
注册会员, 积分 68, 距离下一级还需 132 积分
仔细浏览下ios中的www和android的www里面的文件代码有什么不同像cordova.js里面的代码好像是不一样的，再按需copy。
主题帖子积分
新手上路, 积分 43, 距离下一级还需 7 积分
新手上路, 积分 43, 距离下一级还需 7 积分
仔细浏览下ios中的www和android的www里面的文件代码有什么不同像cordova.js里面的代码好像是不一样的，再按 ...
我经过实践，确实需要更改cordova.js。而且开发过程中，发现不少安卓的插件也是不可用的。连微信分享的插件也有细节差别。太感谢各位大侠的帮助了。
主题帖子积分
注册会员, 积分 68, 距离下一级还需 132 积分
注册会员, 积分 68, 距离下一级还需 132 积分
我经过实践，确实需要更改cordova.js。而且开发过程中，发现不少安卓的插件也是不可用的。连微信分享的插 ...
能解决就好，大家共同进步
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered by}