android phonegap webview,android 从 phonegap 到 js webview 交互

像生活类、办公协同类。

动态添加，下载等。

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

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

copy 相应的js 文件进来。

创建继承于　DroidGap的activity。

1 importandroid.os.Bundle;2 importorg.apache.cordova.DroidGap;3

4 /**

5 * Created by Zico_Chan on 2016/11/23.6 */

7 public class HybirdActivity extendsDroidGap {8

9 /**

10 * Called when the activity is first created.11 */

12 @Override13 public voidonCreate(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 functiongetPhoto(){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 functiononSuccess(imageData) {11 //alert("camer successful!!!");

12 //alert(imageData);

13 var newnote=$("#newNote");14 var src=imageData;15 //var src="https://img-blog.csdnimg.cn/2022010620042462626.jpeg" + 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 functiononFail(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 @Override3 public voidonCreate(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(newgetPhoto.OnGetPhotoListener() {18 @Override19 public void onGetPhoto(finalString imgPath) {20 //调用js中方法

21 mWebView.post(newRunnable() {22 @Override23 public voidrun() {24 mWebView.loadUrl("javascript:initFrame('" + imgPath + "')");25 }26 });27

28 }29

30 @Override31 public void showContancts(finalString json) {32 //调用JS中的方法

33 mWebView.post(newRunnable() {34 @Override35 public voidrun() {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.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 交互了。