Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1322200
  • 博文数量: 932
  • 博客积分: 10
  • 博客等级: 民兵
  • 技术积分: 10208
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-08 12:28
文章分类

全部博文(932)

文章存档

2021年(1)

2020年(134)

2019年(792)

2018年(5)

我的朋友

分类: 架构设计与优化

2019-04-20 22:27:05

在Cordova官网中有这么一张架构图:大家看右下角蓝色的矩形框"Custom Plugin"——自定义插件。意思就是如果您用Cordova打包Mobile应用时,发现您的移动应用里需要使用一些功能,这些功能用普通的JavaScript无法实现,而是需要调用移动平台的一些原生API才能实现时,我们就需要自己实现自定义插件。这些插件通过在特定的移动平台上采用原生开发实现,比如Android Studio中的Java开发,然后再通过JavaScript wrapper的方式暴露给您的Mobile应用。比如您是用Cordova在Android平台上打包生成APK文件,那么您的Mobile代码(JavaScript)里还是不会直接调用您用Java实现的Custom Plugin,而是调用Custom Plugin对应的JavaScript wrapper。

那么JavaScript wrapper本身是JavaScript代码,它是怎么调用到Custom Plugin的Java实现的?本文就会介绍这个细节。

下图是OData离线存储插件(OData Offline Store)的JavaScript实现代码的一部分。下图第232行会调用设备的native API进行离线存储的打开操作:

exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]);

这个exec函数从哪里来?由Cordova框架实现,通过语句 require(‘cordova/exec’)返回。

那么当应用执行到JavaScript代码:exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]); 的时候,程序流是如何从这个JavaScript的exec函数进入到Android平台的原生API执行呢?

打开PackagedApp文件夹里的android子文件夹,有一个JavaScript文件:cordova.js:

里面能看到函数exec的定义和实现:

进而去查看androidExec函数的实现细节:

第938行:var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

第943行的五个参数含义:

success, fail, service, action, args

  • success & fail: JavaScript回调函数,当移动平台上的Java原生API执行完毕后,这个JavaScript回调函数会被调用到。
  • service: 待执行的Java Native API的Java实现类名称。
  • action: 待执行的Java Native API的Java实现类的方法名称。
  • args: JavaScript传递给Java native API的参数数组。

2. 在安卓平台上,JavaScript调用Java的技术实现方式有两种:定义在下图JavaScript代码中的jsToNativeModes对象中:PROMPT和JS_OBJECT。相对应的,Java调用JavaScript有三种模式:POLLING, LOAD_URL和ONLINE_EVENT:

看下面这段Java代码,暴露了一个方法getSomeString给JavaScript端消费:

 import android.app.Activity; import android.os.Bundle; import android.webkit.WebView; public class WebViewGUI extends Activity {

    WebView mWebView; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

        mWebView = new WebView(this);

        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.addJavascriptInterface(new JavaScriptInterface(), "jsinterface");

        mWebView.loadUrl("file:///android_asset/www/index.html");

        setContentView(mWebView);

    } final class JavaScriptInterface {

        JavaScriptInterface() {
        } public String getSomeString() { return "string";

        }

    }

} 

在JavaScript代码里消费上述Java代码暴露的getSomeString方法:


				
			  
阅读(723) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~