54

前端面试之hybrid

 5 years ago
source link: http://blog.poetries.top/2018/10/20/fe-interview-hybrid/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

viMjUjR.png!web

hybrid
server

BNVniyR.png!web

1.2 hybrid 存在价值

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

1.3 webview

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

FzMNjym.png!webmuiieaz.png!web

1.4 file 协议

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

Iryy6jI.png!web

1.5 http(s) 协议

Nraii2Q.png!web

1.6 两者区别

file
http(s)

1.7 具体实现

hybrid
NA
hybrid
h5

实现

html js css
app
webview
file

7R3Yneq.png!web

二、hybrid 更新上线流程

2.1 具体流程图

B3IVF3z.png!web

思考(目的,可行途径)

ZNJ7Rnn.png!web

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

2.2 完整流程

ZZre63U.png!web

201803211015
zip
zip

要点总结

zip
zip
zip

三、hybrid 和 h5 的区别

3.1 优点

NA
app

3.2 缺点

bug

3.3 适用的场景

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

四、前端和客户端通讯

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

JS

jYb6Jzq.png!web

4.2 schema 协议简介和使用

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

i6b22i6.png!webNNZvY3A.png!webyA7JVf3.png!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK