文档章节

浅谈Hybrid

Android小闹
 Android小闹
发布于 2017/08/01 16:15
字数 1668
阅读 2260
收藏 97
点赞 6
评论 4

Hybrid

#一.了解Hybrid 词典上的翻译 就是混合体的意识 那么在移动开发中他就是Native+Web混合开发的意思

Hybrid

#二.Native App、Web App、Hybrid App

对比图表

总结起来两句话:

纯Native的迭代太慢,不能动态更新,且不能跨平台

纯Web页,有很功能无法实现,有些动画效果实现其体验太差

因此我们需要Hybrid

ps:怎样判断一个App的页面是native的还是web的?

Android手机 设置->开发者选项->显示布局边界 即可

#三.Web Native 如何通信 说Hybrid首先肯定是要从Web和Native图和通讯说起

Android里面

Android call JS 两种Api

  1. WebView loadUrl()

  2. WebView evaluateJavascript()

Android call JS

当你的App只需要支持4.4以上的手机的时候就用evaluateJavascript() 确实4.4一下的手机越来越少不到10%,否则老老实实loadurl()

JS call Android 三种Api

  1. addJavascriptInterface

  2. shouldOverrideUrlLoading()

  3. alert()、confirm()、prompt()

JS call Android

如果不需要考虑只有5%的人使用的4.2以下的手机果断addJavascriptInterface 需考虑ios统一问题就拦截Url 需要返回值拦截prompt()

最后因为考虑到版本兼容和ios统一的问题 我们最终选择的是loadUrl + shouldOverrideUrlLoading的方式

web2native详细讲述请点击

各种方式的详细使用Demo请点击我的GitHub

#四.Hybrid框架设计 Hybrid设计无非就是要考虑如下的几件事情 如图是我们刚刚起步的Hybrid框架开发 Hybrid实现情况

支持组件调用(如吐司,dialog 进度条等等),支持方法调用 就是把通过shouldOverrideUrlLoading拦截到的url进行封装解析的过程。

缓存前期可以用系统自带的缓存,当然想要更灵活我们可以自己搞一套,详见下面的Cache部分。

页面的统一跳转意思就是在我们App开发完之后,js可以跳转到已经有的任意页面,这就需要一个好的路由配置,可以仿造Arouter 自己开发一个轻量级的页面路由功能,解耦页面间的跳转。

拓展和复用就不用我多说了,这里面肯定有一个循序渐进的过程。

#五.Cache Android的网页缓存有两种

###1.浏览器缓存

就是所有的浏览器都支持的缓存,是页面级的缓存。

根据协议头中的参数定义的缓存Cache-Control(或 Expires)和 Last-Modified(或 Etag)。

所以说浏览器缓存是缓存在协议层上的实现。

下面是58同城M站首页随便的一个js,我们看到他设置的是600秒也就是十分钟的缓存时间,

而上次更新时间确实16年5月20号。我们分别记录了第一次访问,第二次访问,和十分钟后的第三次访问。

我们看到Status code 分别是 200|200(from disk cache)|304

这就意味着分别是从网络获取|本地缓存获取|以及请求之后发现没有更新|再取本地

Hybrid

Android这边可以根据Api控制webview的浏览器缓存策略。

WebSettings webSettings= webView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

LOAD_CACHE_ONLY:不使用网络,只读取本地缓存数据

LOAD_DEFAULT:根据cache-control决定是否从网络上取数据。

LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式

LOAD_NO_CACHE:不使用缓存,只从网络获取数据.

LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。

上面的缓存机制可以基本满足我们WebApp的需求,但是我们的Hybrid可以做的更好

想做的更好就要解决这两个问题

  1. 缓存的时间不知道设置多长时间合适,设置的长了不能及时更新,设置的短了没有缓存的效果
  2. 304虽然不下载 但是有请求 也耗资源

我们已一个具体的例子来解释下

Hybrid

这是谁网上找到的应用案例,首先超时时间设置了半年,相当于可以不用考虑 同是根据资源的版本号,判断是否需要网络请求新版本的js

当然这样做的代价就是需要一个本地的资源与版本的映射关系,服务端也要=做好一个更新版本的管理后台。

这里参考了大牛的文章

###2.H5缓存

是数据级的缓存 一共五种如下

Hybrid

所以相对的H5缓存是缓存在应用层上的实现

我们最终采用的是浏览器缓存+Dom storage的方式,其中dom storage用于存储一些数据,方便一些表单的重复提交

这里推荐一篇写的非常好的解释缓存的文章

#六.统一页面跳转路由

最后我们聊聊页面的统一跳转,这个不是Hybrid必须的,但是可以解决大项目,复杂项目,组件化比较明显的项目

使各个Model 各种实现形式的页面之间解耦。

各种路由实现上大同小异,这里以Arouter为例简单解释,我们在搭建Hybrid框架的过程中,可以慢慢模仿实现,没必要全盘引入

这样既可以轻量,对自己也是一个提高。

###首先是遇得到的痛点

  1. Native页面 WebView 浏览器外链 页面的实现形式太多,页面跳转不好管理,耦合性高
  2. 各modle间页面的相互唤起,尤其是低级model如何唤起上级model的activity
  3. 页面pv uv不好统一统计

###Arouter

主要的功能点是:

  1. Native WebView 页面的统一跳转
  2. 外链、统一入口
  3. 业务降级
  4. 跳转拦截
  5. 声明使用简单
  6. 支持处理『未知页面』

解决了上面的用户痛点

具体的使用方法git上面写的很清楚了,这里就不赘述了。

Github地址

我们根据他的原理看看我们如何模仿着做一个轻量级的。

原理如图所示

Hybrid

在这里应用了JavaPoet在编译时对注解内容进行解析,行程对应关系类,在运行时生成页面映射信息,减少了运行时的开销。

当然我们自己的Hybrid前期可以简单的用注解和反射替代javaPoet,在运行时生成一个映射表,来起到相同的作用。


本文旨在给大家掀开hybrid的大门,了解Hybrid的整体思路,后续随着我们项目的不断完善,我会写一篇专门介绍Hybrid从0到1的文章,欢迎大家指教。

© 著作权归作者所有

共有 人打赏支持
Android小闹
粉丝 13
博文 4
码字总数 4268
作品 0
朝阳
高级程序员
加载中

评论(4)

Android小闹
Android小闹

引用来自“懒懒想睡觉”的评论

虽然也写hybrid,但是我也看不懂。。- -
:broken_heart:
Android小闹
Android小闹

引用来自“3kqing”的评论

虽然看不懂,但是写的不错!
:kissing_heart::kissing_heart:
懒懒想睡觉
虽然也写hybrid,但是我也看不懂。。- -
Skqing
Skqing
虽然看不懂,但是写的不错!
浅谈Hybrid技术的设计与实现

随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用...

黄金林
2016/12/21
10
0
【初窥javascript奥秘之让人捉摸不定的this】你知道现在this指向哪里吗???

前言 之所以会有此篇文章当然还要从最近的一次面试说起,很抱歉居然又扯到面试上去看,其实不要说,平时不注意的东西,往往在面试时便会立马给你揪出来哪里有问题。 比如我当时就小小的栽了个...

范大脚脚
2017/12/14
0
0
浅谈Hybrid技术的设计与实现第二弹

上文说了很多关于Hybrid的概要设计,可以算得上大而全,有说明有demo有代码,对于想接触Hybrid的朋友来说应该有一定帮助,但是对于进阶的朋友可能就不太满足了,他们会想了解其中的每一个细节...

北方人在上海
2016/06/03
54
0
ELSE 技术周刊(2017.10.02期)

本期推荐 ES6 Promise:模式与反模式 这是一篇有用的关于常见 Promise 模式和反模式的文章。 业界动态 React v16.0 React 16 如期发布,遵循 MIT 许可。 当地时间 9月 26 日,FB 工程师 Andr...

风清洋ELSE
2017/10/02
0
0
浅谈Native、Web App、Hybrid、RN 和 Weex优劣

一句话概要 Native、Web App、Hybrid、React Native(后面以RN简称)、Weex 间的异同点,后期同步 小程序 和 PWA App常用开发模式【简介】 此处App为应用,application,并非我们通常讲的手机...

木羽zwwill
2017/09/19
0
0
浅谈APP测试经验

近年来,随着智能手机兴起,很多App软件不断涌起。那今天我浅谈一下本人在工作如何测试App软件与经验。 一、App三种开发模式介绍(测试App时,必须要先了解您测试的App是用什么模式开发的) ...

KasthSoft
2017/06/05
0
0
《浅谈JavaScript系列》系列技术文章整理收藏

《浅谈JavaScript系列》系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对...

开元中国2015
2015/07/27
1K
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
基于PVLAN的小区网络配置范例 (比较BT+经典)

基于PVLAN的小区网络配置范例 一、 拓扑结构 配置说明:(此范例为测试环境),实际为7500E+5510+E126 。 1、要求每个PC间都进行隔离,PC机数目为300多台,划了2个VLAN。(192.168.0.1/24 ;1...

JavaGG
2009/05/05
177
0
Access、Hybrid和Trunk三种模式的理解

Access、Hybrid和Trunk三种模式的理解 以太网端口的三种链路类型:Access、Hybrid和Trunk: Access 类型的端口只能属于1个VLAN,一般用于连接计算机的端口,也可以连接交换机和交换机。 Trun...

独钓渔
2016/07/13
63
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ES15-JAVA API 索引管理

1.创建连接 创建连接demo package com.sean.esapi.client;import java.net.InetSocketAddress;import org.elasticsearch.action.get.GetResponse;import org.elasticsearch.clien......

贾峰uk
7分钟前
0
0
单点登录的设计,从单域名到多域名(经验分享)

个人实践总结,最初的的需求,多个产品线都在同一个根域名下面。 独立的用户中心分离,单独负责用户登录和用户信息获取、变更等处理逻辑。 第一步,用户登录成功,分配给用户一个memToken(令...

小海bug
8分钟前
0
0
合格前端第十二弹-TypeScript + 大型项目

写在前面 TypeScript 已经出来很久了,很多大公司很多大项目也都在使用它进行开发。上个月,我这边也正式跟进一个对集团的大型运维类项目。 项目要做的事情大致分为以下几个大模块 一站式管理...

qiangdada
12分钟前
0
0
编程学习之如何在Node.js中优化服务器端渲染?[图]

编程学习之如何在Node.js中优化服务器端渲染?[图] 在 Airbnb,我们花了数年时间将所有前端代码迁移到 React 架构,Ruby on Rails 在 Web 应用中所占的比例每天都在减少。实际上,我们很快会...

原创小博客
14分钟前
0
0
gradle学习笔记

相关文档 适合新手的 gradle 自学教程合集 Gradle教程

OSC_fly
28分钟前
0
0
Virtual Serial Port - RFC2217

Virtual Serial Port for Linux RFC-2217 The COM Port Control Protocol pyserial - RFC 2217 NetSerial - Windows Telnet COM Port - RFC Official Using Python, How do I make a virtual......

zungyiu
35分钟前
0
0
全球的IPv6部署急剧增加,中国进度较慢

导读 全球的IPv6部署继续增加,但中国在IPv6方面还需要努力,从部署图上分析,中国几乎没有几个地方是普及IPv6的。这6年来,自世界IPv6发布以来,全球网络和服务提供商的IPv6部署水平急剧增加...

问题终结者
39分钟前
1
0
好看的电影记录

星际迷航三 狂暴之路 新木乃伊 黑夜传说 铁血战士2

xd03122049
42分钟前
0
0
记录Yii2框架开发遇到微信错误提示

转载地址 记录Yii2框架开发遇到微信错误提示 微信公共号开发,提示“该公众号暂时无法提供服务,请稍后再试”,如何解决? 以前使用Yii框架的时候,并没有像Yii2,以前的Yii框架似乎用起来在...

durban
45分钟前
1
0
LSM树(Log-Structured Merge Tree)存储引擎浅析

其实每一种数据库,它都是一种抽象的数据结构的具体实现。 随着rocksDB(facebook的),levelDB(google的),以及我们熟知的hbase,他们都是使用的LSM树结构的数据库。 它的核心思路其实非常...

算法之名
58分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部