HybridApp的混合应用程序

序言。

现在，无论是桌面客户机还是移动客户机，都包含了H5页面的一部分，这种混合应用程序通常被称为HybridApp。HybridApp之所以出现，是因为开发Android或iOS客户端需要更多的人力成本和更长的开发周期，后来一些团队通过分割页面的一部分，由前端完成，然后通过客户端的Webview进行显示。

由于小编是半途而废的程序猿，只知道前端领域的知识，与其他编程领域的接触较少，所以不去探索Webview的实现原理和与H5页面的交互原理。有意者请自己去百度了解JSBridge，或咨询开发Windows,MacOS,Android,iOS的同学，看看如何桥接JS与其他编程语言的联系。

优缺点。

什么事都有好坏之分，没有绝对的答案。下面我来总结一下HybridApp的优缺点，大家可以自己判断一下HybridApp的优缺点。

优点。

H5页面由前端开发完成，各网页模块独立开发和维护，有效缩短了App开发周期。

在应用商店中，H5页面不受复杂的审计过程和漫长的等待时间的限制。添加页面和功能可以随时在线修复缺陷。

如有必要，H5页面将被加载，减小应用程序包装后的尺寸，缩短应用程序在应用商店的下载时间，减少在本地使用手机的空间。

进入AppWebview后，H5页面不再受浏览器限制，可以通过与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=页面加载完成"；//通知App}render(){return(点)；}openMask()="lsbox:/mask？标记=1"；////通知App}}}}

以上代码执行location.href="lsbox://mask？标题=1"通知应用程序打开覆盖层。

lsbox:前端和客户端统一定义链接跳转协议(协议可以随意定义)

Mask:应用需要执行的动作(例如，如何定义动作)

标题=1:动作执行参数(告诉App如何执行定制参数)

如果同步触发两个或更多的location.href(接下来是上一个)，应用程序可能只会收到一个location.href的通知，因此需要将setTimeout用于下一个location.href(可以使用Async/Await封装优化)location.href="lsbox://toast？msg=one；setttimeout(()=>{location.href="lsbox:///toast？msg=two"；setttimeout(()=>{location.href="lsbox:/toast？msg=threee"；}100)；}100；}100；

客户通知前端。

AppWebview在H5页面上直接操作全局方法，使用window.handleFunc=function(){}等形式定义注入方法。

importreact，{Component}from"react"；exportdefaultclassAppextendsComponent{constructor(props){super(props)；this.state={list:[0,1,2,3,4]}；}componentDidMount(){window.addnum=this.addnum.bind(this);////app}render显示方法{rendurn,{ren,{ren,{ren,}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}；}

组件加载完成后，通过window.addNum=this.addNum.bind(this)将指定的方法全局化为window，AppWebview直接操作控制H5页面。