像生活类、办公协同类。

动态添加，下载等。

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

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

copy 相应的js 文件进来。

创建继承于　DroidGap的activity。

1 import android.os.Bundle; 2 import org.apache.cordova.DroidGap; 3  4 /** 5  * Created by Zico_Chan on 2016/11/23. 6  */ 7 public class HybirdActivity extends DroidGap { 8  9     /**10      * Called when the activity is first created.11      */12     @Override13     public void onCreate(Bundle savedInstanceState) {14         super.onCreate(savedInstanceState);15         super.setIntegerProperty("splashscreen", R.drawable.welcome);16         //html文件加载慢，设置超时时间17         super.setIntegerProperty("loadUrlTimeoutValue", 120000);18         super.loadUrl("file:///android_asset/www/index.html");19     }20 }

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

head标签添加：

1 2 
     3 4 5 6 

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

1 function getPhoto(){ 2  3     if(!navigator.camera) { 4         alert("camera can not use"); 5         return; 6     } 7  8     navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); 9 10     function onSuccess(imageData) {11         //alert("camer successful!!!");12         //alert(imageData);13         var newnote=$("#newNote");14         var src=imageData;15         //var src="data:image/jpeg;base64," + imageData;16         var img=$("#myPhoto");17         img.attr("src",src);18         img.css("display","block");19         //var img="";20         //newnote.append(img);21         newnote.listview("refresh");22 23     }24 25     function onFail(message) {26        alert(' carema Failed because: ' + message);27     }28 }

2、使用js webview 交互：

看phonegap 插件 源码知道：

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

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

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

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

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

1 @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" }) 2     @Override 3     public void onCreate(Bundle savedInstanceState) { 4         super.onCreate(savedInstanceState); 5         setContentView(R.layout.activity_js); 6  7         mWebView = (WebView) findViewById(R.id.webview_js); 8  9         //设置编码10         mWebView.getSettings().setDefaultTextEncodingName("utf-8");11         //支持js12         mWebView.getSettings().setJavaScriptEnabled(true);13         //设置背景颜色 透明14         mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));15         //设置本地调用对象及其接口16         getPhoto mPhoto = new getPhoto(this);17         mPhoto.setOnGetPhotoListener(new getPhoto.OnGetPhotoListener() {18             @Override19             public void onGetPhoto(final String imgPath) {20                 // 调用js中方法21                 mWebView.post(new Runnable() {22                     @Override23                     public void run() {24                         mWebView.loadUrl("javascript:initFrame('" + imgPath + "')");25                     }26                 });27 28             }29 30             @Override31             public void showContancts(final String json) {32                 // 调用JS中的方法33                 mWebView.post(new Runnable() {34                     @Override35                     public void run() {36                         mWebView.loadUrl("javascript:show('" + json + "')");37                     }38                 });39 40             }41         });42         mWebView.addJavascriptInterface(mPhoto, "photo");43         //载入js44         mWebView.loadUrl("file:///android_asset/jsindex.html");45     }

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

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

1 @android.webkit.JavascriptInterface

具体方法逻辑以及回调：

1 public class getPhoto { 2  3     Context mContxt; 4  5     public getPhoto(Context mContxt) { 6         this.mContxt = mContxt; 7     } 8  9     @android.webkit.JavascriptInterface10     public void getPhotoByJs() {11         Toast.makeText(mContxt, "getPhotoByJs", Toast.LENGTH_LONG).show();12         if(mOnGetPhotoListener != null) {13             mOnGetPhotoListener.onGetPhoto("file:///android_asset/icon.png");14         }15     }16 17     //JavaScript调用此方法拨打电话18     @android.webkit.JavascriptInterface19     public void call(String phone) {20         Toast.makeText(mContxt, phone, Toast.LENGTH_LONG).show();21 //        startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));22     }23 24     //Html调用此方法传递数据25     @android.webkit.JavascriptInterface26     public void showcontacts() {27         String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]";28         Toast.makeText(mContxt, "showcontacts", Toast.LENGTH_LONG).show();29         if(mOnGetPhotoListener != null) {30             mOnGetPhotoListener.showContancts(json);31         }32     }33 34     private OnGetPhotoListener mOnGetPhotoListener;35 36     public void setOnGetPhotoListener(OnGetPhotoListener _OnGetPhotoListener){37         mOnGetPhotoListener = _OnGetPhotoListener;38     }39 40     interface OnGetPhotoListener{41         void onGetPhoto(String imgPath);42         void showContancts(String json);43     }44 }

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

1 照片

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