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 交互了。