说在前面:
本屌是一名 Android App 开发者, 从大学毕业开始一直都是与原生 App 打交道, 前几年 Android 在市场上大火, 需求也是很多, 本屌混的也顺风顺水, 好不得意.
然而最近几年随着小程序, web,App 端各种端大行其道, 又恰逢互联网寒冬, 各个公司都在节约成本, 以前一个项目 Android,iOS 都会有相应的开发人员, 现在公司都要求人员会跨平台开发, 以前 2 个人干的多端活, 现在 1 个人干多端, 只会原生 App 开发那一套已经行不通了, 本屌心里那个慌啊, 各位看官心里慌不慌? 多端统一开发已是大势所趋, 趁着现在还能动 (已经三十而立了), 赶紧多学一些吧...
公司最近的项目要求在 Android,iOS, 小程序上同时运行, 前端开发人员仅本屌一人, 为了完成任务, 将最近前端所涉及的技术框架都做了一个调查, 也进行了实践, 现在将自己的历程分享出来, 供大家参考, 由于能力有限, 欢迎大家对错误的地方进行指正.
一, 原生开发与跨平台开发技术
原生开发
原生开发就是用原生 sdk API(Android 或 iOS) 进行开发, Android 使用 Java 或 Kotlin,iOS 使用 Objective-C 或 Swift.
原生开发优势:
1. 速度快, 性能高, 可实现复杂的动画, 整体用户体验好;
2. 可以访问平台的全部功能, 包括硬件 (蓝牙, GPS, 拍照, 摄像等)
主要缺点
1. 平台特定, 开发成本高, 不同平台需要维护不同代码
2. 动态化弱, 有新功能需及时发版
总结一下, 纯原生开发主要面临动态化和开发成本两个问题, 而针对这两个问题, 诞生了一些跨平台的动态化框架.
跨平台开发
市场上跨平台方案比较多, 主要分为三类
1.H5 + 原生 (uni-App,appcan,Cordova,Ionic 等)
2.JavaScript 开发 + 原生渲染 (React Native,Weex)
3. 自绘 UI + 原生 (flutter)
h5 + 原生的开发模式为混合开发 , 采用混合模式开发的 App 我们称之为混合应用或 Hybrid App , 如果一个应用的大多数功能都是 H5 实现的话, 我们称其为 Web App .
混合应用的优点是动态内容是 H5,Web 技术栈, 社区及资源丰富, 缺点是性能不好, 对于复杂用户界面或动画, webview 不堪重任.
下面列举自己在项目中选型所涉及的几个跨平台框架
先来一张自己总结的表格, 供大家参考:
下面详情讲解一下:
一, flutter (可跨 Android 和 iOS)
Flutter 是 Google 推出并开源的移动应用开发框架, 主打跨平台, 高保真, 高性能. 开发者可以通过 Dart 语言开发 App, 一套代码同时运行在 iOS 和 Android 平台. Flutter 提供了丰富的组件, 接口, 开发者可以很快地为 Flutter 添加 native 扩展.
优势:
1. 跨平台自绘引擎, 性能强大, 流畅: 对比 weex 和 react native, 性能的强大是很明显的, 基于 dom 树渲染原生组件, 很难与直接在原生视图上绘图比肩性能, Google 作为一个轮子大厂, 直接在两个平台上重写了各自的 UIKit, 对接到平台底层, 减少 UI 层的多层转换, UI 性能可以比肩原生, 这个优势在滑动和播放动画时尤为明显
2. 采用 Dart 语言开发: 开发效率高, 高性能, 快速内存分配, 类型安全
3. 已发布正式版本, google 投入资源大, 后期会做大做强.
缺点:
1. 部分场景仍需原生开发.
注: 通过对 flutter 的学习, 感觉还是很不错的, dart 学习成本很低, 几乎可以不用怎么学, 通过实践, 2 周时间足够可以开始动手撸代码.
二, React Native(可跨 Android 和 iOS)
使用 JavaScript 语言, 类似于 html 的 JSX, 以及 CSS 来开发移动应用, 将虚拟 DOM 映射为原生控件, 因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域.
其优势和缺点网上文章很多, 这里就不做叙述. 谈谈自己在实践中遇到的问题:
1. 学习成本太高, 对没有 React 前端技术的同学来说, 上手是很不容易的, 本屌搭建环境都用了 2 天时间
2. 开发过程中总遇到一些莫名其妙的问题, 可能是学艺不精, 最终一个星期后终于放弃该方案.
3. 据查询的资料显示, 很多公司由于各种原因已经放弃 React Native , 而且很多大神也表示放弃 RN 是业内的共识, 至于共识的原因哪位同学知道, 可以分享一下.
三, Taro(可跨 H5, 小程序, React Native)
京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架, GitHub 上已超过 16K 的 star. 详情参考 https://github.com/NervJS/taro
taro 多端统一开发框架, 支持用 React 的开发方式编写一次代码, 生成能运行在微信 / 百度 / 支付宝 / 字节跳动小程序, H5,React Native 等的应用.
观点:
由于 Taro 编写出来的工程, 如果打包成 iOS 和 Android 需要先将程序生成 React Native , 然后再有 RN 来打包 iOS 和 Android. 由于 RN 的一些经历, 本屌未尝试, 直接放弃该方案. 有同学尝试过的可以分享一下过程.
四, uni-App(可跨 Android,iOS,H5, 各种小程序)
uni-App 是一个使用 vue.js 开发跨平台应用的前端框架, 开发者编写一套代码, 可编译到 iOS,Android,H5, 小程序等多个平台, 可参看官网 https://uniapp.dcloud.io/
由于公司的项目需要 Android,iOS 和小程序共存, 最终选择该方案, 目前已完成项目, 下面说说自己的看法
1. 学习成本很低, 虽然之前没接触过 vue, 但是上手很快, 1 天时间看 vue 语法, 1 天时间了解 uniapp 并对其创建 - 打包整个过程进行熟悉, 然后第三天可以开始撸代码, 一个多星期就完成公司的项目, 一款涉及 30 多个页面的应用.
2. 提供云打包和本地打包, 对没有苹果电脑的人是福音, 可以使用云打包进行苹果 ipa 制作, 当然前提是上传代码到云端, 如果代码怕泄露那就本地打包
3.uni-App 里面集成了 5+plus,nvue 和 weex 功能, 所以对熟悉 weex 的同学也能满足
4. 项目运行性能良好, 由于应用是一些常规应用, 整体和原生体验相差不大
5. 国产开源, 群比较活跃, 遇到问题可以直接咨询群管理
当然缺点也有:
1. 暂时不能随意制作底部 tab, 整个应用中只能有一个底部 tab 页面, 如果应用中涉及多个底部 tab 则实现起来较困难, 可以通过其他绘制布局方式进行实现
2. 对地图方面支持力度不够, 有很多 bug, 对于定位, 地图选择位置, 图层绘制简单的气泡这些基本功能都提供的有接口, 使用起来还是很方便的
3. 存在部分 bug, 比如手机震动, 提供的接口不起效果, 但是可以使用 5+ 代码进行实现.
最后:
现阶段只懂原生开发已经很难立足市场, 现在都是多端开发. 跨端可以考虑 flutter 和 uni-App 这两个框架, 前者是原生渲染速度快, 可跨 Android 和 iOS 两端开发. 后者是 Web 渲染, 可以跨 Android,iOS, 小程序, h5 多端, 缺点是性能问题. 但对常规应用, 性能表现还不错. 刚用 uniapp 完成公司的项目, 性能表现挺好.
七分精力在原生, 三分精力留给跨平台, 最后希望各位提出意见, 一起沟通学习.
来源: http://www.jianshu.com/p/6d3792ba76d9