像生活类、办公协同类。javascript
动态添加,下载等。css
一、phonegap 我这里用了旧的版本,可能新版本变化大了。html
建立asset资源文件夹,而后新建index.htmljava
copy 相应的js 文件进来。jquery
建立继承于 DroidGap的activity。android
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要弄一个拍照功能的:web
head标签添加:apache
1
2
3
4
5
6
点击照相,启动手机照相机,拍照后,显示拍照的照片到id为myPhoto的img标签上。json
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/2022010615360899886.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 }
二、使用js webview 交互:api
看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 交互了。