原生app与uniapp开发的H5交互，H5写法

最新推荐文章于 2025-04-27 13:47:00 发布

lucky_1012

最新推荐文章于 2025-04-27 13:47:00 发布

阅读量1.3k

点赞数 1

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/2301_76697302/article/details/131849795

版权

文章介绍了如何在H5中通过用户代理检测来调用iOS和Android原生应用的方法，如iOS使用window.webkit.messageHandlers.toAppLogin.postMessage()，Android使用window.android.toAppLogin()。同时，展示了在原生App的App.vue文件中定义并绑定到window上的方法，以便原生App可以调用H5的功能，如调用toBillInfo方法后显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、h5调用原生app方法

1、先判断是安卓系统还是ios系统

2、调用原生app方法 toAppLogin 为调用原生app的方法

1) ios环境：window.webkit.messageHandlers.toAppLogin.postMessage();

2）安卓环境：window.android.toAppLogin();

// 1、判断是ios环境还是安卓环境
// 2、toAppLogin 为调用原生app的方法
var ua = window.navigator.userAgent.toLowerCase();
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
	//ios环境
	try {
		throw window.webkit.messageHandlers.toAppLogin.postMessage();
	} catch (err) {
		uni.showToast({
		    title: "错误",
			icon: 'none'
		})
	}
} else if (navigator.userAgent.match(/android/i)) {
	//安卓环境
	try {
		throw window.android.toAppLogin();
	} catch (err) {
		uni.showToast({
		    title: "错误",
			icon: 'none'
		})
	}
}

二、原生app调用h5方法

在App.vue文件里面定义一个绑定在window身上的方法

mounted() {
    // toBillInfo 原生app调用 h5的方法
	window['toBillInfo'] = (orderNo) => {
        // 原生app调用h5方法之后，需要执行的操作
		uni.showToast({
			title: "渲染调了toBillInfo方法" + orderNo,
			icon: 'none'
		})
	};
	console.log("window全局方法");
},

注意：如果需要在某一个页面进行操作调用，写法一样