web页面与原生android通信,调用原生android方法

注册初始化方法JsBridge

javascript 复制代码
//JS注册事件监听
function connectWebViewJavascriptBridge(callback) {
	if (window.WebViewJavascriptBridge) {
		callback(WebViewJavascriptBridge)
	} else {
		document.addEventListener(
			'WebViewJavascriptBridgeReady',
			function() {
				callback(WebViewJavascriptBridge)
			},
			false
		);
	}
}

//Android主动发送消息给JS:无方法名
connectWebViewJavascriptBridge(function(bridge) {
	//初始化
	bridge.init(function(message, responseCallback) {
		var data = {
			'Javascript Responds': '我是JS的回复消息'
		};

		responseCallback(data);
	});
	//Android->签名图片
	bridge.registerHandler("test1", function(data, responseCallback) {
		var responseData = "666";
		responseCallback(responseData);
	});
})

export default {
	registerHandler: function(name, fun) {
		connectWebViewJavascriptBridge(function(jsbridge) {
			//Android调用js方法:functionInJs方法名称需要保持一致 ,并返回给Android通知
			jsbridge.registerHandler(name, function(data, responseCallback) {
				responseCallback(fun(data));
			});
		})
	},
	callHandler: function(name, data, fun) {
		connectWebViewJavascriptBridge(function(jsbridge) {
			//JS调用Android方法:接收Android传递过来的数据,并做处理
			jsbridge.callHandler(name, data, function(data) {
				fun(data);
			});
		})
	}
}

在main.js中引入注册

javascript 复制代码
import JsBridge from '@/static/JsBridge/JsBridge.js';
Vue.prototype.$jsbridge = JsBridge

使用实例

javascript 复制代码
//registerHandler监听事件
this.$jsbridge.registerHandler('test1', (data) => {
				alert(data)
			})

//callHandler触发事件
this.$jsbridge.callHandler('test2', {
					'data': "123"
				}, (data) => {
					alert(data)
				})

注意!!!监听事件需要在初始化方法JsBridge中注册才能使用

相关推荐
糕冷小美n41 分钟前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥1 小时前
Technical Report 2024
java·服务器·前端
程序员陆业聪1 小时前
2025 年客户端技术盘点与 2026 年技术展望
android
沐墨染1 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion1 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks1 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼2 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴2 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
xhBruce2 小时前
Android USB 存储 冷启动(开机自动插着 U 盘)场景
android·usb·vold
CheungChunChiu2 小时前
在 Android 14 上使用 scrcpy 的投屏问题与解决方案
android·adb