当前位置: 首页 > Web前端 > HTML5

H5与原生APP的方法互通

时间:2023-04-05 01:59:50 HTML5

最近在做app端的混合开发,了解了H5和原生app端的方法互通。首先我们定义app端的方法供他们使用(以vue为例)。定义一个方法名VContent(){console.loginmethods("Amethodforapp")},那么我们就可以在生命周期中把这个方法挂载到窗口上,没错,就这么简单mounted(){window.VerifyContent=this.VerifyContent;},这样app端就可以使用我们的方法了。有时候,Android和ios需要区别对待。getDemo(){让你=navigator.userAgent;letisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端if(isiOS){//ios端操作}else{//Android端的操作}},在生命周期也挂上这个方法这些方法支持参数传递,比如在开发过程中,ios支持向我的方法传递多个参数,而Android则需要将所有参数合并为一个object传给我,我们的H5怎么调用app端的方法呢,首先Android端会从app注入一个全局的js对象给h5,然后直接在h5中访问这个对象,也很简单像这样调用H5:`try{window.android.XXX(type,id);}catch(error){console.log("Androiderror");}android就是上图中的名字,后面跟.XXX是Android给你的方法接下来是iostry{window.webkit.messageHandlers.XXX.postMessage(JSON.stringify(json));}catch(error){console.log("ios错误");}这个XXX是ios给你的方法