android 从 phonegap 到 js webview 交互

像生活类、办公协同类。

动态添加，下载等。

1、phonegap 我这里用了旧的版本，可能新版本变化大了。

创建asset资源文件夹，然后新建index.html

copy 相应的js 文件进来。

创建继承于　DroidGap的activity。

import android.os.Bundle;
import org.apache.cordova.DroidGap;

/**
 * Created by Zico_Chan on 2016/11/23.
 */
public class HybirdActivity extends DroidGap {

    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.welcome);
        //html文件加载慢，设置超时时间
        super.setIntegerProperty("loadUrlTimeoutValue", 120000);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

如果我首页html要弄一个拍照功能的：

head标签添加：

<script type="text/javascript" src="http://tm.arcgisonline.cn:8038/arcgis_js_v27/library/2.7/jsapicompact/"></script>
<link href="jquery-mobile/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/cordova-1.5.0.js" type="text/javascript"></script>

点击照相，启动手机照相机，拍照后，显示拍照的照片到id为myPhoto的img标签上。

function getPhoto(){

    if(!navigator.camera) {
        alert("camera can not use");
        return;
    }

    navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });

    function onSuccess(imageData) {
        //alert("camer successful!!!");
        //alert(imageData);
        var newnote=$("#newNote");
        var src=imageData;
        //var src="data:image/jpeg;base64," + imageData;
        var img=$("#myPhoto");
        img.attr("src",src);
        img.css("display","block");
        //var img="<img src="+src+"/>";
        //newnote.append(img);
        newnote.listview("refresh");

    }

    function onFail(message) {
       alert(' carema Failed because: ' + message);
    }
}

2、使用js webview 交互：

看phonegap 插件 源码知道：

这边也是通过startActivity 去启动获取图片的。

所以我们也可以简单做个回调，来实现简单的交互。

在初始化webview的方法上，添加注解：

@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })

getpPhoto类中接口OnGetPhotoListener，作为简单的回调。

@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js);

        mWebView = (WebView) findViewById(R.id.webview_js);

        //设置编码
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        //支持js
        mWebView.getSettings().setJavaScriptEnabled(true);
        //设置背景颜色 透明
        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
        //设置本地调用对象及其接口
        getPhoto mPhoto = new getPhoto(this);
        mPhoto.setOnGetPhotoListener(new getPhoto.OnGetPhotoListener() {
            @Override
            public void onGetPhoto(final String imgPath) {
                // 调用js中方法
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript:initFrame('" + imgPath + "')");
                    }
                });

            }

            @Override
            public void showContancts(final String json) {
                // 调用JS中的方法
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript:show('" + json + "')");
                    }
                });

            }
        });
        mWebView.addJavascriptInterface(mPhoto, "photo");
        //载入js
        mWebView.loadUrl("file:///android_asset/jsindex.html");
    }

添加js webview 的本地 调用对象：

注：在html调用的方法上，添加注解：

@android.webkit.JavascriptInterface

具体方法逻辑以及回调：

public class getPhoto {

    Context mContxt;

    public getPhoto(Context mContxt) {
        this.mContxt = mContxt;
    }

    @android.webkit.JavascriptInterface
    public void getPhotoByJs() {
        Toast.makeText(mContxt, "getPhotoByJs", Toast.LENGTH_LONG).show();
        if(mOnGetPhotoListener != null) {
            mOnGetPhotoListener.onGetPhoto("file:///android_asset/icon.png");
        }
    }

    //JavaScript调用此方法拨打电话
    @android.webkit.JavascriptInterface
    public void call(String phone) {
        Toast.makeText(mContxt, phone, Toast.LENGTH_LONG).show();
//        startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));
    }

    //Html调用此方法传递数据
    @android.webkit.JavascriptInterface
    public void showcontacts() {
        String json = "[{"name":"zxx", "amount":"9999999", "phone":"18600012345"}]";
        Toast.makeText(mContxt, "showcontacts", Toast.LENGTH_LONG).show();
        if(mOnGetPhotoListener != null) {
            mOnGetPhotoListener.showContancts(json);
        }
    }

    private OnGetPhotoListener mOnGetPhotoListener;

    public void setOnGetPhotoListener(OnGetPhotoListener _OnGetPhotoListener){
        mOnGetPhotoListener = _OnGetPhotoListener;
    }

    interface OnGetPhotoListener{
        void onGetPhoto(String imgPath);
        void showContancts(String json);
    }
}

html 中 添加 a标签，作为照相按钮。

<a href='javascript:photo.getPhotoByJs()'>照片</a>

然后这样就走通了，js 跟 webview 交互了。