Html5与App的通讯方式详解

前言

现在不管是桌面客户端还是移动客户端，都会夹杂着一部分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页面。

结语

写到最后总结得差不多了，后续如果我想起还有哪些H5与App的通讯方式遗漏的，会继续在这篇文章上补全，同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！