H5调用APP的方法

最新推荐文章于 2025-11-01 17:15:13 发布

原创最新推荐文章于 2025-11-01 17:15:13 发布 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#H5调用 #H5 #APP内嵌H5

前端开发专栏收录该内容

11 篇文章

订阅专栏

使用场景

原生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端联调了。