vue h5 项目中与 app 安卓 or ios 进行交互方式， h5与app交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue h5 项目中与 app 安卓 or ios 进行交互方式， h5与app交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue h5 项目中与 app 安卓 or ios 进行交互方式， h5与app交互

vue写h5项目嵌入app,app与h5进行交互,vue,h5,vue.js,android,ios,交互,html
前端同学可以加我一起交流一起进步

案例描述：需求是混合开发中，H5页面与原生app安卓或者ios交互（包括，调用app的方法，或者app调用 h5中定义的方法）从而实现交互

项目场景：开发帮助中心页面，帮助中心页面采用 h5页面 开发，页面中有两个按钮需要和app进行交互

vue写h5项目嵌入app,app与h5进行交互,vue,h5,vue.js,android,ios,交互,html

第一步，先定义公共方法：

H5页面和原生app进行互相传参数调用需要使用 WebViewJavascriptBridge，下面是项目中的封装appBridge.js的公共方法 示例为vue代码

ios 的公共方法


		//新建 appBridge.js
		//ios 公共方法
		function AppJavascriptBridgeIOS(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)
		}

安卓的公共方法

				//动态创建script的方法
				//安卓 公共方法
				function AppJavascriptBridgeANDROID(callback) {
				  if (window.WebViewJavascriptBridge) {
				    callback(WebViewJavascriptBridge);
				  } else {
				    document.addEventListener(
				      "WebViewJavascriptBridgeReady",
				      function () {
				        callback(WebViewJavascriptBridge);
				      },
				      false
				    );
				  }
				}

抛出方法 app和h5的交互分为 h5 定义好方法进行注册，app来调用

export default {
  //H5调用 app方法
  callhandler(name, data, callback) {
    //调用iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeIOS(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
    //调用Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeANDROID(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
  },
  //app调用H5定义的方法
  registerhandler(name, callback) {
    //iOS调用h5的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeIOS(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
    //安卓调用h5定义的方法
    if (/(Android)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeANDROID(function (bridge) {
        bridge.init(function (message, responseCallback) {
          if (responseCallback) {
            // responseCallback(data);
          }
        });
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }

  },

}

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

import AppBridge from "@/utils/appBridge.js" //此路径根据实际AppBridge.js路径进行填写
Vue.prototype.$bridge = AppBridge

实际使用

	methods: {
	// h5调用原生方法，appWebViewBridge为原生app定义的方法名。action为h5传递给原生app的参数，可以为多个。data为原生app传递给h5参数
    go() {
      const that = this;
      that.$bridge.callhandler(
        "appWebViewBridge",
        { action: "are you ok?" },
        data => {
          that.app = data;

          // 处理返回数据
        }
      );
    },
    // h5注册方法，供app调用该方法
    iosToH5(){
	  
	},
  },

  mounted() {
    // 如果是app调用h5方法，iosToH5是methods中定义的方法名。
    const that = this;
    that.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
      // data是原生app传递给h5的参数
      that.Appdata = data;
    });
  }