使用jsBridge实现H5与原生App交互

var u = navigator.userAgent;
window.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
window.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端window.jsbridge = function (callback) {if(window.isAndroid){if (window.WebViewJavascriptBridge) {return callback(WebViewJavascriptBridge);} else {document.addEventListener('WebViewJavascriptBridgeReady',function () {callback(WebViewJavascriptBridge)},false);}}if (window.isIOS) {// new ios method// if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }// if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }// window.WKWVJBCallbacks = [callback];// window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)setupWebViewJavascriptBridge(callback);}}//初始化 这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用
function setupWebViewJavascriptBridge(callback) {console.log("setupWebViewJavascriptBridge");if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }console.log("WebViewJavascriptBridge complte");if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }console.log("WVJBCallbacks complte");window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}if (!window.isIOS) {jsbridge(function (bridge) {bridge.init(function (message, responseCallback) {var data = {};responseCallback(data);});})
}/*** @param  {option对象}* method: 调用的方法* data: 传递的参数* callback: 回掉方法* @return {[type]}*/
function bridgeCallHandler(option) {// alert(option.method)jsbridge(function (bridge) {bridge.callHandler(option.method,option.data || {},function (responseData) {if (option.callback) {option.callback(responseData)}});})
}//原生调js
let registerHandler = function (method, callback) {// alert(option.method);jsbridge(function (bridge) {bridge.registerHandler(method,function (data, responseCallback) {if (callback) {callback(data);}responseCallback(data || {});});})
}/*** 传入的option对象格式* {*    method:[String],*    data:[Object],*    callback:[Function]* }*/// js调用原生let callHandler = function (method, data, callback) {bridgeCallHandler({method,data,callback: function (responseData) {if (callback) {callback(responseData);}}})
}export default{registerHandler,callHandler
}//在main.js中引入
import jsBridge from "@/utils/jsBridge"
Vue.prototype.$jsBridge=jsBridge//在页面中使用mounted(){//监听app触发signatureSuccess,进行监听接收数据this.$jsBridge.registerHandler("signatureSuccess", (data)=>{console.log("监听获得的数据", data)})
}methods:{signature(){// showCaBoard: js与原生约定的方法， params: js传递给原生的参数，this.$jsBridge.callHandler("showCaBoard", params, (data)=>{console.log(data)})}}

使用jsBridge实现H5与原生App交互相关推荐

客户端相关知识学习（二）之h5与原生app交互的原理
前言现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
h5 与原生 app 交互的原理
作者:senntyou segmentfault.com/a/1190000016759517 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如 ...
h5与原生app交互的原理
h5 与原生 app 交互的原理现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 ...
混合开发中，H5页面与原生app交互（方法互相调用与传参）
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function ...
[html] H5如何与APP交互？有哪些方式？
[html] H5如何与APP交互?有哪些方式? jsbridge与app通信个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关 ...
H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
H5和原生App的区别
前端常识: 前端:指客户端主要有: 移动端APP(Android.IOS等) Web前端(主要指H5) PC端软件后端:值服务器端. 常见的服务端语言或技术: java Node.js Pytho ...
[vue] 你有使用做过vue与原生app交互吗？说说vue与ap交互的方法
[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法我的做法就是让app在webview把app的 ...
android h5和原生方法调用,H5与原生APP之间的方法互通
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...

使用jsBridge实现H5与原生App交互

使用jsBridge实现H5与原生App交互相关推荐

最新文章

热门文章