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/

 

 

posted @ 2018-12-28 11:37  JavAndroidJSql  阅读(5363)  评论(0编辑  收藏  举报