android 從 phonegap 到 js webview 交互

像生活類、辦公協同類。

動態添加，下載等。

一、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     @Override
13     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 <script type="text/javascript" src="http://tm.arcgisonline.cn:8038/arcgis_js_v27/library/2.7/jsapicompact/"></script>
2 <link href="jquery-mobile/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
3 <script src="jquery-mobile/jquery-1.6.4.js" type="text/javascript"></script>
4 <script src="jquery-mobile/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
5 <script type="text/javascript" src="js/index.js"></script>
6 <script src="js/cordova-1.5.0.js" type="text/javascript"></script>

點擊照相，啓動手機照相機，拍照後，顯示拍照的照片到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="<img src="+src+"/>";
20         //newnote.append(img);
21         newnote.listview("refresh");
22 
23     }
24 
25     function onFail(message) {
26        alert(' carema Failed because: ' + message);
27     }
28 }

二、使用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         //支持js
12         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             @Override
19             public void onGetPhoto(final String imgPath) {
20                 // 調用js中方法
21                 mWebView.post(new Runnable() {
22                     @Override
23                     public void run() {
24                         mWebView.loadUrl("javascript:initFrame('" + imgPath + "')");
25                     }
26                 });
27 
28             }
29 
30             @Override
31             public void showContancts(final String json) {
32                 // 調用JS中的方法
33                 mWebView.post(new Runnable() {
34                     @Override
35                     public void run() {
36                         mWebView.loadUrl("javascript:show('" + json + "')");
37                     }
38                 });
39 
40             }
41         });
42         mWebView.addJavascriptInterface(mPhoto, "photo");
43         //載入js
44         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.JavascriptInterface
10     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.JavascriptInterface
19     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.JavascriptInterface
26     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 <a href='javascript:photo.getPhotoByJs()'>照片</a>

而後這樣就走通了，js 跟 webview 交互了。