前端知识体系-JS相关对移动端和Hybrid开发的理解？

Posted 2020-11-22 fecommunity

1.hybrid是什么，为何使用hybrid呢？

1. 概念：
   • hybrid就是前端和客户端的混合开发
   • 需要前端开发人员和客户端开发人员配合完成
   • 某些环节也可能会涉及到server端
   • 大前端：网页、APP、前端和server端交互的过程
2. 存在价值：
   • 可以快速迭代更新【关键】，无需APP审核（hybrid技术可以一天上线多次）
   • 体验流畅（和Native开发的体验基本类似）
   • 减少开发和沟通成本，双端公用一套代码
     
3. webview：
   • 是APP中的一个组价（App可以有Webview，也可以么有）
   • 主要用于加载H5页面，是一个小型的浏览器内核
4. file:// 协议
   • file协议: 本地文件，快
   • http(s): 网络加载、慢
   • 扩展知识：Web标准都有哪些呢？

2.hybrid的具体实现流程？

2.1 使用场景

1. 不是所有场景都适合使用hybrid
2. 使用NA： 体验要求极致，变化不频繁（如头条的首页）
3. 使用hybrid：体验要求高，变化频繁（如头条的新闻详情页面）
4. 使用H5： 体验无要求，不常用（如举报、反馈等页面）

2.2 具体实现

1. 前端做好静态页面（html，CSS，JS），将文件交给客户端
2. 客户端拿到前端静态页面，以文件形式存储在APP中
3. 客户端在一个Webview中
4. 使用file协议加载本地静态文件

3.介绍一下hybrid更新和上线的流程？

3.1 优点

1. 用户体验更好，跟NA体验基本一致
2. 可以快速迭代，无需app审核 【关键】

3.2 缺点：

1. 开发成本高：联调、测试、查bug都比较麻烦
2. 运维成本高。（平台维护）

3.3 适用场景：

1. hybrid：产品的稳定功能，用户体验高，迭代频繁
2. H5：单词的运营活动（如XX红包），或不常用的功能

4.前端JS和客户端如何通讯？

1. 类似于JSONP的数据请求方式
2. schema协议的简介和使用
3. 通讯的基本形式：调用能力，传递参数监听回调
4. 对schema协议的理解和使用
5. 调用schema代码的封装
6. 内置上线的好处：更快、更安全