美文网首页JowayYoung谈前端
H5与App的通讯方式

H5与App的通讯方式

作者: JowayYoung | 来源:发表于2019-12-12 16:59 被阅读0次

    作者:JowayYoung
    仓库:GithubCodePen
    博客:掘金思否知乎简书头条CSDN
    公众号:IQ前端
    联系我:关注公众号后有我的微信
    特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,希望各位尊重原创的知识产权

    前言

    现在不管是桌面客户端还是移动客户端,都会夹杂着一部分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页面。

    结语

    ❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

    关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔

    • 关注后回复关键词免费领取视频教程
    • 关注后添加我微信拉你进技术交流群
    • 欢迎关注IQ前端,更多CSS/JS开发技巧只在公众号推送
    image

    相关文章

      网友评论

        本文标题:H5与App的通讯方式

        本文链接:https://www.haomeiwen.com/subject/eiptnctx.html