使用场景
原生APP内嵌入HTML5页面,在HTML5页面调用原生APP的方法(如登录、分享等)。
关键代码
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.ActivityLogin && window.webkit.messageHandlers.ActivityLogin.postMessage){
// 调用IOS登录
window.webkit.messageHandlers.ActivityLogin.postMessage();
} else if(window.phoneInterface && window.phoneInterface.ActivityLogin){
// 调用安卓登录
window.phoneInterface.ActivityLogin();
} else {
// 调用H5登录
this.openLogin();
}
Tips
1、上面代码片段中的“ActivityLogin”是和APP开发人员协商定义的方法名,IOS和安卓可以不一致。
2、只有在APP中打开才能成功调用协商APP的方法,所以前端开发者需要兼容到非协商APP(如在浏览器或者其他APP)内打开的情况。
3、调用APP登录成功之后,HTML5需要获取登录成功后的用户信息(如token、用户ID等),具体方法见楼主另外一篇文章:H5页面获取原生APP的登录状态。
4、调用分享等场景时可能会同时向APP传参(如分享地址,分享标题,分享封面图等),具体如下:
// 向APP传递的参数格式可以是JSON, 也可以是字符串, 具体需要跟APP开发人员沟通
let shareInfo = {
url: 'xxx',
title: 'xxx',
cover: 'xxx'
};
// ios
window.webkit.messageHandlers.ActivityShare.postMessage(shareInfo);
// 安卓
window.phoneInterface.ActivityShare(shareInfo)
完!最后就是和APP端联调了。