共计 2568 个字符,预计需要花费 7 分钟才能阅读完成。
关注公众号Uzero
,更多前端小干货等着你喔!我是JowayYoung
,喜欢分享前端技术和生活纪事,学习与生活不落下,每天进步一点点,与大家相伴成长
前言
现在不管是 桌面客户端 还是 移动客户端 ,都会夹杂着一部分 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 的通讯方式 遗漏的,会继续在这篇文章上补全,同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的 点个赞 或收个藏,保证你在开发时用得上。
专栏文章
《灵活运用》系列
- 灵活运用 JS 开发技巧 强烈推荐收藏????
《随笔》系列
- 详细判断浏览器运行环境 强烈推荐收藏????
- 1.5 万字概括 ES6 全部特性 强烈推荐收藏????