原生JS调用接口

Mr.Liu notes

于 2024-03-21 10:47:35 发布

阅读量400

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_57400398/article/details/136901665

版权

文章介绍了如何通过jsBridge.js在H5页面与原生APP之间建立通信桥梁，包括初始化、调用APP方法、注册JS处理函数，以及在Vue.js中集成和使用的示例。

摘要由CSDN通过智能技术生成

jsBridge.js


/* eslint-disable */
function setupWebViewJavascriptBridge(callback) {
	// #ifdef H5
	if (window.WebViewJavascriptBridge) {
		return callback(WebViewJavascriptBridge);
	} else {
		document.addEventListener('WebViewJavascriptBridgeReady', function() {
			callback(WebViewJavascriptBridge)
		}, false);
		if (window.WVJBCallbacks) {
			return window.WVJBCallbacks.push(callback);
		}
		window.WVJBCallbacks = [callback];
		var WVJBIframe = document.createElement('iframe');
		WVJBIframe.style.display = 'none';
		WVJBIframe.src = 'https://__bridge_loaded__';
		document.documentElement.appendChild(WVJBIframe);
		setTimeout(function() {
			document.documentElement.removeChild(WVJBIframe)
		}, 0)
	}
	// #endif


}

//初始化
setupWebViewJavascriptBridge(function(bridge) {
	try {
		bridge.init(function(message, callback) {
			callback(null);
		})
	} catch (e) {}
});

export default {
	//js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
	callhandler: function(method, params, callback) {
		setupWebViewJavascriptBridge(function(bridge) {
			bridge.callHandler(method, params, callback)
		})
	},

	// APP调js方法 （参数分别为:js提供的方法名  回调）
	registerHandler(method, callback) {
		setupWebViewJavascriptBridge((bridge) => {
			bridge.registerHandler(method, (data, responseCallback) => {
				callback(data, responseCallback)
			})
		})
	}
}

在main.js引入

import jsBridge from './utils/jsBridge.js';
Vue.prototype.$jsBridge= jsBridge

页面使用

var params = {

	//请求参数
}
var urlPath = '/app/v2g/startDischarge'  //接口地址
var data = {
	"param": params,
	"path": urlPath
}
this.$jsBridge.callhandler("netWorkRequest",data,res => {
	var res1 = JSON.parse(res)
	
})