网站推广.NET

网站推广.NET

惊呆:小程序开发框架选择比较与实践

来源:互联网

1.前言

从微信小程序内部beta的16年到现在,微信小程序一直在花费时间和实践来证明其变化和价值,在微信小程序的影响下,微信小程序的规则变得更加完整。开发社区。

对于第三方公司而言,微信为自己带来了巨大的流量入口和低成本的新渠道,例如滴滴,美团,京东等公司已推出了自己的小程序。对于像共享自行车这样的公司,微信是大多数用户的QR码扫描入口,小程序则带来了巨大的交通入口,例如Mobike。

对于小程序开发人员而言,小程序的开发生态正在不断改善,从原始的原始框架到腾讯自己使用vue规范开发的wepy,再到美团使用vue方法开发mpvue。 ,然后按照O2 Labs的React规范发布到最近发布的Taro。

到目前为止,开发微信小程序的方法有很多,主要是本机的,wepy,mpvue,Taro,4种框架,而比较分析也在这4种方法中。

2.框架比较和分析

面对四种开发方法,我们应该选择哪一种?首先,当然要从开发工具,开发方法,应用程序状态管理和社区活动(开源UI库等)的便利性对各种框架进行比较分析。

2. 1开发工具的工程设计

开发工具:微信开发人员工具需要进行调整。对于编写代码,尤其是对于我们的前端开发而言,21世纪最尽责的编辑工具无疑是微soft所产生的vscode,具有较高的代码。如果它明亮,则需要进行相应的配置。您可以在线搜索(或查看每种开发方法的正式文档)以获取特定配置。

在工程方面:微信小程序本身几乎不支持工程。如果您希望本机框架支持工程,则需要自己构建许多工程东西-demo wxapp-redux-starter,由其他人构建的wepy具有自己的wepy-cli,而mpvue和taro支持webpack的灵活定制,我们很熟悉(例如语法检查,热更新等)

2. 2开发方法

本国发展:

我们需要完全学习小程序的表达格式。当前版本的模板支持插槽,但不支持npm软件包。原生不支持css预处理器,但是vsCode中的Easy WXLESS插件可以自动将较少的文件转换为wxss文件;

wepy:

我们需要熟悉vue和wepy语法,支持slot组件内容分发槽,支持npm包,支持css预处理程序;

mpvue:

我们需要熟悉vue,当前版本(v 1. 0.13)不支持插槽,支持npm软件包,支持css预处理器;

塔罗:

采用React语法标准,并支持JSX编写,以使代码更具表现力。芋头暂时不支持直接渲染儿童。

关于mpvue和芋头的开发方法,可以在相应的官方文档中找到对vue和react语法的支持程度和差异。

2. 3应用程序状态管理

本国发展:

未提供本机应用程序状态管理方法,但是可以将redux或mobx引入项目中。 小程序本机提供了一种声明使用全局变量的方法。您可以检查官方网站文件范围以了解具体的书写方式。

wepy:

Redux或mobx可以引入到项目中。

mpvue:

您可以直接使用vuex进行应用程序状态管理,还可以选择在使用mpvue初始化时是否需要vuex。

塔罗:

支持Redux,并且还为非大型应用程序提供了全局变量解决方案。 Redux引入了全局变量解决方案。有关详细信息,请检查官方网站-使用redux,官方网站-最佳做法。 2. 4在社区活动方面

本国发展:

微信为小程序开发人员提供了专门的社区来学习和与开发人员社区进行交流。对于UI库,仍然有许多本机小程序 UI库,例如官方的weui,zanui-weapp和微信小程序 UI库,它们都很有吸引力,易于使用且易于扩展。

其他3帧:

对于wepy,mpvue和芋头之类的开源项目,如果您想学习和交流,则必须在github问题上进行。 github上的星星数量与项目出现的时间成正比。 Wepy:超过12k的星星,mpvue:11k多星,芋头:6k多星,从趋势的角度来看,mpvue有赶上wepy的趋势。

对于wepy和mpvue,它们的github上有一些开源UI库,并且由于芋头是最近启动的,因此需要自己使用UI。

2. 5比较摘要表image.png

比较表

3.基于公司商业和团队思维

对于公司业务,必须快速且迭代地开发它,并且本机框架对工程支持不友好,因此可以排除在外。

对于我们大多数现有的前端相关产品和业务,无论是PC端的管理背景还是移动端的h5页面,它们都是基于react + webpack构建和开发的。用户界面基于ant组件库。

团队成员对React语法和相关的生态非常熟悉。在这一点上,如果我们选择wepy或mpvue,则需要学习新的知识点。 Wepy和Vue语法。如果使用芋头,则团队成员完全可以开始开发微信小程序。但是就框架成熟度而言,wepy和mpvue的出现要比芋头早,并且已经开始了很多工作。如果您在动手开发中遇到问题,则有前辈的解决方案,并且芋头最近才发布。该框架的目标非常重要。在React的开发方法中只编写一次代码,并生成可以在微信小程序,H5、React Native等上运行的应用程序。您肯定会遇到各种各样的开发问题。

总而言之,无论您选择哪种框架,对于我们来说都是非常具有挑战性的,我个人认为选择芋头更具挑战性,因为芋头才刚刚推出,许多特性和功能正在计划和制定中。开发,例如第三方组件库支持。当我们开发公司业务时,我们绝不能停止开发业务的进展,因为尚未开发框架的某些功能,并且尚未解决缺陷。这将促使我们研究芋头框架的底层,即技术原理-芋头技术秘诀:芋头cli,从根本上解决问题,例如,如果没有UI库,则可以自己开发一套。芋头框架上的缺陷被延迟了。如果您不解决,可以尝试自己解决。完成后,您可以要求o2团队筹集资金以为开源项目做出贡献。如有必要,您还可以自己维护一组芋头框架源代码。这样做绝对对我们学习前端架构和前端工程的方式很有帮助。

4.发展思路

目前,我只尝试mpvue和芋头开发,因为一个像vue一样,另一个像react一样。现在,vue和reaction的生态可以说是相当完整的,因此这两个框架在开发经验上都非常完善。

4. 1 mpvue

开始使用mpvue开发时,您必须熟悉vue语法。对于像我这样从未使用过vue和使用jsx语法的人,一开始阅读正式的vue文档有点不舒服,所以我写得很慢,在您编写时就习惯了。看一下代码体验:

想想这种结构是很熟悉的,不是我开始时写在同一文件中的html,css,js的结构。

遇到mpvue开发问题时,请查看mpvue文档,vue文档和微信小程序官方文档,以快速定位并轻松解决。

4. 2芋头

在使用芋头进行开发时,尽管我对React语法很熟悉,但是在编写它时仍然遇到很多问题。语法上仍存在一些差异。对于差异,您可以参阅官方文档-有关JSX的支持程度。此外,遇到问题时,我会就此问题提出问题。 o2团队的开发人员也非常认真地回答我的问题以及芋头框架中的缺陷。

要转换为h5页面,两者均受支持,但是如果将mpvue转换为h5,则仍有许多事情需要手动完成。 mpvue 小程序转移到Web练习摘要。将芋头转换为h5页面要简单得多。只要基本组件是按照taro规定的语法从tarojs / components导入的,则可以根据命令进行转换。您可以看以下两张图片,一张是小程序,另一张是H5的转换。

image.png

小程序

image.png

h5

从图片的总体感觉来看,将芋头转换为h5时,UI和体验没有太大差异。可以说芋头的框架非常强大。 (也许这只是一个小演示。在转换为h5的过程中,我没有遇到小程序和h5页面不同或报告错误的情况,但是从github问题来看,编译中仍然存在很多问题到h5,希望o2团队可以及时解决。)

芋头版演示项目地址:geekjc-taro

5.摘要

无论选择哪种框架,由于很多问题,都需要花费一些时间来学习微信小程序的基本知识和基本概念(请参阅正式文档或微信小程序全面的实战,架构设计和隐蔽策略)。 ,使用最好是本机解决,组件也一样。

6.参考文章:

多终端统一开发框架-芋头