hybrid开发(hybrid开发原理)

跨端开发面面谈之基于WebView的Hybrid开发模式

跨终端移动开发是近期准备总结的一个主题，作为这一系列的开始，首先简单说说基于WebView的Hybrid混合开发模式。

有过混合应用开发经验的同学，对基于WebView的Hybrid开发模式应该不会陌生。借助于原生端各平台的WebView组件，可以实现Native和JavaScript的双向通信，从而将Web App与Mobile App融合起来，开启混合开发的新模式。

基于WebView的Hybrid开发模式到如今已经非常成熟，不再是一个实验性新技术，而是广泛应用在各大厂商的平台型应用如微信、手Q中。

JSBridge作为连接Native和JavaScript的桥梁，是基于WebView的Hybrid开发模式中的关键点。

在了解其通信原理后，再来看JSBridge究竟是什么。从前端角度来看，可能会把JSBridge理解为业务开发过程中，以全局变量注入到WebView中，帮助调用原生API的JavaScript工具库。这样的理解不够准确，按照我的理解，JSBridge不是一个标准的规范，基于原生系统为WebView组件提供的能力，已经可以建立起WebView JavaScript bridge，即使不再做更高程度的封装，也可以完成从Native到JavaScript的双向通信了。

我们所说的JSBridge，是对底层通道的抽象封装，这一过程包括了原生和JavaScript两侧内容，在原生端需要考虑系统API差异，对上层调用提供统一接口，在JavaScript端需要考虑调用方式，请求管理等内容。JSBridge的设计实现已经是成熟技术了，其设计可以参考 In-depth Profiling of JSBridge 、 Hybrid APP架构设计思路 ，一个安卓端完整JSBridge实现可以参考 JsBridge实现 。

目前，基于WebView的Hybrid开发模式非常成熟，广泛应用于各类平台型App中。实现一个完善的JSBridge是在现有App中集成使用Hybrid开发模式的基础，在完成这一基础设施建设后，大家继续在各个方向深挖，在不同的维度不断优化性能和体验。

多数App的Hybrid部分做到上面部分，已经有了还不错的体验。在我的了解中，空间团队在上面基础上继续优化给出的是当前做的更好的方案。其主要流程如下图所示，详细内容可以参考 QQ空间前端工程师如何做首屏优化

除了在现有App中集成使用这一开发模式，还可以使用这一技术开发独立App。早期的PhoneGap、Cordova、现在的Ionic，是这一领域较为知名的开发框架。

我司前端技术栈曾以Angular为主，一些App也由前端团队基于Angular技术栈选型Ionic。初入团队曾维护过基于Angular 1.x的Ionic App，用于我司投资顾问服务客户的以IM为主、综合一些其他业务，可以算一个比较复杂的应用。

前端技术背景的同学，采用Ionic框架开发App的学习成本不高。开发过程中仍在沿用前端技术，写的仍是Web App,跑在原生WebView容器中。采用Ionic提供的组件库，可以快速搭建项目界面。其扩展原生的机制也比较方便，如有原生能力的需求，并且没有现成实现的，可以自行封装使用，不过这个过程就需要原生开发同学的参与了。在我们的上述App开发中，主要是安卓端消息推送模块由原生开发同学提供了支持，其余对原生能力的需求如拍照、相册访问等常见需求，都有现成方案。

然而，采用Ionic完成上述应用，也有明显不足的地方。首先是聊天列表方面，我们知道，如微信和QQ聊天窗口，这是一个异构的无限滚动长列表，在进入聊天界面时，一般只加载最近的一屏聊天数据，然后通过滚动加载历史消息。在原生端完成这一需求有各种常见手段，而仅靠Web端技术，在各种折腾后，效果都不尽如人意。其次是动画，这里的动画包括了换页动画和其他动画，流畅程度一般。最后是前端开发通病，要处理浏览器兼容性问题，crosswalk只是一个理论解决方案，其体积限制了几乎不会被采用。

Ionic不断迭代，新的版本中依赖新的Angular。新的Angular与Angular 1.x开发体验已经完全不同，如果你还不了解，可以阅读我们团队书籍 揭秘Angular 2 。新的Ionic的开发体验，相比以往也有提升，在其工具链中，提供了拖拽式项目生成工具

同时，Ionic pro提供的开发者工具，为应用整个生命周期提供了完善的支持平台，包括了以下功能，不过，使用需要付费。

站在当下来看，对于前端技术背景开发者来说，如果已有Angular基础，不希望引入过高学习成本，需要快速开发一个复杂程度不算太高、或者对应用性能不是特别敏感的跨终端App，选择Ionic依然是一个可行方案。

然而，既然你已经身在前端领域这样一个技术更迭日新月异的圈子里，还是应该使劲的折腾，关注跨端开发这个主题新的技术热点，接下来我也会继续谈谈在NativeScript、React Native、Flutter的一些体验，可以保持关注。

Hybrid开发之webview发生偏移的解决办法

1.场景1

UIwebview和WKWebview点击页面空白处，webview页面会出现上移的现象。

解决办法：

第一种方案：取消页面自动布局 self.automaticallyAdjustsScrollViewInsets=NO;

self.edgesForExtendedLayout=UIRectEdgeNone;

第二种方案：将坐标原点设置为导航右下角：

self.navigationController.navigationBar.translucent=NO;

2.场景2 从有原生导航的页面进入无导航的页面（webview页面内部跳转），发现跳转回来之后出现一个20像素的向上偏移（跟状态栏的高度一致）

解决方法：

第一种方案：监听此事件的H5，back返回方法。

向下偏移20像素

[self.webview.scrollView setContentInset:UIEdgeInsetsMake(20, 0, 0, 0)];

第二种方案：将坐标原点设置为导航右下角：

self.navigationController.navigationBar.translucent=NO;

3.场景3：

在iOS 11系统和iOS 11一下系统设置取消自动布局会有很大差异，iOS 11页面显示正常，而iOS 11以下则向上偏移了一个系统导航栏的高度

为什么国内突然冒出很多Hybrid混合移动应用开发框架

为什么国内突然冒出很多Hybrid混合移动应用开发框架

1、维护两套（IOS，Android，甚至是wp）应用太麻烦了，时间成本，人力成本相对混合框架来说太高

2、对于小公司，并没有ios或者android程式设计师，但是web程式设计师肯定是有的。所以因为成本或者别的原因，没有招ios和android程式设计师，那么最好的解决办法就是Hybrid

Hybrid App、Web App、Native App，哪一种模式会成为App开发主流？下面phonegap100我与您一起分析为什么Native和Web过时了，企业级移动开发开始用Hybrid App

随着HTML5被过度热炒和实际开发中遇到的效能以及体验问题，Web App逐渐势弱。但是Native App开发难度大、成本高、周期长等问题突出，特别是App不断推陈出新，开发一个App的成本或许可以接受，但是维护一个Native App更新的成本则成了跨不过的悬崖。最终开发者和企业发现Hybrid App，这种既有跨平台开发周期短、成本低的基因，又能发挥Native App体验和效能的优势，Hybrid App混合式移动应用开发逐渐成为企业移动开发的首选。

android 五大应用开发框架是什么？

android应用开发框架是 Application Framework. 其系统架构由5部分组成，分别是：Linux Kernel、Android Runtime、Libraries、Application Framework、Applications。

1.Linux Kernel

2.Android Runtime

3.Libraries

4.Application Framework

5.Applications

andbase框架:

1.andbase中包含了大量的开发常用手段。

如网路下载，多执行绪与执行绪池的管理，资料库ORM，图片快取管理，图片档案下载上传，Http请求工具，常用工具类（字串，日期，档案处理，图片处理工具类等），能够使您的应用在团队开发中减少冗余程式码，很大的提高了程式码的维护性与开发高效性，能很好的规避由于开发疏忽而导致常犯的错误。

2.andbase封装了大量的常用控制元件。

如list分页，下拉重新整理，图片轮播，表格，多执行绪下载器，侧边栏，图片上传，轮子选择，图表，Tab滑动，日历选择器等。

3.强大的AbActivity，您没有理由不继承它。

继承它你能够获得一个简单强大可设定的操作栏，以及一系列的简单呼叫，如弹出框，提示框，进度框，副操作栏等。

4.提供效率较高图片快取管理策略，使记忆体大幅度节省，利用率提高，效率提高。

程式中要管理大量的图片资源，andbase提供简单的方法，几步完成下载与显示，并支援缩放，裁剪，快取功能。

5.封装了大量常见工具类。

包括日期，字元，档案，图片等各种处理函式， 多而全。

6.用andbase大量减少handler的使用，而采用回拨函式，程式码更整洁。

handler会产生大量程式码，并且不好维护，andbase对handler进行了封装。

7.简单轻量支援注解自动建表的ORM框架（支援一/多对多的关联操作）。

写sql，建表，工作量大，andbase提供更傻瓜非同步增删改查工具类。

8.非同步请求框架，网路请求标准化，支援档案上传下载，get，post，进度显示。

如何从零开始搭建一个javaweb企业级应用开发框架

把maven专案转换为java web专案结构非常的简单，按如下的步骤操作即可：

1）在main目录下，新增webapp目录。

2）在webapp目录下，新增WEB-INF目录。

3）在WEB-INF目录下，新增web.xml档案。

按照上面三步操作完成以后，会出现IDEA给一个提示，点选configure按钮，会看到一个确认框，单击ok，按钮就可以把当前专案变成web专案。

关于JAVAweb的框架，现在大多数无非都是基于SSH(Spring，Struts2/SpringMVC和Hibernate)或者SSM(Spring，Struts2/SpringMVC和Mybatis)

这些现在大多百度都有教程和Demo，参照着多弄几遍，就会用了，要理解还得反复推敲

:blog.csdn./gebitan505/article/details/44455235/

去看吧

HTML5移动应用开发为什么需要引入前端工程化

总体上应该一样，技术体系都差不多。不过pc需要相容的浏览器更多些,mobile下andorid,ios都是基于webkit，所以相对好些。

移动前端开发可分为：

1、手机网页开发。这部分跟web前端开发差别不大，使用的技术都是+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。手机网页可以理解成pc网页的缩小版加一些触控特性。因为是在浏览器中进行的网页开发，所有最终程式码具有跨系统平台的特性。

2、app前端开发。使用的技术也是+css+js，但它需要基于PhoneGap等开发平台呼叫手机核心功能介面（包括地理定位，加速器，联络人，声音和振动等）模拟native app，这部分跟web前端开发完全不同。最终程式码释出要分别编译成各系统平台的app。