Cordova下android与javascript的交互

最新推荐文章于 2023-01-06 09:41:20 发布

鹧鸪菜

最新推荐文章于 2023-01-06 09:41:20 发布

阅读量935

点赞数

分类专栏： Nodejs/H5/ES

Nodejs/H5/ES 专栏收录该内容

57 篇文章

订阅专栏

http://blog.youkuaiyun.com/adzcsx2/article/details/52597088

 版权声明：欢迎转载,转载请注明出处-->http://blog.youkuaiyun.com/adzcsx2

目录(?)[+]

最近做了一个功能，公司是用html写的上层，需要调用android自带的语音合成和识别，原以为是直接与html交互，结果没想到上层是用cordova的框架写的，研究一天把cordova与android的交互实现了，现在记录一下实现流程
由于是第一次用到Cordova，所以把它的搭建android项目和实现流程一并写上。

一、用Cordova搭建一个android工程。

下载nodejs，并配置环境变量(默认)
打开https://nodejs.org/en/,下载nodejs并安装，安装好默认是配置好环境变量的(我下载的v4.5.0LTS这个版本)，输入npm如图即装好
安装Cordova npm install -g cordova
创建一个cordova工程 cordova create (工程名) (包名)
将这个工程配置到Android 在这个工程目录下(cd ProjectName) cordova platform add android
AndroidStudio 导入这个项目

ps:我的androidStudio版本是2.1.2，第一次导入特别慢，我导入了20分钟，导入了之后一直卡在gradle加载界面。实际上并不需要，先导入项目，然后打开任务管理器关闭studio之后再重新导入项目，几乎瞬间就好了。

二、js调用android方法

创建一个java类，继承CordovaPlugin。本例是js调用native中的speak方法

public class SpeechOFFSynthesize extends CordovaPlugin{
    public void speak(String content){
        Log.e("SpeechOFFSynthesize",content);
    }

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if("speak".equals(action)){
            //speechSynthesize
            String content = args.getString(0);
            speak(content);
            callbackContext.success("finish");//如果不调用success回调，则js中successCallback不会执行
            return true;
        }
        return false;
    }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

配置插件，在res/xml/config.xml下，value为包名+类名
js调用
html比较简单，就一个button，代码就不贴了。

<script>
    $("#button").click(function(){
         cordova.exec(success, fail, "SpeechOFFSynthesize", "speak", ["haha"]);
    });
    var success = function(message){
            alert("success = "+message);
         };
    var fail = function(message){
            alert("fail = "+message);
         };
</script>
   
   1
2
3
4
5
6
7
8
9
10
11

最后就是调用speak，打出日志了

三、android调用js方法

js:

<script>
    <!-- android调用js方法 -->
    function showAlert(content){
        alert(content);
    }
</script>
   
   1
2
3
4
5
6

android:

public class MainActivity extends CordovaActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(10000);
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            //不能在子线程中执行webview的方法
                            loadUrl("javascript:showAlert(\"你好\")");
                        }
                    });
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }).start();
    }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

由于需要等html完全加载完JS之后，Android的调用才能有效果，否则会没反应，所以我让它在子线程中等待了10秒然后在主线程中去调用js的方法。

四、CordOva加载外网

所有东西弄完了之后，导入到AndroidStudio里面，web文件是放在assets里面，能正常运行，可是放在外网里，却无法加载。
研究了一下发型是因为在CordovaLibs工程里，CordovaBridge文件中，有这样一段。

  else if (defaultValue != null && defaultValue.startsWith("gap_init:")) {
            // Protect against random iframes being able to talk through the bridge.
            // Trust only pages which the app would have been allowed to navigate to anyway.
            if (pluginManager.shouldAllowBridgeAccess(origin)) {
//                 Enable the bridge
                int bridgeMode = Integer.parseInt(defaultValue.substring(9));
                jsMessageQueue.setBridgeMode(bridgeMode);
                // Tell JS the bridge secret.
                int secret = generateBridgeSecret();
                return ""+secret;
            } else {
                Log.e(LOG_TAG, "gap_init called from restricted origin: " + origin);
            }
            return "";
        }
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里它限制了外网的加载，所以允许所有加载即可，代码如下：

 else if (defaultValue != null && defaultValue.startsWith("gap_init:")) {
            // Protect against random iframes being able to talk through the bridge.
            // Trust only pages which the app would have been allowed to navigate to anyway.
//            if (pluginManager.shouldAllowBridgeAccess(origin)) {
                // Enable the bridge
                int bridgeMode = Integer.parseInt(defaultValue.substring(9));
                jsMessageQueue.setBridgeMode(bridgeMode);
                // Tell JS the bridge secret.
                int secret = generateBridgeSecret();
                return ""+secret;
//            } else {
//                Log.e(LOG_TAG, "gap_init called from restricted origin: " + origin);
//            }
//            return "";
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14

由于cordova的加载url是封装在CordovaLib下的ConfigXmlParser，为了防止修改url出现其他问题，所以我是用 EventBus，将url传过去的。

 private void setStartUrl(String src) {
        Pattern schemeRegex = Pattern.compile("^[a-z-]+://");
        Matcher matcher = schemeRegex.matcher(src);
        if (matcher.find()) {
            launchUrl = src;
        } else {
            if (src.charAt(0) == '/') {
                src = src.substring(1);
            }
            launchUrl=  EventBus.getDefault().getStickyEvent(String.class);
        }
   
   1
2
3
4
5
6
7
8
9
10
11