六爻占卜婚姻,幻觉kb,井上织姬甩葱
前言
现在不管是桌面客户端还是移动客户端，都会夹杂着一部分h5页面，这种混合式的应用也是我们常说的hybrid app。为什么会出现hybrid app呢，早期是因为开发一个android或ios的客户端，需要的人力成本比较大，开发周期比较长，后来有些团队就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的webview来展示。
由于小编我半路转行当程序猿，只对前端领域有所了解，对其他编程领域接触较少，故不探讨webview的实现原理和与h5页面交互的原理。有兴趣的小伙伴自行百度搜索jsbridge的相关知识，或请教下客户端(windows、macos、android、ios)开发的同学，看看如何桥接js与其他编程语言之间的联系。
优缺点
凡事都是有好有坏，没有绝对的解决方案。下面我总结下hybrid app在开发过程中存在的优缺点，各位同学可自行判断hybrid app的好坏。
优点
缺点
通讯方式
以下代码全部基于前端(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打开遮罩层
如果同步触发两个或以上的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的通讯方式遗漏的，会继续在这篇文章上补全，同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论