移动端 h5和原生交互的方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了移动端 h5和原生交互的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、h5传递给原生WebView的数据协议

传递的是个json字符串：

{
    "id": "random_value",
    "action": "action_name",
    "callback": "function_name",  // optional
    "data": {...}  // optional
}

id：这次操作的id，回调时会再传回来。因为交互有可能是异步的，对同一个接口调用多次时，回调时以id来区分是哪一次。id由js自己定义保证唯一即可，简单的做法是使用Math.random()
action：操作名称，取名应该能反映其意义，例如getIp（获取ip地址）
callback：可选，操作完成后的js回调函数名。不用回调就不传此参数
data：可选，某些操作才需要。app会解析data中的数据使用。

例如：h5调用原生的网络请求可以这么定义

{
     "id":100,
     "action":"doRequest",
     "callback","onResponse"
     "data":{
         "method":"get",
         "url":"",
         "body":""
         "header":""
         "type":"noCache"
     }
}

二、原生WebView传递给h5的数据协议

原生WebView传给h5的也是个json字符串:

{
    "id": "random_value"
    "action": "action_name",
    "platform": "android"
    "data": {...}  
}

id：与传给WebView的一致。
action：与传给WebView的一致。如果各种操作都用同一个回调函数，则可以此区分是哪个操作。
platform：平台
data：操作结果对应的数据，是原生提供给h5的具体数据

三、h5通过js的调用方式

注入的对象在android是全局变量，也即是window的成员变量，android这边会提供一个统一的调用方法入口，叫postMessage，注入的对象名叫nativeCaller，调用方式如下：

function callNative(object) {
  if (window.nativeCaller) {
    window.nativeCaller.postMessage(JSON.stringify(object))
  } else {
    alert("此功能需要在原生WebView中使用！")
  }
}

四、Android端的处理方式

创建BaseJsHandler的子类，例如获取原生设备信息的处理

public class DeviceInfoHandler extends BaseJsHandler {

    @Override
    public String action() {
        return "getDeviceInfo"; //对应h5请求数据中action
    }
    //data是h5请求数据的data节点,callback是h5的回调函数方法名
    @Override
    protected JSONObject handleMessage(JSONObject data, String callback) {
        //这里返回的json数据最终会被包装到data节点内,该过程是框架完成的,无需关心.
        JSONObject toJson = new JSONObject();
        try {
            toJson.put("isWifi", NetworkUtils.isWifiAvailable());
            toJson.put("isNetworkAvailable", NetworkUtils.isNetworkAvailable());
            if (null != AppUtils.getPackageInfo()) {
                toJson.put("packageName", AppUtils.getPackageInfo().packageName);
                toJson.put("versionCode", AppUtils.getPackageInfo().versionCode);
                toJson.put("versionName", AppUtils.getPackageInfo().versionName);
                toJson.put("screenWidth", PixUtils.screenWidth());
                toJson.put("screenHeight", PixUtils.screenHeight());
                toJson.put("statusBarHeight", PixUtils.statusBarHeight());
                toJson.put("deviceId", AppUtils.getDevId());
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return toJson;
    }

}

然后调用WebViewInject类的addHandler方法注入该处理类

WebViewInject.getInstance().addHandler("getDeviceInfo", DeviceInfoHandler.class)

五、app与内嵌h5网页(vue)交互（相互调用js）&&传值

如何传值?
例如：内嵌的h5发请求也token参数，怎么拿到token？

方法一：拼接法。最简单的，app链入h5地址时在后面拼接上所需的参数（token)，可行但不够安全。

方法二：暴露法。也比较简单，就是ios开发和安卓开发将所需的值暴露在window，我们直接window.xxx既可以拿到。（这个比较简便，调用APP底座方法）

方法三：使用的是WebViewJavascriptBridge，转载参考https://blog.csdn.net/weixin_44696379/article/details/103327042

H5与原生app交互，需要WebViewJavascriptBridge，废话不多直接上代码，下面是项目中的封装bridge.js的全部代码（示例代码为vue）

//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  let WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}
 
 
//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge);
  } else {
    document.addEventListener(
      "WebViewJavascriptBridgeReady",
      function () {
        callback(WebViewJavascriptBridge);
      },
      false
    );
  }
}
 
export default {
  //H5调用Native
  callhandler(name, data, callback) {
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeIOS(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
  },
  //Native调用H5
  registerhandler(name, callback) {
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeIOS(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
        bridge.init(function (message, responseCallback) {
          if (responseCallback) {
            // responseCallback(data);
          }
        });
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
  },
}

然后挂载到vue的原型方法上，在main.js中进行如下配置

import Bridge from "@/config/bridge.js" //此路径根据实际bridge.js路径填写
Vue.prototype.$bridge = Bridge

完事儿，下面看一下在实际使用中的用法啊文章来源地址https://www.toymoban.com/news/detail-822377.html

methods: {
    // h5调用原生方法，testWebViewBridge为原生app定义的方法名。action为h5传递给原生app的参数，可以为多个。data为原生app传递给h5参数
    goNative() {
      const vm = this;
      this.$bridge.callhandler(
        "testWebViewBridge",
        { action: "pick me" },
        data => {
          vm.ddd = data;
 
          // 处理返回数据
        }
      );
    },
    // h5注册方法，供app调用
    iosToH5(){
      
    },
  },
 
  mounted() {
    // 原生app调用h5方法，iosToH5是methods中定义的方法名。
    const vm = this;
    this.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
      // data是原生app传递给h5的参数
      vm.native_data = data;
    });
  }

到了这里，关于移动端 h5和原生交互的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！