一、我项目中选择DSBridge作为H5页面与Native进行通信

1、原生的webView对js的支持比较生硬，选择DSBridge进行混合开发它支持跨平台，双向调用，仅支持同步调用（符合我的项目需求），简单易用；

2.添加jitpack，在项build.gradle

maven { url "https://jitpack.io" }

3.添加依赖app的build.gradle

implementation 'com.github.wendux:DSBridge-Android:master-SNAPSHOT'

二、接下来就是使用了

1、创建JsApi用来接收H5页面js方法进行参数交互，为了安全起见每个方法前添加 @JavascriptInterface；绑定activity后该页面加载的h5页面js方法名和JsApi中的同名即可实现相互通信；以下代码实例日期选择并上传H5页，自定义js方法参考showApprovalContacts(Object arg, final CompletionHandler handler) ；

public class JsApi {AppContainerActivity activity;public JsApi(AppContainerActivity activity) {this.activity = activity;}@JavascriptInterfacepublic void selectDate(Object msg, final CompletionHandler<String> handler) {final Calendar calendar = Calendar.getInstance();new DatePickerDialog(activity,// 绑定监听器(How the parent is notified that the date is set.)new DatePickerDialog.OnDateSetListener() {@Overridepublic void onDateSet(DatePicker view, final int year,final int monthOfYear, final int dayOfMonth) {new TimePickerDialog(activity, new TimePickerDialog.OnTimeSetListener() {@Overridepublic void onTimeSet(TimePicker view, int hourOfDay, int minute) {calendar.set(year, monthOfYear, dayOfMonth, hourOfDay, minute);JSONObject jsonObject = new JSONObject();try {jsonObject.put("result", "success");jsonObject.put("message", "");jsonObject.put("data", String.valueOf(calendar.getTimeInMillis()));} catch (JSONException e) {e.printStackTrace();}handler.complete(jsonObject.toString());}}, 0, 0, true).show();}}// 设置初始日期, calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH)).show();}@JavascriptInterfacepublic void testNoArgAsyn(Object arg, CompletionHandler<String> handler) {handler.complete("testNoArgAsyn   called [ asyn call]");}//@JavascriptInterface//without @JavascriptInterface annotation can't be calledpublic String testNever(Object arg) throws JSONException {JSONObject jsonObject = (JSONObject) arg;return jsonObject.getString("msg") + "[ never call]";}@JavascriptInterfacepublic void callProgress(Object args, final CompletionHandler<Integer> handler) {new CountDownTimer(11000, 1000) {int i = 10;@Overridepublic void onTick(long millisUntilFinished) {//setProgressData can be called many times util complete be called.handler.setProgressData((i--));}@Overridepublic void onFinish() {//complete the js invocation with data; handler will be invalid when complete is calledhandler.complete(0);}}.start();}//自定义JS Api@JavascriptInterfacepublic void getHost(Object arg, final CompletionHandler<String> handler) {String i = "{\"result\":\"success\",\"message\":\"\",\"data\":\"" + App.getInstance().getIP().substring(8) + "\"}";LogUtils.e(i);handler.complete(i);}@JavascriptInterfacepublic void closeCurPage(Object arg, final CompletionHandler<String> handler) {AppManager.getInstance().finishTopActivity();}@JavascriptInterfacepublic void getExternalStorageState(Object arg, final CompletionHandler<String> handler) {boolean mExternalStorageAvailable = false;boolean mExternalStorageWriteable = false;String state = Environment.getExternalStorageState();if (Environment.MEDIA_MOUNTED.equals(state)) {// We can read and write the mediamExternalStorageAvailable = mExternalStorageWriteable = true;} else if (Environment.MEDIA_MOUNTED_READ_ONLY.equals(state)) {// We can only read the mediamExternalStorageAvailable = true;mExternalStorageWriteable = false;} else {// Something else is wrong. It may be one of many other states, but all we need//  to know is we can neither read nor writemExternalStorageAvailable = mExternalStorageWriteable = false;}handler.complete("{\"result\":\"success\",\"message\":{\"externalStorageAvailable\":" + mExternalStorageAvailable + ",\"externalStorageWriteable\":" + mExternalStorageWriteable + "},\"data\":\"\"}");}//外部存储接口,访问公共路径,删除app后会保留@JavascriptInterfacepublic File writePublicStorage(Object arg, final CompletionHandler<String> handler) {// Get the directory for the user's public pictures directory.LogUtils.wtf(arg);File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), "fileName");LogUtils.wtf(file.getAbsolutePath());if (!file.mkdirs()) {LogUtils.wtf("Directory not created");}return file;}//外部存储接口,访问程序目录下路径,删除app后不会保留@JavascriptInterfacepublic File writePrivateStorage(Object arg, final CompletionHandler<String> handler) {// Get the directory for the app's private pictures directory.File file = new File(App.getInstance().getExternalFilesDir(Environment.DIRECTORY_DOCUMENTS), "fileName");LogUtils.wtf(file.getAbsolutePath());if (!file.mkdirs()) {LogUtils.wtf("Directory not created");}return file;}@JavascriptInterfacepublic void save(Object arg, final CompletionHandler<String> handler) {handler.complete("{\"result\":\"success\",\"message\":\"\",\"data\":\"\"}");}@JavascriptInterfacepublic void showApprovalContacts(Object arg, final CompletionHandler<String> handler) {//接收js传参后操作activity.selectPerson(this, handler);}

2、布局文件使用wendu.dsbridge.DWebView

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" ><wendu.dsbridge.DWebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="match_parent" /></FrameLayout>

3、java代码使用，以下代码支持相册选择，文件上传下载；

public class AppContainerActivity extends BaseActivity {private static final int SET_TITLE = 1;boolean isShowClose = false;private static final String TAG = AppContainerActivity.class.getSimpleName();private static final int TAKE_PHOTO = 1;private static final int CROP_PHOTO = 11;private static final int CHOOSE_PHOTO = 2;private static final int SELECT_PERSON = 3;private static final int SELECT_FILE = 4;private DWebView webView;String appUrl;private String appName;private int REQUEST_PERMISSION = 1;private static final int REQUEST_PERMISSION_FINGER = 2;Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {switch (msg.what) {case SET_TITLE:break;}}};@Overridepublic void widgetClick(View v) {}@Overridepublic void initParms(Bundle parms) {//页面传参接收器}@Overridepublic View bindView() {return null;}@Overridepublic int bindLayout() {return R.layout.activity_app_container;}private ValueCallback<Uri> mUploadMessage;private ValueCallback<Uri[]> mUploadCallbackAboveL;@Overridepublic void initView(View view) {isShowClose = getIntent().getBooleanExtra("isShowClose", false);if (isShowClose)close.setVisibility(View.VISIBLE);elseclose.setVisibility(View.GONE);webView = findViewById(R.id.webView);WaitDialog.show(this, "正在加载").setCanCancel(true);//使webview 支持 上传文件webView.setWebChromeClient(new WebChromeClient() {// For Android < 3.0public void openFileChooser(ValueCallback<Uri> valueCallback) {mUploadMessage = valueCallback;openFileChooserActivity();}// For Android  >= 3.0public void openFileChooser(ValueCallback valueCallback, String acceptType) {mUploadMessage = valueCallback;openFileChooserActivity();}//For Android  >= 4.1public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {mUploadMessage = valueCallback;openFileChooserActivity();}// For Android >= 5.0@Overridepublic boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {mUploadCallbackAboveL = filePathCallback;openFileChooserActivity();return true;}});webView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}@Overridepublic void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {// handler.cancel();// Android默认的处理方式handler.proceed();// 接受所有网站的证书// handleMessage(Message msg);// 进行其他处理}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);WaitDialog.dismiss();}});//webview支持下载webView.setDownloadListener(new DownloadListener() {@Overridepublic void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {Intent intent = new Intent(Intent.ACTION_VIEW);intent.addCategory(Intent.CATEGORY_BROWSABLE);intent.setData(Uri.parse(url));startActivity(intent);}});webView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);jsApi = new JsApi(AppContainerActivity.this);webView.addJavascriptObject(jsApi, null);webView.addJavascriptObject(new HardWareApi(), "hardware");if (!TextUtils.isEmpty(appUrl)) {webView.loadUrl(appUrl);} else {SharedPreferences sharedPreferences = getSharedPreferences(Config.SP_CONFIGURATION, Context.MODE_PRIVATE);String url = sharedPreferences.getString("app_container_url", "");if (TextUtils.isEmpty(url)) {TipDialog.show(AppContainerActivity.this, "提供给第三方的api demo页面", TipDialog.TYPE_WARNING);webView.loadUrl("file:///android_asset/wx.html");} else {webView.loadUrl(url);TipDialog.show(AppContainerActivity.this, "当前网址是:" + url, TipDialog.TYPE_WARNING);}}}private void openFileChooserActivity() {Intent i = new Intent(Intent.ACTION_GET_CONTENT);i.addCategory(Intent.CATEGORY_OPENABLE);i.setType("*/*");try {startActivityForResult(Intent.createChooser(i, "File Chooser"), SELECT_FILE);} catch (android.content.ActivityNotFoundException ex) {Toast.makeText(this, "请安装文件管理器", Toast.LENGTH_SHORT).show();}}@Overridepublic void setListener() {}@Overridepublic void doBusiness(Context mContext) {}@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);EventBus.getDefault().register(this);StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();StrictMode.setVmPolicy(builder.build());builder.detectFileUriExposure();}@Overrideprotected void onStop() {super.onStop();clearWebViewCache();}@Overrideprotected void onDestroy() {super.onDestroy();EventBus.getDefault().unregister(this);}/*** 清除WebView缓存*/public void clearWebViewCache() {webView.clearFormData();webView.clearHistory();webView.clearMatches();webView.clearSslPreferences();}Uri imageUri;JsApi jsApi;HardWareApi hardWareApi;CompletionHandler fingerHandler;public void fingerAuth(HardWareApi hardWareApi, CompletionHandler handler) {this.hardWareApi = hardWareApi;this.fingerHandler = handler;Fingerprint fingerprint = new Fingerprint(AppContainerActivity.this, hardWareApi, fingerHandler);}public void takePhoto(HardWareApi hardWareApi) {this.hardWareApi = hardWareApi;File outputImage = new File(Environment.getExternalStorageDirectory(),"tempImage" + ".jpg");try {if (outputImage.exists()) {outputImage.delete();}outputImage.createNewFile();} catch (IOException e) {e.printStackTrace();}imageUri = Uri.fromFile(outputImage);ActivityCompat.requestPermissions(this,new String[]{Manifest.permission.CAMERA, Manifest.permission.WRITE_EXTERNAL_STORAGE},REQUEST_PERMISSION);}public void openAlbum() {Intent intent = new Intent("android.intent.action.GET_CONTENT");intent.setType("image/*");startActivityForResult(intent, CHOOSE_PHOTO);}@TargetApi(19)private void handleImageOnKitKat(Intent data) {String imagePath = null;Uri uri = data.getData();if ("content".equalsIgnoreCase(uri.getScheme())) {//如果是content类型的Uri，则使用普通方法处理imagePath = getImagePath(uri, null);Log.i(imagePath, "相册选择3");} else if ("file".equalsIgnoreCase(uri.getScheme())) {//如果是file类型的Uri，直接获取图片路径即可imagePath = uri.getPath();Log.i(imagePath, "相册选择4");} else if (DocumentsContract.isDocumentUri(this, uri)) {//如果是document类型的Uri,则通过document id处理String docId = DocumentsContract.getDocumentId(uri);if ("com.android.providers.media.document".equals(uri.getAuthority())) {String id = docId.split(":")[1];//解析出数字格式的idString selection = MediaStore.Images.Media._ID + "=" + id;imagePath = getImagePath(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,selection);Log.i(imagePath, "相册选择1");} else if ("com.android.providers.downloads.documents".equals(uri.getAuthority())) {Uri contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), Long.valueOf(docId));imagePath = getImagePath(contentUri, null);Log.i(imagePath, "相册选择2");}}displayImage(imagePath);}private void handleImageBeforeKitKat(Intent data) {Uri uri = data.getData();String imagePath = getImagePath(uri, null);Log.i(imagePath, "相册选择5");displayImage(imagePath);}private String getImagePath(Uri uri, String selection) {String path = null;//通过uri和selection来获取真实的图片路径Cursor cursor = getContentResolver().query(uri, null, selection, null, null);if (cursor != null) {if (cursor.moveToFirst()) {path = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));}cursor.close();}Log.i(path, "相册选择");return path;}private void displayImage(String imagePath) {LogUtils.wtf(imagePath);if (imagePath != null) {Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
//            picture.setImageBitmap(bitmap);} else {Toast.makeText(this, "failed to get image", Toast.LENGTH_LONG).show();}}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {if (resultCode == RESULT_OK)switch (requestCode) {case TAKE_PHOTO:Intent intent = new Intent("com.android.camera.action.CROP");intent.setDataAndType(imageUri, "image/*");intent.putExtra("scale", true);intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);startActivityForResult(intent, CROP_PHOTO); // 启动裁剪程序break;case CROP_PHOTO:try {final Bitmap bitmap = BitmapFactory.decodeStream(getContentResolver().openInputStream(imageUri));hardWareApi.uploadImg(bitmap);} catch (FileNotFoundException e) {e.printStackTrace();}break;case CHOOSE_PHOTO://判断手机系统版本号if (Build.VERSION.SDK_INT >= 19) {//4.4及以上系统使用该方法处理图片handleImageOnKitKat(data);} else {//4.4以下系统使用该方法处理图片handleImageBeforeKitKat(data);}break;case SELECT_PERSON:break;case SELECT_FILE:if (null == mUploadMessage && null == mUploadCallbackAboveL) return;Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();if (mUploadCallbackAboveL != null) {onActivityResultAboveL(requestCode, resultCode, data);} else if (mUploadMessage != null) {mUploadMessage.onReceiveValue(result);mUploadMessage = null;}break;}else {switch (requestCode) {case SELECT_FILE:if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {Uri result = null;mUploadMessage.onReceiveValue(result);} else {Uri[] results = null;mUploadCallbackAboveL.onReceiveValue(results);}mUploadMessage = null;mUploadCallbackAboveL = null;break;}}}// 4. 选择内容回调到Html页面@TargetApi(Build.VERSION_CODES.LOLLIPOP)private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {if (requestCode != SELECT_FILE || mUploadCallbackAboveL == null)return;Uri[] results = null;if (resultCode == Activity.RESULT_OK) {if (intent != null) {String dataString = intent.getDataString();ClipData clipData = intent.getClipData();if (clipData != null) {results = new Uri[clipData.getItemCount()];for (int i = 0; i < clipData.getItemCount(); i++) {ClipData.Item item = clipData.getItemAt(i);results[i] = item.getUri();}}if (dataString != null)results = new Uri[]{Uri.parse(dataString)};}}mUploadCallbackAboveL.onReceiveValue(results);mUploadCallbackAboveL = null;}@Overridepublic void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions,@NonNull int[] grantResults) {if (requestCode == REQUEST_PERMISSION) {if (grantResults[0] == PackageManager.PERMISSION_GRANTED) {Intent intent = new Intent("android.media.action.IMAGE_CAPTURE");intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);startActivityForResult(intent, TAKE_PHOTO);} elseToast.makeText(AppContainerActivity.this, "请开启拍照权限", Toast.LENGTH_LONG).show();}@Overridepublic void onBackPressed() {if (webView.canGoBack())webView.goBack();elsesuper.onBackPressed();}@Overrideprotected void onNewIntent(Intent intent) {super.onNewIntent(intent);Bundle bundle = intent.getExtras();if (bundle != null) {appUrl = bundle.getString("appUrl", "");}webView.loadUrl(appUrl);}CompletionHandler<String> selectHandler;public void selectPerson(JsApi jsApi, CompletionHandler<String> handler) {this.selectHandler = handler;}
}

4、h5页面调用Java API

（1）初始化dsBridge

 var dsBridge=require("dsBridge");

（2）调用API

 dsBridge.call(str,{msg:"str"})