app---hybird app混合开发介绍

一 概念

1 Hybird App,是用现有前端(html,js,css)技术来开发的app。
特点：1 灵活(开发灵活 ，部署灵活) 2 拥有类似原生的性能体验。

2 不是h5页面，也不是在webview里面加载的。 
而是通过例如webpack打包工具生成的js bundle资源文件，放到原生本地渲染（原生需集成环境）。

 

二 优点

1 拥有web/h5的灵活性,支持随时热更新(增量更新); 同时拥有原生app的性能。

2 编写一次， 多端通用,跨平台,体验一致。

3 组件可以modules和compontents化，开发效率及复用率高。

4 支持扩展: 可直接调用原生组件(需要按规则封装),原生也可以反过来和混合页面交互；当然也可以调用三方modules组件模块。

 

三 原理

1 主要通过javascript 内核引擎（JsCore 内核）,虚拟化技术解析，将js控件转成对应的原生组件 渲染。（例如：div、img 等转成原生的 View、Image 等组件）
当然weex里-----------Android 下使用 UC 提供的 v8 内核。

---每个端都基于 DOM 模型设计并实现了标准的界面渲染接口 供 JavaScript 引擎调用。
---采用了内存 Dom tree Diff 计算，优化了 view 的渲染效率和体验。

ps: weex在版本上支持降级成h5,从而当weex渲染失败的时候，使用webview加载url。

 

四 应用及场景

1 页面功能模块频繁变动，需要快速更新迭代(或者能快速的fix线上bug)。

2 页面展示性的内容为主(影响用户输入的及固定的,一般用原生;
分享出去的用h5页面)。

 

五 发展形势

一 用JavaScript 开发app应用已经是客户端（甚至前端）必备的技能

能解决:
1 开发一次，2端(甚至3端)通用。

2 ios快速发布及修复功能模块（原生不支持热更新 ；提交审核缓慢）

 

二 目前流行框架解决方案有:

React Native -----facebook 已开源-----https://reactnative.cn/

weex/Rax------alibaba 已开源（支持vue和react2个版本）--- https://weex.apache.org/cn/guide/

 

三 案例

手机百度，微信小程序(Rn改造),携程,qq空间,电商类,金融类app，支付宝,天猫,手淘,淘票票,飞猪,淘宝头条。。。

 

 

六 适用人员

1 有前端和原生经验的app开发者

2 前端开发人员(vue.js/react.js)

 

七 weex框架 和 React Native框架对比

一 Weex 对现有项目兼容性较好，入侵性较低：

1 weex允许项目里面部分页面使用weex；也可以整个项目都使用，而且它自带webview,tab, navigator…

2  写法更贴近前端(单位用px)。

3   原生可以封装方法和组件 ，供weex页面调用。

4   可以引用三方组件。

二 React Native 要求最好整个项目都用它改造，现有项目重构改动大。

1 他里面自带了android/ios目录 ，有项目结构，必须按照它的写法。

2 写法更贴近原生。

3 原生也可以封装方法和组件 ，供页面调用。

4 也可以引用三方组件。

 

八 weex简单介绍

一 Weex 是一套简单易用的跨平台开发方案

能以 web 的开发体验构建高性能、可扩展的 native 应用，遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。 目前支持vue和rax(react) 2个dsl分支。

二 涉及到的相关知识

1 前端基础html,js,css (flexbox布局)
2 ES6语法基础
3 Vue.js 基础
4 Weex 相关api
5 原生知识
1 android使用java开发，只要按java写法，外加熟悉下android的控件和组件即可。
2 weex使用vue.js开发，只要按vue.js写法(js),外加熟悉下weex的控件 和 功能module即可。

Vue.js 是一套构建用户界面的渐进式框架.
 1 简单,用熟悉的html,css来编写。
2 清晰,专注于MVVM 模型的 ViewModel 层。
3 使用了虚拟化DOM,不直接操作DOM.性能较高。    4 组件化思想,复用率高。

三 demo演示

http://dotwe.org/vue/14ef9c678038b54d992fb0bc9d462f6e

九 必备组件介绍

BindingX———https://alibaba.github.io/bindingx/
阿里巴巴开源的一套基于 Weex、React Native 的富交互解决方案 「BindingX」。提供了一种称之 为 「Expression Binding」 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验。

进一步介绍

https://www.jianshu.com/p/14729b28d15f

GCanvas—————https://alibaba.github.io/GCanvas/
阿里开源绘图，兼容web,weex,React Native

Weex UI组件库(飞猪提供)----------https://alibaba.github.io/weex-ui/#/
基于vue.js里面有封面的组件效果，对开发非常有帮助

 

 

网易也用weex----https://github.com/zwwill/yanxuan-weex-demo

网易严选

 

 

 

其他

谷歌的flutter （用dart语言开发）混合开发框架开始流行不拘一格，不用js去开发及jscore虚拟机转换。直接拥有jit即时编译及静态语言aot编译成字节码功能。

https://flutter.dev/