WebViewJavascriptBridge H5交互

需要在对方的app中嵌入h5页面。这套业务流程大体总结如下

首先约定好,app首次跳转过来是的方式,比如url外加一个token,然后h5页面拿到这个token再去通过接口校验身份的合法性。这中间呢,还可以加上相互协商好的加解密方式、以及token验证一次就失效等,进一步确保安全性。打通两者的用户态等

接着就是相互调用了,借助WebViewJavascriptBridge,注册到window对象上,从而达到相互调用的效果。h5这边涉及到的大体如下

<script language="javascript">
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // alert('是否是Android:'+isAndroid);
      // alert('是否是iOS:'+isiOS);
      function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge)
        } else {
          document.addEventListener(
            'WebViewJavascriptBridgeReady'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Android 应用中和 H5 交互主要有两种方式: 1. WebView 加载 H5 页面,通过 JavaScriptInterface 实现双向交互。 Android 应用可以使用 WebView 组件加载 H5 页面,同时通过在 Java 代码中添加 JavaScriptInterface 接口,使得 H5 页面能够调用 Android 应用中的 Java 方法,实现双向交互。 示例代码: Java: ```java public class MyJavaScriptInterface { @JavascriptInterface public void showToast(String message) { Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show(); } } webView.addJavascriptInterface(new MyJavaScriptInterface(), "Android"); ``` JavaScript: ```javascript Android.showToast("Hello, Android!"); ``` 2. 使用 Android 应用提供的 WebViewJavascriptBridge 库实现双向交互WebViewJavascriptBridge 是一个优秀的 WebView 通信库,它可以在 Android 和 H5 之间建立一座通信桥梁,实现双向通信。 示例代码: Java: ```java WebViewJavascriptBridge webViewJavascriptBridge = new WebViewJavascriptBridge(webView, new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { Log.i("TAG", "handler = " + data); function.onCallBack("Android 收到 H5 的消息啦!"); } }); webViewJavascriptBridge.send("Android 发送消息给 H5 啦!", new CallBackFunction() { @Override public void onCallBack(String data) { Log.i("TAG", "onCallBack = " + data); } }); ``` JavaScript: ```javascript window.WebViewJavascriptBridge.callHandler('test', 'H5 发送消息给 Android 啦!', function(responseData) { console.log(responseData); }); ``` 以上是两种比较常见的 Android 应用和 H5 交互的方式,可以根据项目需求选择合适的方式进行开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值