这期内容当中小编将会给大家带来有关如何在Html5中与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 (); } 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 (; ); } addNum(num) { this.setState(prevState => ({ list: prevState.list.concat(num); })); } }{this.state.list.map(v =>
- {v}
)}上述就是小编为大家分享的如何在Html5中与App进行通讯了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
文章名称:如何在Html5中与App进行通讯
文章地址:http://bzwzjz.com/article/ghidji.html