小程序开发学习与实践-01
目标:
通过一段时间学习,通过一套代码做一个简单的多端使用APP/小程序。功能:只有一个实时获取所在地区的天气情况。
选型调查
我需要尝试一套代码多端使用,通过网络搜索,把目光转向:Flutter、React Native(RN)、uniapp这三个。
Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。 Flutter是一个UI框架,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。
可以帮助我们:提高开发效率,同一份代码开发iOS和Android,减少代码量,减少开发成本,轻松迭代;创建美观,高度定制的用户体验。Flutter包括一个现代的响应式框架、一个2D渲染引擎Skia、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。一切皆为组件widget,开发中一般是通过继承 无状态 StatelessWidget 控件或者 有状态 StatefulWidget 控件 来实现页面。
React Native是Facebook开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
RN将原生开发的最佳部分与 React 相结合, 致力于成为构建用户界面的顶尖 JavaScript 框架。是一套 UI 框架,默认情况下RN会在 Activity 下加载 JS 文件,然后运行在 JavaScriptCore 中解析 Bundle 文件布局,最终堆叠出一系列的原生控件进行渲染。简单来说就是 通过写 JS 代码配置页面布局,然后RN最终会解析渲染成原生控件,如 标签对应 ViewGroup/UIView , 标签对应 ScrollView/UIScrollView , 标签对应 ImageView/UIImageView 等,让页面的性能能得到进一步的提升。在页面布局上的每一次操作都会通过中间桥链接与原生native双向通信,在编写格式上,在界面开发上延续了 React 的开发风格,支持 scss/sass 、样式代码分离,支持 React Hook 函数式编程。
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。即使不跨端,uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。
uni-app功能框架图可看出,uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力。
Taro是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
选型
通过网上评论,我选择了uni-app进行后续开发。原因有:
- 有自家的IDE(HBuilderX),编译调试打包一体化,对原生App开发体验友好。Taro 开发流程稍微复杂一点。
- uni-app使用vue语法及小程序语法,我都有动力去学习、使用。
- 丰富的插件可以选用
希望uni-app逐步完善网上抱怨的文档不全、bug不改的问题。
参考列表
uni-app,Taro,react native和flutter的区别
Taro vs uni-app选型对比经历
小程序框架对比(Taro VS uni-app)
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!