Html5与App的通讯方式详解


Posted in HTML / CSS onOctober 24, 2019

前言

现在不管是桌面客户端还是移动客户端,都会夹杂着一部分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的通讯方式遗漏的,会继续在这篇文章上补全,同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
You might like
PHP 处理图片的类实现代码
2009/10/23 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
在python中安装basemap的教程
2018/09/20 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python 实现线程之间的通信示例
2020/02/14 Python
python实现126邮箱发送邮件
2020/05/20 Python
浅析Python面向对象编程
2020/07/10 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
幼儿园消防安全制度
2014/01/26 职场文书
大二学生自我检讨书
2014/10/23 职场文书
员工自我工作评价
2015/03/06 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技