随笔集：H5如何对接原生app的方法

H5如何对接原生app的方法

原生APP内部嵌入H5页面的场景对于web前端来说可能并不陌生，既然是嵌入在APP内部肯定也少不了会涉及到APP和H5的一些交互。比如传参、H5调用APP方法、APP调用H5方法等。

判断IOS还是Android

var u = navigator.userAgent,
    app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if ( isAndroid ) {
	...
}else{
	...
}

H5调用APP方法

1.调用IOS

window.webkit.messageHandlers.navBack.postMessage(''); //navBack是ios方抛出的方法名，postMessage（）后面是传的值

2.调用Android

service.navBack(); //service是Android方的一个对象，navBack（）是里面的方法

APP调用H5方法

getInfo(info){} //H5页面只要命名好一个方法就行，iOS和Android能直接调用该方法，info为APP端传来的数据

APP跳转页面传参

//APP里面的H5是放在web-view里面，所以跳转传参只需要在路径后面拼接参数就行
//H5获取参数
var params = this.getparams()
var id = params.serviceId?params.serviceId:''
	...

function getparams() {
    var searchHref = window.location.search.replace('?', '');
    var params = searchHref.split('&');
    var returnParam = {};
    params.forEach(function(param) {
    var paramSplit = param.split('=');
    	returnParam[paramSplit[0]] = paramSplit[1];
    });
    return returnParam;
}

ps:在H5页面内最好不要有外链资源，不然容易导致页面非常卡顿