跨平台PhoneGap技术架构五:PhoneGap类间调用关系及Js和Java交互原理
前面几篇文章主要讲解了PhoneGap几个重要的类,如果看到这里,相信大家对PhoneGap也有了一定的了解。
PhoneGap类间调用关系
在讲解PhoneGap的交互原理之前,我们把原来的内容串讲一下,以加深理解。请看下面的类间调用关系图:
在我们创建Android应用程序的时候,一般会先创建一个Activity。PhoneGap应用程序创建时Activity应继承DroidGap类。当Activity启动时,系统会调用onCreate方法。在DroidGap类中,复写了Activity的onCreate方法。
在DroidGap的onCreate方法中,对Window做了一些设置,并设置了WebView的布局。最后设置了音量硬件控制功能。代码如下:
1 /** 2 * Called when the activity is first created. 3 * 4 * @param savedInstanceState 5 */ 6 @SuppressWarnings("deprecation") 7 @Override 8 public void onCreate(Bundle savedInstanceState) { 9 //preferences = new PreferenceSet(); 10 11 LOG.d(TAG, "DroidGap.onCreate()"); 12 super.onCreate(savedInstanceState); 13 14 if(!this.getBooleanProperty("showTitle", false)) 15 { 16 getWindow().requestFeature(Window.FEATURE_NO_TITLE); 17 } 18 19 if(this.getBooleanProperty("setFullscreen", false)) 20 { 21 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 22 WindowManager.LayoutParams.FLAG_FULLSCREEN); 23 } 24 else 25 { 26 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, 27 WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); 28 } 29 // This builds the view. We could probably get away with NOT having a LinearLayout, but I like having a bucket! 30 Display display = getWindowManager().getDefaultDisplay(); 31 int width = display.getWidth(); 32 int height = display.getHeight(); 33 34 root = new LinearLayoutSoftKeyboardDetect(this, width, height); 35 root.setOrientation(LinearLayout.VERTICAL); 36 root.setBackgroundColor(this.backgroundColor); 37 root.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 38 ViewGroup.LayoutParams.MATCH_PARENT, 0.0F)); 39 40 // Setup the hardware volume controls to handle volume control 41 setVolumeControlStream(AudioManager.STREAM_MUSIC); 42 }
然后PhoneGap应用程序调用了loadUrl方法,
super.loadUrl("file:///android_asset/www/index.html");
之前说过,loadUrl可以看作是整个应用程序的入口函数。
loadUrl函数会调用Init方法,创建一个CordovaWebView,并设置了CordovaWebViewClient和CordovaChromeClient。
在实例化CordovaWebView时,对PluginManager做了初始化工作,而在CordovaWebViewClient的onPageStarted方法里初始化并启动CallbackServer。
CordovaWebViewClient的onJsPrompt方法截获Web端的JavaScript消息,调用PluginManager的exce方法执行插件。
插件执行成功后调用CallbackServer的sendJavaScript方法给Js端返回回调Js代码。
这就是PhoneGap类间的调用关系,整个PhoneGap工作流程大概也就清晰了。
Js和Java交互原理
-
js↔java同步过程
同步处理:
从js的prompt到WebChromeClient的onJSPrompt是一个跨线程的同步调用过程,如上图:
在cordova.js文件中,可以找到如下代码:
var r = prompt(JSON.stringify(args), "gap:"+JSON.stringify([service, action, callbackId, true]));
这句prompt便实现了本地代码调用。本地代码通过WebChromeClient拦截onJsPrompt回调,利用gap:开头标志得知是调用本地插件请求,然后向PluginManager转发该请求。PluginManager将会根据参数来查找并执行具体插件方法。
js层通过prompt向本地发送poll请求,本地将从CallBackServer中拿出下一个回调返回给js层。
-
js↔java异步过程
异步处理:
为了区别异步和同步。若prompt返回的是空字符串,那么将认为是异步调用。此时PhoneGap会在JS层保留回调函数,待本地层向CallBackServer发送回调后进行执行。
本地层怎么区别哪个回调?PhoneGap对此的处理十分简单,在cordova.js中定义了一个callbackId的自增种子,并将每个callBack插入callBacks中去。无论同步异步,每个plugin调用都将得到一个流水号码作为回调标识。这个回调标识在prompt阶段便传递到了本地层。当本地层的Plugin异步结束后,便可以根据该callbackId找到回调。并向CallBackServer发送回调通知。