专栏首页JowayYoung谈前端H5与App的通讯方式

H5与App的通讯方式

前言

现在不管是桌面客户端还是移动客户端,都会夹杂着一部分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的通讯方式遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞收个藏,保证你在开发时用得上。

本文分享自微信公众号 - IQ前端(gh_4593b39979fb),作者:JowayYoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简说H5与App如何通讯

    现在不管是「桌面客户端」还是「移动客户端」,都会夹杂着一部分H5页面,这种混合式的应用也是我们常说的「Hybrid App」。为什么会出现「Hybrid App...

    JowayYoung
  • ES6语法翻译Lodash计划:数组篇第2期

    目的是使用ES6语法实现Lodash的单个函数功能,每次分享两个Lodash函数的翻译,涉及到Lodash的类型、字符、数值、数组、对象、函数、集合和工具?。

    JowayYoung
  • 前端性能优化指南

    发现总结性的小干货可以为大家提升更好的开发技巧和编码思维,对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题:「性能优化」。

    JowayYoung
  • 简说H5与App如何通讯

    现在不管是「桌面客户端」还是「移动客户端」,都会夹杂着一部分H5页面,这种混合式的应用也是我们常说的「Hybrid App」。为什么会出现「Hybrid App...

    JowayYoung
  • 2019年,网上商城链接优化的几个小技巧!

    如果你在电子商务领域从业多年,并且正在运营一个网上商城,我们知道电子商务SEO是每个营销人员的必修课,而电商网站最大的特点就是,链接结构复杂,URL数目众多,为...

    蝙蝠侠IT
  • 为什么PostgreSQL抛弃了LRU算法而使用时钟扫描?

    我们知道LRU(Least Recently Used)最近最少使用算法被广泛运用于操作系统及数据库的内存淘汰机制上,比如mysql的缓冲区页面置换算法就是使用...

    数据库架构之美
  • 数字广告基本术语

    Rich Media:(富媒体),这种应用采取了所有适合的最先进技术,以最好的传达广告主的信息,甚至与用户进行互动!如视频、flash广告等 植入式广告:在...

    城市中的游牧民族
  • 你真的了解互联网用户行为吗?

    大数据文摘
  • 闲鱼前端基于 serverless 的一种多端开发解决方案

    前端的发展太快了,前端框架和技术的发展也层出不穷,还包括不同智能设备的出现,对前端开发同学来说是个很大的跳转,简单列举下:

    奋斗蒙
  • 【干货】Git远程操作详解

    Git有很多优势,其中之一就是远程操作非常简便。本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Git远程操作。

    Rainbond开源

扫码关注云+社区

领取腾讯云代金券