zoukankan      html  css  js  c++  java
  • 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/

     

     

  • 相关阅读:
    XHProf的安装和使用(PHP性能测试神器)
    Visual自动添加CSS兼容前缀
    webpack9--删除冗余的CSS
    Vue 获取自定义属性的值
    webpack8--删除dist目录,压缩分离后的CSS
    webpack7--css压缩成单独的css文件
    APICloud 真机连接失败
    js 实现遮罩某一部分
    js实现选集功能
    微信小程序——wxParse使用方法
  • 原文地址:https://www.cnblogs.com/softwarelanguagebs/p/10189586.html
Copyright © 2011-2022 走看看