欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5与App的通讯方式详解

程序员文章站 2022-03-19 10:21:19
这篇文章主要介绍了Html5与App的通讯方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 19-10-24...

前言

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

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