前言
现在不管是桌面客户端还是移动客户端，都会夹杂着一部分H5页面，这种混合式的应用也是我们常说的Hy br id App。为什么会出现Hybrid App呢， 早期 是因为开发一个And ROI d或iOS的客户端，需要的人力 成本 比 较大 ，开发周期比较长，后来有些 团队 就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的Webview来展示。
由于小编我 半 路转行当程序猿，只对前端领域有所 了解 ，对其他编程领域接触较少，故不探讨Webview的 实现原理 和与H5页面交互的原理。有兴趣的小伙伴自行 百度搜索 JSBridge的相关知识，或请教下客户端(Windows、MacOS、Android、iOS)开发的 同学 ，看看如何桥接JS与其他 编程语言 之间的联系。
优缺点
凡事都是有好有坏，没有绝对的解决 方案 。下面我总结下Hybrid App在开发 过程中 存在的优缺点，各位同学可自行判断Hybrid App的好坏。
优点
缺点
协定好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 {
componentDid mount () {
location. hr ef = "lsbox://toast?msg=页面加载完毕"; // 通知App
}
render() {
return (
<div classname ="app">
<button ty PE ="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/Aw ai t封装优化)
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 } f rom "react";
e xp ort default class App extends Component {
constructor( PR ops) {
super(props);
this. stat e = {
list: [0, 1, 2, 3, 4]
};
}
componentDidMount() {
window.addNum = this.addNum.bind(this); // 暴露方法给App
}
render() {
return (
<div classN am e="app">
<ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul>
</div>;
);
}
addNum(num) {
this.setState(p rev State => ({
list: prevState.list.concat(num);
}));
}
}
以上在组件加载完成后通过window.addNum = this.addNum.bind(this)将指定方法全局暴露到window上，App Webview可直接操作这些方法来控制H5页面。
结语
写到最后总结得差不多了，后续如果我想起还有哪些H5与App的通讯方式遗漏的，会继续在这篇 文章 上补全，同时也希望各位 朋友 对文章里的要点进行补充 或者 提出自己的见解。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 Html5与App的通讯方式详解 全部内容，希望文章能够帮你解决 Html5与App的通讯方式详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Html5与App的通讯方式详解的详细内容...