hybrid(客户端【app】和前端混合开发)

                         简介

移动端占大部分流量 已经远远超过pc端
一线互联网公司都有自己的APP
这些APP中有很大比例的前端代码
问题
hybrid是什么 为何用hybrid
介绍下hybrid更新和上线的流程
hybrid和h5的主要区别
前端js和客户端如何通讯
hybrid 可以快速更新迭代(无需app审核)
之所以app需要审核 ios anidor 因为涉及用户隐私 如 横屏竖屏 打开相机之类的
体验流畅 (和NA体验基本类似)
减少开发和沟通成本 双端公用一套代码
webview是一个浏览器的内核 可以承载HTML页面并把它显示出来
app的一个组件 app中可以有也可以没有
file协议 双击打开本地HTML文件 只要是本地的就是用file协议 file://后面跟的就是文件的绝对路径
https协议加载远程的

hybrid具体实现
1.前端做好静态页面(html js css)将文件交给客户端
2.客户端拿到前端静态文件 以文件形式存储在app中
3.客户端在一个webview中
4.使用file协议加载静态页面
有两个问题
1.app上线之后静态资源如何更新
2.如何获取内容
不是所有的场景都是用hybrid
使用NA:体验要求极致 变化不频繁(如头条的首页)
使用hybrid:体验要求高 变化频繁(如头条的新闻详情页)
使用h5:体验无要求,不常用(如举报,反馈等页面)
hybrid更新上线流程
这个需求只能客户端来做 客户端去server端下载最新的静态文件
我们维护server端的静态文件 经常打包上传到server端
每次打开app对比客户端和server端的版本号 如果一致肯定不用下载 如果不一致需要下载
总结下
1.分版本 有版本号 如 201803211015
2.将静态文件压缩成zip包 上传到服务端
3.客户端每次启动 都去服务端检查版本号
4.如果服务端版本号大于客户端版本号 就去下载最新的zip包
5.下载完之后解压包 然后将现有文件覆盖
hybrid 和 h5的区别
hybrid的优点
体验更好 跟NA体验基本一致
无需审核
hybrid的缺点
开发成本高 联调 测试 查BUG都比较麻烦
运维成本高
hybrid适用场景
产品的稳定功能 体验要求高 迭代频繁
h5适用场景
单次的运营活动 (如xx红包)或不常用功能
可以搜微信js-sdk看微信公开给外界的客户端能力
前端和客户端通讯
新闻详情页适用hybrid 前端如何获取新闻内容
不能利用ajax 第一跨域 第二 速度慢
hybrid是通过客户端获取新闻内容 然后js通讯拿到内容再渲染 客户端获取内容可以提前获取 不像js渲染完才可以通过ajax请求获取
总结起来就是 js访问客户端能力 传递参数和回调函数 客户端通过回调函数返回内容
前端 客户端 通信用schema协议
例如 weixin://dl/scan 扫一扫 来自微信JS-SDK 这是微信app的schema协议的