H5与APP之间的交互方式

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

由于web开发升级相比APP更加快速，不需要各应用商店审核，再加上APP中使用web页面可以减轻APP包的大小，现在越来越多的APP中都嵌入了web页面，特别是在静态展示页面和临时活动页面。

一、同步登录状态

以活动页面为例，web端需要获取用户的登录状态

方法一 是web端自己调用登录接口登录，缺点：
1、需要写UI，调接口，开发相对费时
2、用户需要二次登录，用户体验不佳

方法二 是同步APP端的登录状态，关键代码如下：

window.getLoginInfo = data => {
    if (data.token) {
        // web端逻辑处理
    }
};

Tips：
1、getLoginInfo 方法为web端和PP端协商定义的方法
2、getLoginInfo 方法在页面初始化时调用
3、参数 data 里包含token等用户信息

二、调用APP的方法

有的伙伴可能已经想到另外一种情况，那就是用户在APP端也没有登录的情况怎么办。次数我们应该主动调用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();
}

Tips：
1、上面代码片段中的“ActivityLogin”是和APP端开发人员协商定义的方法名，IOS和安卓可以不一致。
2、只有在APP中打开才能成功调用协商APP的方法，所以前端开发者需要兼容到非协商APP（如在浏览器或者其他APP）内打开的情况。
3、调用APP登录成功之后，APP端会主动将登录信息（如token、用户ID等）通过第一步中的getLoginInfo方法回调给web端。
4、如果客户端需要web端传参，可以通过下面的方法进行传参：

// 向APP传递的参数格式可以是JSON, 也可以是字符串, 具体需要跟APP开发人员沟通
let data = {
    url: 'xxx',
    title: 'xxx',
    cover: 'xxx'
};
// ios
window.webkit.messageHandlers.ActivityShare.postMessage(data);
// 安卓
window.phoneInterface.ActivityShare(data)

完！