Hybrid App开发中，H5与App之间的通讯方式

前言

我们日常所见到的 App，按开发模式来划分，大致可以分为 Native App、Web App 和 Hybrid App。

下图可以直观的区分这三种类型的 App 之间的区别。

Hybrid App（混合模式移动应用）是指介于 Web App , Native App 这两者之间的 App，兼具“Native App 良好用户交互体验的优势”和“ Web App 跨平台开发的优势”。Hybrid 开发效率高、跨平台、低成本的特点，Hybrid 从业务开发上讲，没有版本问题，对于 BUG 能及时修复。但 Hybrid 也是有缺点的，Hybrid 体验比不上 Native，同样的功能在性能上存在巨大差距。Web 界面上 JS 对 HTML Node 的操作需要消耗大量的 CPU 资源，手机 CPU 的性能还不能与 PC 相提并论，就算在智能手机之间，硬件水准也参差不齐，一个可以在 iPhone 6 上流畅运行的界面，跑到三星上很可能就卡住不动了。所以我们经常可以发现一些富交互页面上的操作无法达到令人满意的流畅度，而流畅度也正是用户评价一款 App 优劣的最直观因素。所以混合式编程比较适用于需要快速试错、快速占领市场的团队，当然，也不是绝对。

下图列出的是这三种类型的 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封装优化)