盒子
盒子
文章目录󰁋
  1. 一、hybrid 是什么,为何会用 hybrid
    1. 1.1 hybrid 文字解释
    2. 1.2 hybrid 存在价值
    3. 1.3 webview
    4. 1.4 file 协议
    5. 1.5 http(s) 协议
    6. 1.6 两者区别
    7. 1.7 具体实现
  2. 二、hybrid 更新上线流程
    1. 2.1 具体流程图
    2. 2.2 完整流程
  3. 三、hybrid 和 h5 的区别
    1. 3.1 优点
    2. 3.2 缺点
    3. 3.3 适用的场景
  4. 四、前端和客户端通讯
    1. 4.1 JS 和客户端通讯的基本形式
    2. 4.2 schema 协议简介和使用
    3. 4.3 schema 使用的封装
    4. 4.4 内置上线

前端面试之hybrid

image.png

一、hybrid 是什么,为何会用 hybrid

1.1 hybrid 文字解释

  • hybrid 即“混合”,即前端和客户端的混合开发
  • 需前端开发人员和客户端开发人员配合完成
  • 某些环节也可能涉及到 server
  • PS:不要以为自己的前端就可以不理会客户端的知识

image.png

1.2 hybrid 存在价值

  • 可以快速迭代更新【关键】(无需 app 审核,思考为何?)
  • 体验流畅(和 NA 的体验基本类似)
  • 减少开发和沟通成本,双端公用一套代码

1.3 webview

  • app 中的一个组件( app 可以有 webview ,也可以没有)
  • 于加载 h5 页面,即一个小型的浏览器内核

image.png
image.png

1.4 file 协议

  • 其实在一开始接触 html开发,就已经使用了 file 协议
  • 只不过你当时没有“协议”“标准”等这些概念

image.png

1.5 http(s) 协议

image.png

1.6 两者区别

  • file 协议:本地文件,快
  • http(s) 协议:网络加载,慢

1.7 具体实现

  • 不是所有场景都适合使用 hybrid
  • 使用 NA :体验要求极致,变化不频繁(无头条的首页)
  • 使用 hybrid :体验要求高,变化频繁(如头条的新闻详情页)
  • 使用 h5 :体验无要求,不常用(如举报、反馈等页面)

实现

  • 前端做好静态页面(html js css),将文件交给客户端
  • 客户端拿到前端静态页面,以文件形式存储在 app
  • 客户端在一个 webview
  • 使用 file 协议加载静态页面

image.png

二、hybrid 更新上线流程

2.1 具体流程图

image.png

思考(目的,可行途径)

image.png

  • 要替换每个客户端的静态文件
  • 只能客户端来做(客户端是我们开发的)
  • 客户端去 server 下载最新的静态文件
  • 我们维护 server 的静态文件

2.2 完整流程

image.png

  • 分版本,有版本号,如 201803211015
  • 将静态文件压缩成 zip包,上传到服务端
  • 客户端每次启动,都去服务端检查版本号
  • 如果服务端版本号大于客户端版本号,就去下载最新的 zip
  • 下载完之后解压包,然后将现有文件覆盖

要点总结

  • 要点1:服务端的版本和zip包维护
  • 要点2:更新zip 包之前,先对比版本号
  • 要点3:zip 下载解压和覆盖

三、hybrid 和 h5 的区别

3.1 优点

  • 体验更好,跟 NA体验基本一致
  • 可快速迭代,无需 app 审核【关键】

3.2 缺点

  • 开发成本高。联调、测试、查 bug 都比较麻烦
  • 运维成本高。参考此前讲过的更新上线的流程

3.3 适用的场景

  • hybrid : 产品的稳定功能,体验要求高,迭代频繁
  • h5 : 单词的运营活动(如 xx 红包)或不常用功能

四、前端和客户端通讯

4.1 JS 和客户端通讯的基本形式

  • JS 访问客户端能力,传递参数和回调函数
  • 客户端通过回调函数返回内容

image.png

4.2 schema 协议简介和使用

  • 之前介绍了 http(s)file 协议
  • schema 协议 —— 前端和客户端通讯的约定

image.png
image.png
image.png

4.3 schema 使用的封装

image.png

image.png

image.png

4.4 内置上线

  • 将以上封装的代码打包,叫做 invoke.js,内置到客户端
  • 客户端每次启动 webview,都默认执行 invoke.js
  • 本地加载,免去网络加载的时间,更快
  • 本地加载,没有网络请求,黑客看不到 schema 协议,更安全
支持一下
扫一扫,支持poetries