HTML与Android、IOS的JS调用

前言

近期研究了H5界面与移动端（Android，IOS）的交互方案，记录一下以飨众友。学习小组QQ群: 193765960。

本篇重点介绍H5调用移动端接口的通用方案，其他方案或者移动端调用H5接口的方法请自行研究。

版权归作者所有，如有转发，请注明文章出处：https://xiaodanchen.github.io/archives/

应用场景：

• 移动端使用H5自带的标题栏，通过点击H5标题栏返回按钮回退或者跳转到移动端的某个原生界面。
• 点击H5的电话号码，本地拨打电话

  解决方案（Android & IOS）

  1，定义接口

  public class AndroidJsInterface {
  
  	private Context mContext;
  
  	public AndroidJsInterface(Context activity) {
  		mContext = activity;
  	}
  
  	@JavascriptInterface//系统sdk 版本在v4.2以上时，必须加这个注解（安全性）
  	public void fun1() {
  		//点击H5的某个区域，实现APP的跳转（退出WebpageActivity）
  		Intent intent = new Intent(mContext, MainActivity.class);
  		mContext.startActivity(intent);
  	}
  }

2，activity处理

• 方式一：向webview注册js接口–存在安全隐患（适用于Android，IOS是否适用待确认）

  //Android端主要代码
  WebSettings webSettings = mWebView.getSettings();
  webSettings.setJavaScriptEnabled(true);
  mWebView.addJavascriptInterface(new AndroidJsInterface(context), "android");//注意：这里一定要让别名的首字母为小写，因为JS端实际调用中会将别名处理成小写。

//JS端主要代码
jsFun = new function(){
  if(app.isIOS()){
    ......
  }else if(app.isAndroid()){
    android.fun1();//别名首字母默认会被处理成小写，所以为了避免调用出错，最好统一采用小写字母
  }
}

//Html端主要代码
......(通过href或者onclick调用js的jsFun)

• 方式二：h5重定向URL，移动端捕获（Android，IOS均可）

  //Android端主要代码
  mWebView.setWebViewClient(new WebViewClient() {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if (url.length() != 0 && url.startsWith("app:")) {//和后台约定好移动端js交互接口重定向URL的前缀：例如“app:”
              // 获得方法名
              String methodName = url.substring("app:".length());
              // 通过方法名反射获得方法
              Method method;
              Class<?> c;
              try {
                  c = Class.forName("com.base.web.AndroidJsInterface");
                  Constructor<?>[] constructors = c.getDeclaredConstructors();
                  Constructor<?> constructor = null;
                  for (int i = 0; i < constructors.length; i++) {
                      constructor = constructors[i];
                      if (constructor.getGenericParameterTypes().length == 0)
                      break;
                  }
                  constructor.setAccessible(true);
                  Object clazz = constructor.newInstance(context);
  
                  method = clazz.getClass().getDeclaredMethod(methodName);
                  // 执行该方法
                  if(null != method){
                      method.setAccessible(true);
                      method.invoke(clazz);
                  }
              } catch (Exception e) {
                  e.printStackTrace();
              }
  
          }else if(url.length() != 0 && url.startsWith("tel:")){
          	//打电话：H5直接重定向href=“tel:13120003456”
              Intent intent = new Intent(Intent.ACTION_DIAL,
              Uri.parse(url));
              startActivity(intent);
          }else{
          	view.loadUrl(url);
          }
          return true;
      }
  });

//JS端主要代码
jsFun1 = new function(){
  window.location.href="app:fun1";//"app:"是和服务器约定好的前缀，fun1是移动端定义的名为fun1的js回调接口
}

jsFun2 = new function(){
  window.location.href="app:fun2";
}

//Html端主要代码
......(通过href或者onclick调用js的jsFun*)

需要注意的几点：
1，采用方式一，一定要注意别名的首字母小写（是不是需要全部小写没有验证）
2，小米系列的手机可能对webview和Android的交互存在一些问题，如果发现交互怎么都不起作用，试试把APP卸载后重新安装（有缓存）。
3，使用方式二，一定要注意使用反射时，要调用反射类的构造函数实例化，否则会报告一堆的异常。

H5中使用第三方API,比如百度的导航

Android中需要做一些特别的设置才可以

//h5 调用第三方的API：百度导航
webSettings.setDomStorageEnabled(true);