vue h5 項(xiàng)目中與 app 安卓 or ios 進(jìn)行交互 方式， h5與app交互

前端同學(xué)可以加我一起交流一起進(jìn)步

案例描述：需求是 混合開發(fā)中，H5頁面與原生app安卓或者ios交互（包括，調(diào)用app的方法，或者app調(diào)用 h5中定義的方法）從而實(shí)現(xiàn)交互

項(xiàng)目場景：開發(fā)幫助中心頁面，幫助中心頁面采用 h5頁面 開發(fā) ，頁面中有兩個按鈕需要和app進(jìn)行交互

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

H5頁面 和 原生app進(jìn)行互相傳參數(shù)調(diào)用需要使用 WebViewJavascriptBridge，下面是項(xiàng)目中的封裝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)
		}

安卓 的公共方法

				//動態(tài)創(chuàng)建script的方法
				//安卓 公共方法
				function AppJavascriptBridgeANDROID(callback) {
				  if (window.WebViewJavascriptBridge) {
				    callback(WebViewJavascriptBridge);
				  } else {
				    document.addEventListener(
				      "WebViewJavascriptBridgeReady",
				      function () {
				        callback(WebViewJavascriptBridge);
				      },
				      false
				    );
				  }
				}

拋出方法 app和h5的交互分為 h5 定義好方法 進(jìn)行注冊 ，app來調(diào)用

export default {
  //H5調(diào)用 app方法
  callhandler(name, data, callback) {
    //調(diào)用iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeIOS(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
    //調(diào)用Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeANDROID(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
  },
  //app調(diào)用H5定義的方法
  registerhandler(name, callback) {
    //iOS調(diào)用h5的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      AppJavascriptBridgeIOS(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
    //安卓調(diào)用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中進(jìn)行配置

import AppBridge from "@/utils/appBridge.js" //此路徑根據(jù)實(shí)際AppBridge.js路徑進(jìn)行填寫
Vue.prototype.$bridge = AppBridge

實(shí)際使用

	methods: {
	// h5調(diào)用原生方法，appWebViewBridge為原生app定義的方法名。action為h5傳遞給原生app的參數(shù)，可以為多個。data為原生app傳遞給h5參數(shù)
    go() {
      const that = this;
      that.$bridge.callhandler(
        "appWebViewBridge",
        { action: "are you ok?" },
        data => {
          that.app = data;

          // 處理返回?cái)?shù)據(jù)
        }
      );
    },
    // h5注冊方法，供app調(diào)用該方法
    iosToH5(){
	  
	},
  },

  mounted() {
    // 如果是app調(diào)用h5方法，iosToH5是methods中定義的方法名。
    const that = this;
    that.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
      // data是原生app傳遞給h5的參數(shù)
      that.Appdata = data;
    });
  }

如果對你有用不要忘記點(diǎn)贊收藏哦！
https://github.com/mebjas/html5-qrcode文章來源地址http://www.zghlxwxcb.cn/news/detail-678322.html

到了這里，關(guān)于vue h5 項(xiàng)目中與 app 安卓 or ios 進(jìn)行交互 方式， h5與app交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！