前言
现在不管是桌面客户端还是移动客户端,都会夹杂着一部分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的通讯方式遗漏的,会继续在这篇文章上补全,同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
写这个效果,可以熟悉以下: 1、相对定位中的绝对定位; 2、CSS 针对浏览器 HACK...
通常为了开发效率,我们会使用 vue-cli 创建项目,这样创建的项目默认情况下编译...
Dreamweaver中想要将一幅画分割成几份在框内进行拼图游戏;当靠近真确的拼图时自...
随着各大手机厂商陆续推出 5G 手机,智能手机全面迎来 5G 浪潮。可能有人会发问...
先看效果: 实现: 1.定义导航栏的文字标签: div class=tou sapn class=logo 北...
复制代码 代码如下: html !--混合框架的布局: 要想实现复杂的页面布局,只需在f...
由于“可视化”和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编...
css 作用域是全局的,项目越来越大,人越来越多,命名慢慢成为问题,以下是几种...
基于 vue 此功能核心思想就是通过 JavaScript 代码控制 node 在页面上的左边距与...
简介:本文将 rocktmq-spring-boot 的设计实现做一个简单的介绍,读者可以通过本...