PhoneGap:你应该知道的12件事
Upcoming SlideShare
Loading in...5
×
 

PhoneGap:你应该知道的12件事

on

  • 6,747 views

 

Statistics

Views

Total Views
6,747
Views on SlideShare
3,319
Embed Views
3,428

Actions

Likes
5
Downloads
79
Comments
0

7 Embeds 3,428

http://www.donglongfei.com 3419
http://cache.baidu.com 3
http://cache.baiducontent.com 2
http://webcache.googleusercontent.com 1
http://shouhuile.com 1
http://translate.googleusercontent.com 1
http://c.360webcache.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    PhoneGap:你应该知道的12件事 PhoneGap:你应该知道的12件事 Presentation Transcript

    • 关于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, 部署到多种平台Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 2. PhoneGap不是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • JavaScriptFramework IDE Tools Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 3. 起源Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • !  始于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) Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 4 . PhoneGap在不同平台的本地特性 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 5. 开源?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • CallBack Cordova更名为Apache Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • http://incubator.apache.org/cordova/
    • 6. 打包Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 针对不同平台的IDE + SDKAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • PhoneGap Build Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 7. 访问本地功能
    • 8. 什么是PhoneGapAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • JS Native Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • JavaScript/CSS/HTML5 Not Web Tech Native Web Control FFI Plugins Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • Native Web Control Browser : full functions Chrome removed No top bar
    • FFI Foreign Function InterfaceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • PhoneGap AppWeb App Mobile OS Hardware FFI PhoneGap Plugins OS APIJavaScript 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 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 9. plugin
    • android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • In Java
    • 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; }} Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 注册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> Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • In JavaScriptAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 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)} );
    • 小结
    • window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} ); CallsListing.prototype.list=function(success Callback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, CallsHistoryPlugin, list,[test’]); }; public class callsPGPlugin extends Plugin { // List Actions<plugin name="CallsHistoryPlugin" public static final String ACTION="list";value="com.mark.phonegap.plugin.callsPGPlu @Overridegin" /> public PluginResult execute(String action, JSONArray data, String callbackId) {
    • 10. 如何实现JS与本地API的交互
    • Android
    • addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
    • From Native to JS WebChromClient: 覆盖onJsPromptFrom JS to Native CallbackServer:XmlHttpRequestsever
    • Javascript CallsListing.prototype.list=function(successCallback,fai lureCallback){ return PhoneGap.exec(successCallback, failureCallback, CallsHistoryPlugin, list,[test’]); }; PhoneGap.exec = function(success, fail, service, action, args) { … var r = prompt(JSON.stringify(args), "gap:"+JSON.stringify([service, action, callbackId, true])); … Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 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.javapublic String exec(final String service, final String action, final String callbackId, finalString 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 serverPhoneGap.Channel.join(function() { // Start listening for XHR callbacks setTimeout(function() { Javascript if (PhoneGap.UsePolling) { PhoneGap.JSCallbackPolling(); }…
    • IOS
    • 实例化UIWebView webView =[[UIWebView alloc] initWithFrame:webViewBounds];JS到Native的通讯 document.location = “gap://Class.method/args”Native到JS的通讯 UIWebView.stringByEvaluatingJavaScriptFromString Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 11. debug
    • wein re
    • Weinre配置为Server,开发者使用Chrome/Safari开发工具来远程调试移动应用 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • <script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script> Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • PhoneGap Debug Server Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
    • 12. 路线图
    • 1.X (2011) Performance , W3C compatible ,易用性2.0 (2012) Calendar, Message ,Bluetooth, Audio/Video
    • Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev