Hybrid

编程之家收集整理的这篇文章主要介绍了Hybrid编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

一,hybrid是什么,为何用hybrid?
二,hybrid更新和上线流程
三,hybrid和h5区别
四,前端js和客户端如何通讯?

 

一,hybrid是什么,为何用hybrid?
1,文字解释
hybrid即“混合”,即前端和客户端的混合开发
需前端开发人员和客户端开发人员配合完成
某些环节也可能涉及到server端
 
2,存在价值,为何用hybrid
可以快速迭代更新【关键】,无须app审核,(思考为何?,因为没有权限操作手机系统的API,不会有安全隐患)
体验流畅(和NA的体验基本类似)-肉眼区别不出来
减少开发和沟通成本,双端公用一套代码(ios和android)
 
3,webview
是app中的一个组件,app可以有webview,也可以没有
用于加载H5页面等,即一个小型的浏览器内核,是个统称
例,浏览器中:

分享图片

微信中:

分享图片

 
4,file://协议
一开始做网页,就已经使用file协议了,双击打开
只不过当初没有协议,标准的概念
再次强调协议,标准的重要性!!!如前端的 w3c标准,promise标准等等啊
加载本地的资源

分享图片

分享图片

 
01,http协议和file协议区别:
file协议:本地文件,快    file://
http/https协议:网络加载,慢  http://  
 
5,hybrid实现流程
不是所有场景都适合hybrid:
使用NA:体验要求极致,变化不频繁(如头条的首页
使用hybrid:体验要求高,变化频繁(如头条的新闻详情页)
使用H5:体验无要求,不常用(如举报,反馈等页面

 

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

分享图片

 

遗留问题:
app发布之后,静态文件如何实时更新?
静态页面如何获取内容

 

二,hybrid 更新上线流程
回顾hybrid实现流程
思考(目的,实现途径)

分享图片

 

serve端,可以随时更新文件
更新流程
思考(目的,可行途径):
要替换每个客户端的静态文件
只能客户端来做
客户端去server下载最新的静态文件
维护server的静态文件

 

完整流程:
分版本,有版本号,如201803211015
静态文件压缩成zip包,上传到服务端
客户端每次启动,都去服务端检查版本号
如果服务端版本号大于客户端版本号,就去下载最新的zip包
下载完之后解压包,然后将现有文件覆盖
要点1:服务端的版本和zip包维护
要点2:更新zip包之前,先对比版本号
要点3,zip包下载解压和覆盖

分享图片

  

 三,hybrid 和 H5 的比较:
1,优点:
体验好,跟NA基本一致
快速迭代,无需app审核(关键)
2,缺点:
开发成本高,连调,测试,查bug都比较麻烦
运维成本高,参考上面讲的更新上线流程
3,适用的场景
hybrid:产品的稳定功能,体验要求高,迭代频繁,适用于产品型
h5:单次的运营活动(如XX红包),或不常用功能,适用于运营型

   

四,前端和客户端通讯  
(微信公众平台:JS-SDk(微信公众平台封装的,h5前端和客户端的一个桥),下面内容要深入一些)
1,回顾之前的问题
2,js和客户端通讯的基本形式
3,schema协议简介和使用(前端和客户端通信的协议规定)
4,schema使用的封装
5,内置上线

 

新闻详情页适用hybrid,前端如何获取新闻内容
不能用ajax获取,第一,跨域,第二,速度慢
hybrid是客户端获取新闻内容(可以提前获取),然后js通讯拿到内容,再渲染

 

js和客户端通讯的基本形式
js访问客户端能力,传递参数和回调函数
客户端通过回调函数返回内容

分享图片

 

schema协议简介和使用(前端和客户端)
之前介绍了http/https和file协议
scheme协议——前端和客户端通讯的约定  如   weixin:// (APP自己定的)

分享图片

 
// schema协议简介和使用 // 以下是演示,无法正常运行,微信有严格的权限验证,外部页面不能随意使用schema var iframe = document.createElement(‘iframe‘); iframe.style.display = ‘none‘; iframe.src = ‘weixin://dl/scan‘; //iframe访问schema var body = document.body || document.getElementsByTagName(‘body‘)[0]; body.appendChild(iframe); setTimeout(function() {     body.removeChild(iframe); //销毁iframe     iframe = null; })

 加上参数和callback

// 如果要加上参数和callback,那么就要这么写 window[‘_weixin_scan_callback‘] = function(result) {     alert(result); } // ..省略 iframe.src = ‘weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback‘ // ..省略

schema协议的封装

新建invoke.js

(function(window) {     // 跳用schema的封装     function _invoke(action, data, callback) {         // 拼装schema协议         var schema = ‘myapp://utils/‘ + 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 = action + Date.now();             window[callbackName] = callback;         }         schema += ‘&callback=‘ + callbackName;         // 触发         var iframe = document.createElement(‘iframe‘);         iframe.style.display = ‘none‘;         iframe.src = schema; //重要         var body = document.body || document.getElementsByTagName(‘body‘)[0];         body.appendChild(iframe);         setTimeout(function() {             body.removeChild(iframe); //销毁iframe             iframe = null;         })     }     // 暴露到全局变量     window.invoke = {         share: function(data, callback) {             _invoke(‘share‘, callback)         },         scan: function

总结

以上是编程之家为你收集整理的Hybrid全部内容,希望文章能够帮你解决Hybrid所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

相关文章

猜你在找的Hybrid相关文章

tag,untag以及交换机的各种端口模式是网络工程技术人员调试交换机时接触最多的概念了,然而笔者发现在实际工作中技术人员往往对这些概念似懂非懂,笔者根据自己的理解再结合一个案例,试图向大家阐明这些概念 untag就是普通的ethernet报文,普通PC机的网卡是可以识别这样的报文进行通讯; tag报文结构的变化是在源mac地址和目的mac地址之后,加上了4bytes的vlan信息,也就是vlan
预备知识:Tag,untag以及交换机的各种端口模式是网络工程技术人员调试交换机时接触最多的概念了,然而笔者发现在实际工作中技术人员往往对这些概念似懂非懂,笔者根据自己的理解再结合一个案例,试图向大家阐明这些概念untag就是普通的ethernet报文,普通PC机的网卡是可以识别这样的报文进行通讯;tag报文结构的变化是在源mac地址和目的mac地址之后,加上了4bytes的vlan信息,也就是v
华为:Access、Hybrid和Trunk三种模式的理解预备知识: Tag,untag以及交换机的各种端口模式是网络工程技术人员调试交换机时接触最多的概念了,然而笔者发现在实际工作中技术人员往往对这些概念似懂非懂,笔者根据自己的理解再结合一个案例,试图向大家阐明这些概念 untag就是普通的ethernet报文,普通PC机的网卡是可以识别这样的报文进行通讯; tag报文结构的变化是在源mac地址
转自 http://blog.sina.com.cn/s/blog_3fcc38fc010007w4.html 1. Access端口 (1)收到一个二层帧 (2)判断是否有VLAN标签:没有则转到第3步,有则转到第4步 (3)打上端口的PVID,并进行交换转发 (4)若VLAN标签和PVID一致,转发VLAN帧;否则直接丢弃 2. trunk端口 (1)收到一个二层帧 (2)判断是否有VLAN标
以下是我对vlan的一点理解。   大家知道,交换机会把广播报文(目的mac地址全1的报文)和未知单播报文从所有端口转发出去(除了报文的接收端口),这就是广播。(对未知多播报文如何处理呢,我不知道,应该也会广播出去,这是一个遗留问题,哪位同学知道的请教教我哈)。一般交换机会发送很多广播报文,如果按照上面的处理方法,势必会影响整个网络的通信。vlan就是为了划分广播域而产生的。划分vlan之后,广播
关于Trunk、Hybrid、Access、Tag、Untag、Pvid的关系与区别 1、Trunk口,Trunk口上可以同时传送多个VLAN的包,一般用于交换机之间的链接。     2、Hybrid口,Hybrid口上可以同时传送多个VLAN的包,一般用于交换机之间的链接或交换机于服务器的链 接。     3、Access口,Access口只能属于1个VLAN,一般用于连接计算机的端口。    
以下是我对vlan的一点理解。 大家知道,交换机会把广播报文(目的mac地址全1的报文)和未知单播报文从所有端口转发出去(除了报文的接收端口),这就是广播。(对未知多播报文如何处理呢,我不知道,应该也会广播出去,这是一个遗留问题,哪位同学知道的请教教我哈)。一般交换机会发送很多广播报文,如果按照上面的处理方法,势必会影响整个网络的通信。vlan就是为了划分广播域而产生的。划分vlan之后,广播只在
  预备知识: Tag,untag以及交换机的各种端口模式是网络工程技术人员调试交换机时接触最多的概念了,然而笔者发现在实际工作中技术人员往往对这些概念似懂非懂,笔者根据自己的理解再结合一个案例,试图向大家阐明这些概念。 untag就是普通的ethernet报文,普通PC机的网卡是可以识别这样的报文进行通讯; tag报文结构的变化是在源mac地址和目的mac地址之后,加上了4bytes的vlan信