## hybrid 1. 移动端占大部分流量，已经远远超过pc 2. 一线互联网公司都有自己的app 3. 这些App中有很大比例的前端代码（因为app要内嵌很多前端的东西h5公众号，朋友圈） 4. 拿微信举例，你每天浏览微信的内容，多少是前端 ### 题目 1. hybrid是什么，为何用hybrid 2. 介绍一下hybrid更新和上线的流程 3. hybrid和h5的主要区别 4. 前端js和客户端如何通信（如客户端分享功能） ### hybrid是什么，为何用hybrid 1. hybrid文字解释 2. 存在价值，为什么存在 3. webview（客户端容器） 4. file://协议（tcp/id的子协议） 5. hybrid实现流程 #### hybrid文字解释 1. hybrid即“混合”，即前端和客户端的混合开发 2. 需前端开发人员和客户端开发人员配合完成 3. 某些环节也可能涉及到Server端 4. Ps：不用理会自己是前端就不理会客户端、server的知识（大前端：比较广义，所有能展示给用户的（网页，app）和相关的（客户端和网页最直接的api），狭义：通过浏览器csshtmljs开发的） 用hybrid不用h5：加载hybrid更快，加载h5会比较慢 #### hybrid存在价值 1. 可以快速迭代更新（关键！！）（无需app审核，）app更新需要审核（appStore一个星期 应用商店等一两天） app竞争比较厉害，效率时代 app审核：有权利访问手机比较安全隐私的东西，比较深层的api（地理位置，横屏竖屏） hybrid：前端代码（html，css，js），权利比较小 2. 体验流畅（和NA（native）的体验基本类似，肉眼区别不出来） 3. 减少开发和沟通成本，双端公用一套代码（andriod，ios，很多都可以通用，差异很小） ### webview 1. webview是app的一个组件（APP可以有webview，也可以没有） 2. 用于加载h5页面（远程或本地的），即一个小型的浏览器内核（精简内核） ### file协议 1. 一开始接触html开发，就已经使用了file协议（双击打开html文件） 2. “协议”，“标准”概念 3. **再次强调“协议”，“标准”的重要性**！！！ http(s)协议：线上网页（不可断网） file协议是加载本地的网页，js，css（可断网） #### file协议和http协议区别 1. file协议：本地文件（打开本地），快 2. http（s）协议：网络加载（打开远程），慢，再快也得1s左右 hybrid只能用file协议（极致的快，变态的快） 3. 看file://和整个url的关系（重要） file:///Users/... file://(/Users文件的绝对路径) https://(网址) 前端都有什么协议，标准！！！ w3c，promise ### 具体实现 1. 不是所有的场景都适合使用hybrid 2. 使用NA（原生，纯后端开发）：体验要求极致（动画，下拉刷新，上拉加载，占用内存小），变化不频繁（如头条的新闻首页） 3. 使用hybrid：体验要求高（不是特别高），变化频繁（如头条的新闻详情页） 4. 使用h5：体验无要求，不常用（如举报，反馈等页面） 具体实现： 1. 前端做好静态页面（html js css），将文件交给客户端 2. 客户端拿到前端静态页面，以文件形式存储在app中 3. 客户端在一个webview中 4. 使用file协议加载静态页面  App中存了静态文件（html文件，css文件，js文件），开一个webview，通过file协议加载 具体实现-遗留问题 1. app发布之后，静态文件如何实时更新？ 2. 静态页面如何获取内容？ ### 问题解答 1. hybrid是客户端和前端的混合开发 2. hybrid存在的核心意义在于快速迭代，无需审核（上线快，打开速度快） 3. hybrid是实现流程，以及webveiw和file协议 ### hybrid 更新上线流程 1. 回顾hybrid实现流程 2. 目的，实现途径 3. 更新流程   1. 要替换每个客户端的静态文件 2. 只能客户端来做（客户端是我们开发的） 3. 客户端去server下载最新的静态文件 4. 我们维护server的静态文件  压缩：客户端解压 版本管理：客户端对比版本（打开app对比版本，客户端和server端一致，不必要下载，若客户端低于server端版本，更新内容和版本号） ### 完整流程 1. 分版本，有版本号 如201805271404 2. 将静态文件压缩成zip包，上传到服务端 3. 客户端每次启动，都去服务端检查版本号 4. 如果服务器版本号大于客户端版本号，就去下载最新的zip包 5. 如果一样，没必要下载 6. 下载完后解压包，然后将现有文件覆盖 ### 问题解答 1. 掌握流程图 2. 要点1：服务端的版本和zip包维护 3. 要点2：更新zip包之前，先对比版本号 4. 要点3：zip下载解压并覆盖 ### hybrid和h5的区别 h5会有一段白屏，也会有个加载条 1. 优点： 2. 缺点 3. 使用场景 #### 优点 1. 体验更好，跟NA体验基本一致 2. 可快速迭代，无需app审核（关键） #### 缺点 1. 开发成本高：联调，测试，查bug都比较麻烦（联合开发） 2. 运维成本高。（更新上线流程） #### 使用场景 1. hybrid：产品的稳定功能，体验要求高，迭代频繁（常规运维的，天天都有改的） 2. h5：单次的运营活动，（红包，领奖）或不常用功能（反馈，举报），体验要求不高的 要权衡成本和收益 #### 问题解答 1. 优点：体验好，可快速迭代 2. 缺点：开发成本高、运维成本高 3. 适用的场景：hybrid适合产品型，h5适合运营型 ### js和客户端通讯 微信JS-SDK:页面能做的事情是有限的（权限非常低），有些事情必须通过app解决，js-sdk存在的意义（前端（h5）和后端的一个桥）（扫一扫，调起支付，录音，上传，下载图片） 无论是hybrid还是h5，如果想要扫一扫，必须通过客户端来做 前端js（h5，hybrid）如何和客户端通信的 微信JS-SDK（把通信方式进行了封装，js方法直接调用） 1. 回顾遗留问题（如何更新，如何获取标题，内容 api） 2. js和客户端通讯的基本形式 3. schema协议简介和使用 4. schema的封装 5. 内置上线 #### 之前遗留的问题 1. 新闻详情页使用hybrid，前端如何获取新闻内容 2. 不能用ajax获取（http和https和file协议不一样），第一跨域，第二速度慢（解析js，再ajax，最快1s） 3. 客户端获取新闻内容，然后js通讯拿到内容（可以提前获取，预取），再渲染（客户端比js快，但也快不多） #### js和客户端通信的基本形式  1. js访问客户端能力，传递参数和回调函数 2. 客户端通过回调函数返回内容 #### schema协议简介和使用 协议（约定，约定了格式，规范） 1. 之前介绍了http（s）和file协议 2. schema协议--前端和客户端通讯的约定 ~~~ 网上搜的微信部分 schema协议（weixin://）(每个app都不一样) weixin://dl/scan 扫一扫 weixin://dl/feedback 反馈 weixin://dl/moments 朋友圈 weixin://dl/settings 设置 ~~~ ~~~ 以下是演示，无法正常运行，微信有严格的权限验证，外部页面不能随意使用schema var iframe = document.createElement("iframe"); iframe.style.display='none'; iframe.src="weixin://dl/scan"; //iframe访问schema var body = document.body||document.getElementByTagName('body')[0]; body.appendChild(iframe); setTimeout(function(){ body.removeChild(iframe);//销毁，防止内存泄露 避免重复渲染iframe，异步不会影响程序的运行。 iframe = null; }) ~~~ ~~~ 如果要加上参数和callback，那么 window['_winxin_scan_callback'] = function(result){ alert(result) } ... iframe.src='weixin://dl/scan?k1=v1&k2=v2&callback=_winxin_scan_callback‘ ~~~ **iframe.src="weixin://dl/scan"; //iframe访问schema** **iframe.src='weixin://dl/scan?k1=v1&k2=v2&callback=_winxin_scan_callback‘** 传的是全局暴露的函数的函数名称，因为如果传的是内部作用域的函数，是执行不了的（jsonp） #### schema使用的封装 ~~~ 傻瓜式调用，而且不用再自己定义全局函数 window.invoke.share({title:'xxx',content:'xxx',img:''},function(result){ if(result.errno === 0){ alert('分享成功') }else{ alert(result.message) } }) ~~~ ~~~ //分享 function invokeShare(data,callback){ _invoke('share',data,callback) } //登录 function invokeLogin(data,callback){ _invoke('login',data,callback) } //分享 function invokeScan(data,callback){ _invoke('scan',data,callback) } //暴露给全局 window.invoke = { share:invokeShare, login:invokeLogin, scan:invokeScan } ~~~ ~~~ function _invoke(action,data,callback){ //拼接 schema协议 var schema = "myapp://utils" schema+="/"+ action; schema +="?a=a"//为了拼接方便,随便加了个参数 //处理参数 var key for(key in data){ if(data.hasOwnProperty(key)){ schema +="&"+key+“=”+data[key] } } //处理callback var callbackName = ""; if(typeof callback ==='string'){ callbackName = callback }else{ //函数 callbackName = cation +Date.now(); window[callbackName] = callback } schema +="&callback="+callbackName ; //触发 var iframe = document.createElement("iframe"); iframe.style.display='none'; iframe.src=schema //iframe访问schema var body = document.body||document.getElementByTagName('body')[0]; body.appendChild(iframe); setTimeout(function(){ body.removeChild(iframe);//销毁，防止内存泄露 避免重复渲染iframe，异步不会影响程序的运行。 iframe = null; }) } ~~~ ~~~ //调用 window.invoke.scan({},function(){}) window.invoke.share({title:'xx',content:'xxx'},function(result){ if(result.errno ===0){ alert('分享成功') }else{ alert(result.retMsg) } }) ~~~ ### 内置上线 1. 将以上封装的代码打包，叫做invoke.js，内置到客户端 2. 客户端每次启动webview，都默认执行invoke.js 3. 本地加载，免去网络加载的时间，更快 4. 本地加载，没有网络请求，黑客看不到schema协议，更安全 ### 问题解答（如何通讯） 1. 通讯的基本形式：调用能力，传递参数，监听回调（和ajax，jsonp基本一致） 2. 对schema协议的理解和使用 3. 调用schema代码的封装（简单，容易） 4. 内置上线：更快、更安全 ### 总结 1. hybrid是什么？为何用hybrid * 客户端和前端的混合开发 * 核心：快速迭代，无需审核 * 实现流程图，以及webveiw和file协议 2. 介绍一下hybrid更新和上线流程（和h5不一样） * 流程图 * 服务器的版本和zip包维护 * 更新zip包之前，先对比版本 * zip解压和覆盖 3. hybrid和h5的主要区别（混合开发，纯粹的前端开发）】 * 优点：体验好，快速迭代 * 缺点：开发成本高，运维成本高 * 场景：hybrid产品型，h5适合运营型 4. 前端js和客户端如何通讯？ * 通讯基本形式：调用能力，传递参数，监听回调 * 对schema协议的理解和使用（iframe） * 调用schema代码的封装 * 内置上线的好处：更快，更安全