H5与App的通信方式

作者：JowayYoung仓库：Github、CodePen博客：官网、掘金、师傅、知乎公众号：智商前端特别声明：原创不易，未经授权不得转载或抄袭，如需转载，可联系作者授权。前言现在无论是桌面客户端还是移动客户端，都会有一些H5页面混入其中，这种混合应用也就是我们常说的HybridApp。为什么会出现HybridApp？早期是因为开发Android或者iOS客户端需要比较大的人力成本和比较长的开发周期。显示在客户端的Webview中。作为小编，半路转行做程序员，只知道前端领域，对其他编程领域接触不多，所以就不讨论Webview的实现原理和H5的交互原理了页。有兴趣的朋友可以在百度上搜索JSBridge的相关知识，或者请教开发客户端（Windows、MacOS、Android、iOS）的同学，看看如何桥接JS与其他编程语言的连接。优缺点凡事都有好有坏，没有绝对的解决办法。我总结一下HybridApp在开发过程中的优缺点。学生可以自行判断HybridApp的好坏。优点H5页面由前端开发，页面模块分开开发和维护，有效降低App的开发周期可随时部署到线上H5页面，只在需要时加载，减少App体积打包后的App，缩短App在应用商店的下载时间，减少手机本地占用空间。H5页面连接App的Webview，不再受限于浏览器，可以与App进行交互，调用更多设备底层API，改善浏览器原本无法完成的更多操作。缺点约定H5和App之间的通信协议，定义两者之间的全局属性和全局方法如何调用H5页面连接AppWebview，可能会有很多兼容性问题，前端和客户端需要开发前多注意根据需求和交互进行页面划分，哪些页面属于前端开发，哪些页面属于客户端开发页面当出现bug时，有时很难找出是哪个链接错误的。需要前端和客户端调试才能找出问题所在（可能各抒己见，打架有份）。以下代码均基于前端（React）进行演示。JS交互就不多说了，各位开发客户端的同学可以了解一下。有以下两种通信方式，都是使用JS代码完成的，兼容性相当好。前端通知客户端：拦截客户端通知前端：注入前端通知客户端触发H5页面的链接跳转。AppWebview检测链接跳转，然后拦截。因此，URL可以携带参数来通知App下一步做什么。importReact,{Component}from"react";exportdefaultclassAppextendsComponent{componentDidMount(){location.href="lsbox://toast?msg=pageloaded";//通知App}render(){return(点击它);}openMask(){location.href="lsbox://mask?toggle=1";//通知App}}上面执行location.href="lsbox://mask?toggle=1"通知App开启mask层lsbox:前端和客户端统一定义协议的链接跳转（你可以任意定义协议）mask：app需要执行的动作（你可以随意定义动作）toggle=1：动作执行参数（自定义参数，用于告诉app如何执行做）如果synchronized触发两个或多个location.href（下一个location.href跟在上一个location.href之后），App可能只会收到一个location.href的通知，所以需要使用setTimeout来设置通知下一个location.href时间间隔（可以使用Async/Await包进行优化）location.href="lsbox://toast?msg=one";setTimeout(()=>{location.href="lsbox://toast?msg=two";setTimeout(()=>{location.href="lsbox://toast?msg=three";},100);},100);客户端通知前端注入一些全局方法，AppWebview直接操作全局方法控制H5页面，使用window.handleFunc=function(){}的形式定义注入的方法importReact,{Component}来自“反应”；导出默认类App扩展组件{构造函数（道具）{超级（道具）；this.state={列表：[0,1,2,3,4]};}componentDidMount(){window.addNum=this.addNum.bind(this);//将方法暴露给App}render(){return(

{this.state.list.map(v=>{v})}