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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PhoneGap:你应该知道的12件事

6,259

Published on

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,259
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 关于PhoneGap的12件事 Mark Dong 董龙飞 Adobe Developer Evangelist weibo.com/donglongfei weibo.com/javascriptdev
  • 2. 1. PhoneGap是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 3. 访问移动设备本地特性 phoneGap plugin 打包HTML5 App, 部署到多种平台Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 4. 2. PhoneGap不是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 5. JavaScriptFramework IDE Tools Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 6. 3. 起源Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 7. !  始于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
  • 8. 4 . PhoneGap在不同平台的本地特性 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 9. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 10. 5. 开源?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 11. CallBack Cordova更名为Apache Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 12. http://incubator.apache.org/cordova/
  • 13. 6. 打包Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 14. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 15. 针对不同平台的IDE + SDKAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 16. PhoneGap Build Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 17. 7. 访问本地功能
  • 18. 8. 什么是PhoneGapAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 19. JS Native Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 20. JavaScript/CSS/HTML5 Not Web Tech Native Web Control FFI Plugins Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 21. Native Web Control Browser : full functions Chrome removed No top bar
  • 22. FFI Foreign Function InterfaceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 23. PhoneGap AppWeb App Mobile OS Hardware FFI PhoneGap Plugins OS APIJavaScript Native API 传感器 CSS 图形处理 浏览器 Native Web View OS API HTML 网络 …
  • 24. 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
  • 25. Native Web Control 全功能浏览器 没有边框
  • 26. 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
  • 27. 9. plugin
  • 28. android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 29. In Java
  • 30. 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
  • 31. 注册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
  • 32. In JavaScriptAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 33. 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);});
  • 34. Javascript接口使用者调用plugin window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} );
  • 35. 小结
  • 36. 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) {
  • 37. 10. 如何实现JS与本地API的交互
  • 38. Android
  • 39. addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
  • 40. From Native to JS WebChromClient: 覆盖onJsPromptFrom JS to Native CallbackServer:XmlHttpRequestsever
  • 41. 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
  • 42. 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)); ……}
  • 43. 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(); }…
  • 44. IOS
  • 45. 实例化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
  • 46. 11. debug
  • 47. wein re
  • 48. Weinre配置为Server,开发者使用Chrome/Safari开发工具来远程调试移动应用 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 49. <script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script> Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 50. PhoneGap Debug Server Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  • 51. 12. 路线图
  • 52. 1.X (2011) Performance , W3C compatible ,易用性2.0 (2012) Calendar, Message ,Bluetooth, Audio/Video
  • 53. Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev

×