PhoneGap：你应该知道的12件事

关于PhoneGap的12件事

Mark Dong 董龙飞
Adobe Developer Evangelist

weibo.com/donglongfei
weibo.com/javascriptdev

1. PhoneGap是什么？

Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

访问移动设备本地特性

phoneGap plugin

打包HTML5 App, 部署到多种平台


2. PhoneGap不是什么？


JavaScript
Framework

IDE Tools


3. 起源


!  始于2008年旧金山的
iPhoneDevCamp

!  “bridging the gap
between the web and the
iphone SDK”

! PhoneGap : it’s like AIR
for the Iphone (2008-9-18,
Nitobi blog)


4 . PhoneGap在不同平台的本地特性


5. 开源？


CallBack Cordova
更名为Apache


http://incubator.apache.org/cordova/

6. 打包


针对不同平台的IDE + SDK


PhoneGap Build
Compile in the cloud


8. 什么是PhoneGap


JS Native


JavaScript/CSS/HTML5 Not Web Tech

Native Web Control
FFI Plugins


Native Web Control

Browser ： full functions
Chrome removed
No top bar

FFI

Foreign Function Interface


PhoneGap App

Web App Mobile OS Hardware
FFI PhoneGap Plugins OS API

JavaScript Native API 传感器

CSS 图形处理
浏览器 Native Web View OS API
HTML 网络

…

PhoneGap架构

PhoneGap
Web App Native API PhoneGap Plug-ins
HTML5+JavaScript+CSS3 摄像头运动传感器设备信息

指南针 GPS 通知
HTML5 PhoneGap
API JS API
网络状态 …

Native Web View 定制plugin

(WebView、UIWebView…)

OS API OS API

Mobile OS

Native Web Control

全功能浏览器
没有边框

public class CirclesActivity
extends DroidGap {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/
www/circles.html");
}
}

Native Wrapper with PhoneGap

android activity

HTML5项目

phonegap.jar

plugins.xml

AndroidManifest.xml


public class callsPGPlugin extends Plugin { Java定制plugin
// List Actions
public static final String ACTION="list";
@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {

PluginResult result=null;

if(ACTION.equals(action)){
CallLogAI callLogAI = new CallLogAI(ctx);
JSONObject callsHistory=callLogAI.fetchCallLogs(null);
Log.d("RESULT=", callsHistory.toString());
result=new PluginResult(Status.OK,callsHistory);
}else{
result=new PluginResult(Status.INVALID_ACTION);
Log.d("CallsPlugin","Invalidate action:" + action);
}
return result;
}
}

注册plugin
<?xml version="1.0" encoding="UTF-8"?>
<plugins>
<plugin name="App" value="com.phonegap.App"/>
<plugin name="Geolocation" value="com.phonegap.GeoBroker"/>
<plugin name="Device" value="com.phonegap.Device"/>
……
<plugin name="Temperature" value="com.phonegap.TempListener"/>
<plugin name="FileTransfer" value="com.phonegap.FileTransfer"/>
<plugin name="Capture" value="com.phonegap.Capture"/>

<plugin name="CallsHistoryPlugin"
value="com.mark.phonegap.plugin.callsPGPlugin" />

</plugins>

In JavaScript


Javascript接口
var CallsListing=function(){};

CallsListing.prototype.list=function(successCallback,failureCallback){
return PhoneGap.exec(successCallback,
failureCallback,
'CallsHistoryPlugin',
'list',['test']
);
};

PhoneGap.addConstructor(function(){
PhoneGap.addPlugin("callsListing",new CallsListing);
});

Javascript接口
使用者调用plugin

window.plugins.callsListing.list(
function(r){printResult(r)},
function(e){console.log(e)}
);

10. 如何实现JS与本地API的交互

addJavaScriptInterface

WebChromClient： onJsPrompt

CallbackServer：XmlHttpRequestsever

From Native to JS

WebChromClient：覆盖onJsPrompt

From JS to Native

CallbackServer：XmlHttpRequestsever

Javascript
CallsListing.prototype.list=function(successCallback,fai
lureCallback){
failureCallback,
'list',['test’]);
};

PhoneGap.exec = function(success, fail, service, action, args) {
…
var r = prompt(JSON.stringify(args), "gap:"+JSON.stringify([service,
action, callbackId, true]));
…

Java
Droidgap.java

public boolean onJsPrompt(WebView view, String url, String message, String
defaultValue, JsPromptResult result) {
……

String r = pluginManager.exec(service, action, callbackId, message, async);

……
}

Pluginmanager.java

public String exec(final String service, final String action, final String callbackId, final
String jsonArgs, final boolean async) {
……
cr = plugin.execute(action, args, callbackId);
ctx.sendJavascript(cr.toErrorCallbackString(callbackId));

……
}

Pluginmanager.java Java
ctx.sendJavascript(cr.toErrorCallbackString(callbackId));

CallbackServer.java ： XHR server

PhoneGap.Channel.join(function() {

// Start listening for XHR callbacks
setTimeout(function() { Javascript
if (PhoneGap.UsePolling) {
PhoneGap.JSCallbackPolling();
}
…

实例化UIWebView

webView =[[UIWebView alloc] initWithFrame:webViewBounds];

JS到Native的通讯

document.location = “gap://Class.method/args”

Native到JS的通讯

UIWebView.stringByEvaluatingJavaScriptFromString


Weinre配置为Server，
开发者使用Chrome/
Safari开发工具来远程调
试移动应用


PhoneGap Debug Server


1.X (2011)

Performance , W3C compatible ，易用性

2.0 (2012)

Calendar, Message ，Bluetooth， Audio/Video

Mark Dong
Developer Evangelist
dong@adobe.com
weibo.com/donglongfei
weibo.com/javascriptdev

PhoneGap：你应该知道的12件事

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a PhoneGap：你应该知道的12件事

Similar a PhoneGap：你应该知道的12件事 (20)

Último

Último (20)

PhoneGap：你应该知道的12件事