网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 推广营销 » 正文

小程序框架全面测评

2019-8-3 23:8:5 | 作者:老铁SEO | 0个评论 | 人浏览

  最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?

  作为 Taro 开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关,本文的观点很可能是带有偏向性的,大家可以带着批判的眼光去看待,权当抛砖引玉。

  这类框架最大的特点就是从底层的渲染引擎、布局引擎,到中层的 DSL,再到上层的框架全部由自己开发,代表框架是 Qt 和 Flutter。这类框架优点非常明显:性能(的上限)高;各平台渲染结果一致。缺点也非常明显:需要完全重新学习 DSL(QML/Dart),以及难以适配中国特色的端:小程序。

  这类框架是最原始也是最纯正的的多端开发框架,由于底层到上层每个环节都掌握在自己手里,也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大,渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。

  这类框架把 Web 技术(JavaScript,CSS)带到移动开发中,自研布局引擎处理 CSS,使用 JavaScript 写业务逻辑,使用流行的前端框架作为 DSL,各端分别使用各自的原生组件渲染。代表框架是 React Native 和 Weex,这样做的优点有:

  交互复杂时难以写出高性能的代码,这类框架的设计就必然导致 JS 和 Native 之间需要通信,类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题,但声明式的写法很难满足复杂交互的需求。

  由于没有渲染引擎,使用各端的原生组件渲染,相同代码渲染的一致性没有第一种高。

  这类框架就是我们这篇文章的主角们:Taro、WePY、uni-app、mpvue、chameleon,它们的原理也都大同小异:先以 JavaScript 作为基础选定一个 DSL 框架,以这个 DSL 框架为标准在各端分别编译为不同的代码,各端分别有一个运行时框架或兼容组件库保证代码正确运行。

  另外一个优点是在移动端一般会编译到 React Native/Weex,所以它们也都拥有 Web 技术型框架的优点。这看起来很美好,但实际上 React Native/Weex 的缺点编译型框架也无法避免。除此之外,编译型框架的抽象也不是免费的:当 bug 出现时,问题的根源可能出在运行时、编译时、组件库以及三者依赖的库等等各个方面。在 Taro 开源的过程中,我们就遇到过 Babel 的 bug,React Native 的 bug,JavaScript 引擎的 bug,当然也少不了 Taro 本身的 bug。相信其它原理相同的框架也无法避免这一问题。

  但这并不意味着这类为了小程序而设计的多端框架就都不堪大用。首先现在各巨头超级 App 的小程序百花齐放,框架会为了抹平小程序做了许多工作,这些工作在大部分情况下是不需要开发者关心的。其次是许多业务类型并不需要复杂的逻辑和交互,没那么容易触发到框架底层依赖的 bug。

  那么当你的业务适合选择编译型框架时,在笔者看来首先要考虑的就是选择 DSL 的起点。因为有多端需求业务通常都希望能快速开发,一个能够快速适应团队开发节奏的 DSL 就至关重要。不管是 React 还是 Vue(或者类 Vue)都有它们的优缺点,大家可以根据团队技术栈和偏好自行选择。

  以下内容均以各框架现在(2019 年 3 月 11日)已发布稳定版为标准进行讨论。

  就开发工具而言uni-app应该是一骑绝尘,它的文档内容最为翔实丰富,还自带了 IDE 图形化开发工具,鼠标点点点就能编译测试发布。

  其它的框架都是使用 CLI 命令行工具,但值得注意的是chameleon有独立的语法检查工具,Taro则单独写了 ESLint 规则和规则集。

  只从支持端的数量来看,Taro和uni-app以六端略微领先(移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序),chameleon少了头条小程序紧随其后。

  但值得一提的是chameleon有一套自研多态协议,编写多端代码的体验会好许多,可以说是一个能戳到多端开发痛点的功能。uni-app则有一套独立的条件编译语法,这套语法能同时作用于 js、样式和模板文件。Taro可以在业务逻辑中根据环境变量使用条件编译,也可以直接使用条件编译文件(类似 React Native 的方式)。

  在移动端方面,uni-app基于weex定制了一套 nvue 方案 弥补weexAPI 的不足;Taro则是暂时基于 expo 达到同样的效果;chameleon在移动端则有一套 SDK 配合多端协议与原生语言通信。

  H5 方面,chameleon同样是由多态协议实现支持,uni-app和Taro则是都在 H5 实现了一套兼容的组件库和 API。

  mpvue和WePY都提供了转换各端小程序的功能,但都没有 h5 和移动端的支持。

  作为开源时间最长的框架,WePY不管从 Demo,组件库数量 ,工具库来看都占有一定优势。

  uni-app则有自己的插件市场和 UI 库,如果算上收费的框架和插件比起 WePy 也是完全不遑多让的。

  Taro也有官方维护的跨端 UI 库taro-ui,另外在状态管理工具上也有非常丰富的选择(Redux、MobX、dva),但 demo 的数量不如前两个。但Taro有一个转换微信小程序代码为 Taro 代码的工具,可以弥补这一问题。

  而mpvue没有官方维护的 UI 库,chameleon第三方的 demo 和工具库也还基本没有。

  第一是框架接入原有微信小程序生态。由于目前微信小程序已呈一家独大之势,开源的组件和库(例如wxparse、echart、zan-ui等)多是基于原生微信小程序框架语法写成的。目前看来uni-app、Taro、mpvue均有文档或 demo 在框架中直接使用原生小程序组件/库,WePY由于运行机制的问题,很多情况需要小改一下目标库的源码,chameleon则是提供了一个按步骤大改目标库源码的迁移方式。

  第二是原有微信小程序项目部分接入框架重构。在这个方面 Taro 在京东购物小程序上进行了大胆的实践,具体可以查看文章《Taro 在京东购物小程序上的实践》。其它框架则没有提到相关内容。

  而对于两种接入方式 Taro 都提供了taro convert功能,既可以将原有微信小程序项目转换为 Taro 多端代码,也可以将微信小程序生态的组件转换为 Taro 组件。

  uni-app则号称有上万案例,但不像其它框架一样有一些大厂应用案例。另外从开发者的数量来看也是uni-app领先,它拥有 20+ 个 QQ 交流群(最大人数 2000)。

  一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化,但依然是衡量一个框架/库生命力的非常重要的标准。

  从第三方贡献者数量来看,Taro在这一方面领先,并且Taro的一些核心包/功能(MobX、CSS Modules、alias)也是由第三方开发者贡献的。除此之外,腾讯开源的omi框架小程序部分也是基于 Taro 完成的。

  WePY在腾讯开源计划的加持下在这一方面也有不错的表现;mpvue由于停滞开发了很久就比较落后了;可能是产品策略的原因,uni-app在开源建设上并不热心,甚至有些部分代码都没有开源;chameleon刚刚开源不久,但它的代码和测试用例都非常规范,以后或许会有不错的表现。

  WePY已经发布了 v2.0.alpha 版本,虽然没有公开的文档可以查阅到2.0版本有什么新功能/特性,但据其作者介绍,WePY 2.0会放大招,是一个「对得起开发者」的版本。笔者也非常期待 2.0 正式发布后WePY的表现。

  mpvue已经发布了2.0的版本,主要是更新了其它端小程序的支持。但从代码提交, issue 的回复/解决率来看,mpvue要想在未来有作为首先要打消社区对于mpvue不管不顾不更新的质疑。

  uni-app已经在生态上建设得很好了,应该会在此基础之上继续稳步发展。如果uni-app能加强开源开放,再加强与大厂的合作,相信未来还能更上一层楼。

  chameleon的规划比较宏大,虽然是最后发的框架,但已经在规划或正在实现的功能有:

  如果chameleon把这些功能都做出来的话,再继续完善生态,争取更多第三方开发者,那么在未来chameleon将大有可为。

  Taro的未来也一样值得憧憬。Taro 即将要发布的1.3版本就会支持以下功能:

  同时Taro也正在对移动端进行大规模重构;开发图形化开发工具;开发组件/物料平台以及图形化页面搭建工具。

  如果不介意尝鲜和学习 DSL 的话,完全可以尝试WePY 2.0和chameleon,一个是酝酿了很久的 2.0 全新升级,一个有专门针对多端开发的多态协议。

  uni-app和Taro相比起来就更像是「水桶型」框架,从工具、UI 库,开发体验、多端支持等各方面来看都没有明显的短板。而mpvue由于开发一度停滞,现在看来各个方面都不如在小程序端基于它的uni-app。

  当然,Talk is cheap。如果对这个话题有更多兴趣的同学可以去 GitHub 另行研究,有空看代码,没空看提交:

  感谢您的阅读,本文由凹凸实验室版权所有。如若转载,请注明出处:凹凸实验室()

  如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api:wx.getSystemInfoSync()wx.getSy...博文来自:GUK

  文章原地址:今天笔者就要归纳总结下一整套测试流程,从无到有,实现零突破,包括如何编写测试用例,定时执行测试...博文来自:weixin_43574761的博客

  第一次写这种小程序项目,在网上搜了点rem和rpx换算的资料,看到一个比较适合我的公式:1rem=(750/20)rpx,20是rem为单位的屏幕宽度,我看ui给我的原型图里屏幕宽度是90rem.于是...博文来自:的博客

  微信新版本,小程序全面屏来临,大家都在抢占小程序流量资源,小程序换量作为一种的免费推广模式,越来越成为小程序初期积累用户的刚需。昨天微信发布了7.0.3版本,小程序最大流量入口“微信首页下拉”窗口,已...博文来自:小互推-智能换量平台

  【TechWeb】自从苹果在2017年推出了刘海全面屏手机iPhoneX,其全面屏的设计风格不仅受到了用户的欢迎,同时其“刘海”的设计语言也被国内外手机厂商争相模仿。对......博文来自:软件开发资料汇总

  因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几...博文来自:李益

  1.数据的存储问题想要数据几乎常在,如用户id,存缓存每个页面的data在redirect跳转时候会清空app.js里面的全局数据可以保持在当前小程序打开到关闭这个周期一直有效,可以存商户id(多商户...博文来自:小白小小白

  相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小...博文来自:Ho博客

  当下手机市场,不论是顶级旗舰、还是千元亲民机型,都纷纷发起了全面屏与AI优化革命,最大化提升用户体验。vivo作为全球知名的手机企业,旗下Z系列受到了众多用户的认可。而Z1青春版作为全新一代产品,它能...博文来自:weixin_33994444的博客

  前言工作的原因,需要完成一个电商微信小程序的项目,需要完成小程序页面、后台接口、数据库、管理商品的后台页面,项目部署等一系列任务,这些任务所涉及的技术栈也同样是当下作为一个前端工程师需要掌握的。项目当...博文来自:starleejay的博客

  风险管理与内控控制不是孤立存在于企业内的,它更多的是从一个独特的角度观察、检视企业管理的全部。风险管理与内部控制天然有着嵌入性的特征。虽然有专门的理论、方法、技术、工具,但正如所有管理一样,风险管理与...博文来自:miaozk2006的专栏

  小程序提供了rpx计量单位这里解释下rpx把所有界面界面宽度切分成750块,计算时候取块计算就达到了宽度适配!直接贴源码page{  height:100%;  width:750rpx;}.lunb...博文来自:prient的博客

  【回复“1024”,送你一个特别推送】特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库。小程序到底有多火,看看目前推出的开源框架以及组件库就知......博文来自:非著名程序员

  微信小程序学习小结最近做了个微信小程序的小项目,类似于听歌识曲的小游戏。由于项目很紧,边学边用,现在有空了打算做个学习小结,这里总结小程序的整体框架,生命周期,路由,还有传值等,欢迎互相学习。文件格式...博文来自:耐得住寂寞也是一种境界

  版权声明:未经博主允许不得转载前言:学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记,在学微信小程序的时候,如果你有html+css+javascript的基础,那么你就很快地上手掌握的。下面提...博文来自:达叔小生的博客

  小程序MINA框架分为三个部分:有View(视图层)、AppService(逻辑层)和Natice(系统层)。   1.View(视图层)中包含了小程序多个页面、每个页面都有WXML文件和WXSS文件...博文来自:iheyu(一个新手小白女PHP初学者)

  小程序框架分为两部分  (1)视图层(View) 描述语言:WXML和WXSS  (2)逻辑层(AppService) 描述语言:JavaScript框架的核心:一个响应的数据绑定系统    框架可以...博文来自:BeiBeiTian的博客

  最近开始毕业设计了,根据需求文档,我们需要使用小程序的微信运动API,写一个运动类APP,所以我就开始查询小程序相关的文档与社区。微信小程序才刚刚起步,生态不能说很丰富,但是依然有很多优秀的开源项目:...博文来自:青云桑的小窝

  微信小程序是一种不需要下载安装即可使用的应用,在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度,然而就是因为它的备受欢迎度以及越来越被企业所重视,也就形成了咱们开发人员对小程序的开发的掌握;...博文来自:tengfeiyue的博客

  将图片设置为背景图有两种方式,一种是用标签,一种是用css的background-image:url(“”);样式1.利用标签设置背景图全显示,且自适应屏幕代码:HTMLTitle...博文来自:的博客

  微信小程序分为逻辑层和视图层,逻辑层用来处理业务逻辑,视图层用来渲染页面。1.视图层描述语言是:wxml和视图样式wxss2.加上JavaScript逻辑层语言和json配置文件,构建起了微信小程序框...博文来自:Jeason

  讲真,官方文档还是要好好看,都是细节啊...1-使用wepy框架中封装好的小程序api lt;wepy对小程序的API进行Promise处理gt; ①:首先需要声明开启使用we...博文来自:_病猫的博客

  weui-wxss是微信官方提供的ui框架,用起来也很方便(copy)。下载地址:第一步:需要把下载的内容copy到项目中,主要是di...博文来自:Dreawer微信小程序联盟

  黑底问题手机厂商追求高用户体验,屏幕宽高比越做越高。17:919:1018:918.5:9所谓全面屏。原来一般主流手机1920*1080分辨率16:9高宽比。如果没有单独去配置属性,会导致在超过17:...博文来自:zane_xiao的博客

  最近一段时间由于公司项目需要开发支付宝小程序,我想分享一下我在支付宝小程序学习的一系列笔记:整体架构思维导图:从这个架构导图中可以清楚的看到,支付宝小程序实质上是一个大前置的一个系统的概念,分为前端后...博文来自:江西看见你科技有限公司

  前端的框架太多让人眼花缭乱,很多相似的地方,优秀的地方大家都会借鉴,同时又会有各自的一些特点。小程序也好,其他框架也好,理解他们的设计缘由、实现原理,还是能学到很多很多东西的。一切始于双线程技术选型上...博文来自:Belief

  简介:微信小程序是一种全新的连接用户与服务的方式。那么怎样才能快速开发一个小程序呢?下面小编为大家介绍几款小程序快速开发框架。WePY腾讯官方开源的小程序组件化开发框架,目前有1.4w+Star,一直...博文来自:弘毅

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:小程序框架  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。