H5与App的通信方式

做者：JowayYoung
仓库：Github、CodePen
博客：官网、掘金、思否、知乎
公众号：IQ前端
特别声明：原创不易，未经受权不得转载或抄袭，如需转载可联系笔者受权

前言

如今不论是桌面客户端仍是移动客户端，都会夹杂着一部分H5页面，这种混合式的应用也是咱们常说的Hybrid App。为何会出现Hybrid App呢，早期是由于开发一个Android或iOS的客户端，须要的人力成本比较大，开发周期比较长，后来有些团队就经过将部分页面拆分出来，由前端来完成，再经过在客户端里的Webview来展现。

因为小编我半路转行当程序猿，只对前端领域有所了解，对其余编程领域接触较少，故不探讨Webview的实现原理和与H5页面交互的原理。有兴趣的小伙伴自行百度搜索JSBridge的相关知识，或请教下客户端(Windows、MacOS、Android、iOS)开发的同窗，看看如何桥接JS与其余编程语言之间的联系。

优缺点

凡事都是有好有坏，没有绝对的解决方案。下面我总结下Hybrid App在开发过程当中存在的优缺点，各位同窗可自行判断Hybrid App的好坏。

优势

• H5页面交由前端进行开发，页面模块之间分开开发和维护，有效减小App的开发周期
• H5页面不受限于应用商店繁琐的审核流程和冗长的等待时间，新增页面和功能、修复缺陷均可随时部署到线上
• H5页面在有须要时才加载，减少App打包后的大小，缩短App在应用商店下载的时间和减小本地占用手机的空间
• H5页面接入App Webview中，再也不受限于浏览器，可经过与App交互调用设备更多底层的API来完善更多本来浏览器没法完成的操做

缺点

• 协定好H5和App之间的通信协议，定义好全局属性和全局方法在二者之间如何调用
• H5页面接入App Webview中，可能会出现不少兼容问题，须要前端和客户端多加注意
• 开发前需按照需求和交互进行页面划分，哪些页面归前端开发，哪些页面归客户端开发
• 页面出现Bug有时候很难发现是在哪一个环节出错，须要前端和客户端共同调试找出问题所在(可能各抒己见，打架都有份)

通信方式

如下代码所有基于前端(React)进行演示，客户端如何实现JS交互我就很少说了，能够找客户端开发的同窗了解下。通信方式有以下两种，都是使用JS代码来完成，兼容性仍是挺不错的。

• 前端通知客户端：拦截
• 客户端通知前端：注入

前端通知客户端

在H5页面里触发连接跳转，App Webview检测到连接跳转再进行拦截，所以能够经过URL上携带参数来告知App下一步应该作些什么。

import React, { Component } from "react";

export default class App extends Component {
    componentDidMount() {
        location.href = "lsbox://toast?msg=页面加载完毕"; // 通知App
    }
    render() {
        return (
            <div className="app"> <button type="button" onClick={this.openMask.bind(this)}>点它</button> </app>
        );
    }
    openMask() {
        location.href = "lsbox://mask?toggle=1"; // 通知App
    }
}
复制代码

以上执行了location.href = "lsbox://mask?toggle=1"来通知App打开遮罩层

• lsbox：前端和客户端统必定义连接跳转的协议(喜欢怎样定义协议都行)
• mask：App须要执行的动做(喜欢怎样定义动做都行)
• toggle=1：动做执行参数(自定义参数，用于告知App怎样作)

若是同步触发两个或以上的location.href(下一个location.href接着上一个location.href)，App可能只会接收到一个location.href发出的通知，因此须要对下一个location.href使用setTimeout设置通知时间间隔(可以使用Async/Await封装优化)
复制代码

location.href = "lsbox://toast?msg=one";
setTimeout(() => {
    location.href = "lsbox://toast?msg=two";
    setTimeout(() => {
        location.href = "lsbox://toast?msg=three";
    }, 100);
}, 100);
复制代码

客户端通知前端

注入一些全局方法，App Webview直接操做全局方法来控制H5页面，使用window.handleFunc = function() {}这样的形式来定义注入的方法。

import React, { Component } from "react";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [0, 1, 2, 3, 4]
        };
    }
    componentDidMount() {
        window.addNum = this.addNum.bind(this); // 暴露方法给App
    }
    render() {
        return (
            <div className="app"> <ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul> </div>;
        );
    }
    addNum(num) {
        this.setState(prevState => ({
            list: prevState.list.concat(num);
        }));
    }
}
复制代码

以上在组件加载完成后经过window.addNum = this.addNum.bind(this)将指定方法全局暴露到window上，App Webview可直接操做这些方法来控制H5页面。

结语

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创做更多高质量文章

关注公众号IQ前端，一个专一于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔

• 关注后回复资料免费领取学习资料
• 关注后回复进群拉你进技术交流群
• 欢迎关注IQ前端，更多CSS/JS开发技巧只在公众号推送