在react里写原生js_小程序原生开发与第三方框架选择

最近正在更新《微信小程序入门与实践》一书的第二版。书中有一章节谈到了”多样化的小程序开发“,摘取并加以整理分享给各位开发者。我一向不推荐也不提倡公众号阅读学习编程,文章更多的是列出小程序如今多样化的框架选择,并简单剖析它们之间的差异。点到为止,以开拓大家的视野,至于如何选择,还请君自斟。每个框架的详细技术特点官方文档里都有,自行搜索即可。

 原生开发 

什么是原生开发方式?这个概念其实挺难用文字去准确界定的,因为官方也没有对原生开发方式作出定义。这个概念其实也是不言而喻的,我们按照小程序官方文档中的描述去开发小程序就属于原生开发的方式。

定义一个名词对于数学是有意义的,但对于互联网而言,定义只是大佬们脑回路中的灵感闪现。雷军可以重新定义”什么是现货“、罗永浩可以重新定义”操作系统“,互联网时代的定义又不用负责任,每个人都可以去重新定义一堆老久的名词,不然哪里来的流量?

咱就不去定义所谓的原生开发,我们只需要了解一些小程序原生开发的缺陷以及为什么会出现众多的第三方小程序框架就可以了。经过两年多的发展,小程序已解决很多早期时候诸如:没有自定义组件、UI控制自由度不高、ES6支持度不高、开发工具几乎等同于废材等问题,但现在的版本依然有一些缺陷:

  • 不能直接使用Less/Sass/Stylus等预编译CSS

  • ES新标准支持度太低,比如不支持Asncy/Await(ES6/ES7就是那么尴尬,NodeJS对于ES的标准支持甚至还不如小程序)

  • 虽然支持Promise,但官方的API返回结果并不是Promise,依然是Callback回调函数

  • 没有状态管理,参考Vuex和Redux

  • 没有双向数据绑定(严格说这不算是一个缺陷,主要是出于性能的考虑)

  • 没有过滤器(LinUI使用wxs实现了一些主流过滤器,但官方的支持显然会更加方便)

  • 强制将WXSS、WXML和JS代码分离到3个不同的文件中

这些缺点让习惯了现代化前端开发方式的开发者写起代码来并不是那么舒服。那为什么现在会出现如此多的第三方开发框架呢?除了以上原生小程序语法缺陷外,还有一些其他的原因:

  • 小程序已不再特别指代微信小程序,现在还有支付宝/百度/头条小程序。开发者可能有多端开发小程序的需求,希望让一份代码能够在多端运行,这是一个很直接述求

  • 一些开发者希望使用Vue和React来开发小程序

在我看来,小程序的缺陷或者多端编译都不是第三方框架出现的主要原因,第三条:为了使用而使用,才是真正的原因。后面我们会聊到这点。

 WePY  

GitHub Stars:17k +    

WePY应该是最早的第三方框架,腾讯团队出品。两张图说明一些问题:

9b5d3776f7868a6fc136071985c833a1.png

图 一

0cc30ba61d9ad895be3ae50f25022ff2.png

图二

图一,有违反广告法的嫌疑

图二,真该改改了。无论是组件化、NPM、Promise、ES6、TypeScript微信官方均已支持。实在没有吸引力。

 Mpvue 

GitHubStars:16K +

最早出现的是WePY,随后就是美团开源的Mpvue。Mpvue最早诞生的目的有两点:

  • 想用Vue开发小程序

  • 希望现有的大量的H5页面可以转化成小程序代码

Mpvue是继承自vue.js,这和我们后面聊到的滴滴的Mpx有一些不同。简单来讲,Mpvue希望开发者不需要了解小程序,只需要了解Vue即可用Vue开发小程序。

但恕我直言,我觉得以现在小程序的市场占用率,H5转小程序的需求真不是那么重要;相反,能把小程序转成H5才是真正需要的需求。简单分析,小程序转H5的技术难度其实比H5转小程序要低很多的,稳定性也是要高出不少的。从实际情况的角度来看,大家有多少需求是想把H5转成小程序的呢?现在很多新的产品首先就是做小程序,其次是网页的H5版本。

我相信绝大多数开发者根本不是因为想把H5转成小程序而用Mpvue,而是因为第一点:想用Vue。

最后,可能大家忽略了一个事实,小程序本身就是可以运行H5的,已经有不少成功的案例了,因为现在的小程序已经可以很好的支持WebView,并且对JS的运行没有太多的限制,你完全可以把H5嵌套到小程序中。我看了1款H5版本小程序,感觉体验还不错。

抛开单纯想用Vue而用Vue的观点,mpvue对我的吸引只有状态管理。

 Taro 

GitHub Stars:16K +

应该算是去年下半年最火的小程序第三方框架,京东团队出品。还是列出Taro的优点:

多端编译。理论上一套代码可以编译成微信/支付宝/百度/头条小程序

使用React生态开发小程序

三国群英传现在只剩AngularJS缺席了。

Taro的亮点主要在于可以多端编译,但问题恰恰是在这个多端编译上。虽然微信小程序和支付宝小程序的组件在语法层面上差别不大,但要同时完美支持这么多端简直不敢想象。

组件也许可以完美编译,但很多开发者忽略了一个事实,小程序中除了有组件,还有API,每个不同小程序的API差异其实是极大的,这难免需要在编译后进行大量的手动调整。

另外一点是,有多少人是真的需要开发这么多端的小程序?充其量最多就是双端:微信和支付宝。你确定用Taro开发一套代码的成本要比用微信小程序写一套,然后复制黏贴改改代码要低吗?

  Mpx  

GitHub Stars:800 + 

滴滴出品。滴滴是非常聪明的,Mpx诞生较晚,所以他走的路线和Taro、Mpvue不太一样。

Taro和Mpvue属于编译型框架,完全使用React和Vue的生态开发。但Mpx不同,他很聪明的把Mpx定位成小程序的语法增强框架。换句话来讲,还是以原生小程序开发为主,但你可以使用Vue的一些高级特性。

很聪明的做法。一是因为Mpvue在前,Mpx走同样的路线没有亮点;二是因为想去做到完美的的Vue编译小程序这要付出极高的维护成本,还不一定能完美解决。

以下摘自Mpx文档:

我们使用Vue中优秀的语法特性增强了小程序,而不是让用户直接使用vue语法来开发小程序,之所以采用这种设计主要是基于如下考虑:

转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx),用户在使用源框架语法进行开发时可能会遇到不可预期的错误,具有不确定性

小程序本身的技术规范在不断地更新进步,许多新的技术规范在转译型框架中无法支持或需要很高的支持成本,而对于增强型框架来说只要新的技术规范不与增强特性冲突,就能够直接支持

很清醒的团队,目前其他的几个框架对于小程序新特性的支持根本跟不上官方的更新速度。

  我的观点  

谈人生,谈情怀,我觉得过程很重要。但对于工作,我只以结果为导向。我从来对任何技术没有什么偏见,但我唯一珍惜的是我的时间。如果能用原生开发解决的问题,我绝对不会花成本去学习第三方框架。如果能用Python解决的问题,我100%不会用Java来写。

第三方框架的存在是有价值的,它确实解决了不少人的需求,但我不建议大家盲从。如果一个框架你根本不知道你为什么用它,那还是用原生吧,最省心的选择。

同学们也不要忽略了这个一点:用第三方框架就完全不需要学习原生小程序吗?这当然是不可能的,正是因为用了第三方框架,你反而要更加精通原生小程序的开发。不然你怎么解决各个第三方框架的”坑“?没有哪个框架能100%保证完美转译成小程序的。至少最近团队在处理LinUI的时候就发现,很多框架都宣传支持小程序的自定义组件,然而我们用第三方测试的结果是,这些框架根本无法编译小程序的WXS。

那到底用什么开发小程序?这是个难题,一个永恒的迷。你用什么技术方案开发小程序?一起留言聊聊吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot中service层注入的是实现类,但Controller层接收的是接口

我们习惯这样编写代码: 在service层写接口,然后用实现类去实现接口,并且将实现类注入到容器中 Service public class AccountServiceImpl implements AccountService {}在controller层却是用接口操作service的bean的方法, Auto…

mysql data transfer_MySQL主从同步加速 Transfer-- FAQ

Q: Transfer是什么A: 是一个解决MySQL原生主从同步延迟的方案。 Transfer本身是一个在MySQL源码上打的patch,可以用于当Slave,也可以用于当第三方工具,将Master的数据同步发给Slave。 利用多线程实现主从无延迟。Q: Transfer目前的发布形式&a…

springboot整合mybatisplus中@Mapper与@MapperScan的使用

一、Mapper与MapperScan不可同时使用 二、Mapper用于注解单个mapper接口 三、Mapper Scan用于批量注解Mapper接口 四、Mapper不起作用时,因为缺少下图中的依赖包 以上为自己整合框架中遇到的问题与解决方案,如果以上解决方案不能解决您的问题&#x…

html列表按时间排序代码_按字母顺序排序的列表

有时候你需要自制一份课件PPT或者手写笔记的关键词索引,用来开卷考试查阅PPT或者复习查阅笔记时能快速定位查阅内容位置,这时你可能想要一个按字母顺序排序的列表来帮助构建需要的索引。LaTeX自身的index本身并不支持这样的功能,修改起来也颇…

@MapperScan和@ComponentScan使用问题

报错如下 原因:当MapperScan和ComponentScan一起使用时,项目启动时扫描包会发生冲突,找不到swagger配置类的包和mapper接口的包 解决办法:MapperScan和ComponentScan可以一起使用。 改为MapperScan(basePackages {}…

C语言中CY位什么时候才能为1_你真的了解C语言中的整型吗?

整型数据类型1. 整型数据类型在上一节当中,我们遇到了整型(integer)int,用来表示一个整数的数据类型。下面呢我们来讨论一下C语言里面的整数数据类型。看到这里你可能想问,一个整数而已,为什么会需要定义这么多的类型出来呢?要知…

Spring的两种动态代理:Jdk和Cglib 的区别和实现

Spring的两种动态代理:Jdk和Cglib 的区别和实现 一、原理区别: java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理。 而cglib动态代理是利用asm开源包,对代理对象类的class文件…

red6.4 mysql_rhel6.4 yum本地yum源配置

rhel6.4 yum本地yum源配置 在安装rpm包时,总是会碰到关联的包,在安装过程中带来很多麻烦,配置yum源,自关联包安装,简单省事。配置步骤:1:mount -o loop 挂载镜像盘2:编辑rhel…

python怎么判断输入的是不是数字_如何在PYTHON里判断字符串是否为数字

1 打开JUPYTER NOTEBOOK,新建一个空白的PY文档。2 str1 "888" print(str1.isdecimal()) print(str1.isdigit()) print(str1.isnumeric()) 这是正常的整数,三种方法都是可以判断。3 str2 "二" print(str2.isdecimal()) print(str2.…

在springBoot中使用Mapper类问题_@Mapper_@MapperScan_xml文件跟mapper分开_xml文件跟mapper在同一个目录下

文章目录背景xml文件跟mapper分开application.properties方式一: 主程序中MapperScan方式二: 每个接口添加Mapper注意点xml文件跟mapper在同一个目录下SpringBoot中关于Mapper 和 Repository 的一些疑问1. Mapper2. Repository3. MapperScan(“com.xxx.x…

上海交大python答案_上海交通大学python期末考试样题加解析

上海交通大学python期末考试样题加解析 一、选择题: 将唯一正确的选项写在题前括号中.每题2 分. 【 】(1) 本课程的目标定位是什么? [A] 学习Python 语言 [B] 学习计算机的工作原理 [C] 学习各种算法 [D] 学习用计算机解决问题 【 】(2) 下列哪个标识符是合法的? [A] var-nam…

hbase1.1.1 连接集群_Hadoop2.7.1+Hbase1.1.2集群环境搭建(10) hadoop hbase kerberos

1.hadoop安全机制历史在Hadoop1.0.0或者CDH3 版本之前, hadoop并不存在安全认证一说。默认集群内所有的节点都是可靠的,值得信赖的。用户与HDFS或者M/R进行交互时并不需要进行验证。导致存在恶意用户伪装成真正的用户或者服务器入侵到hadoop集群上&#…

SSM框架中mapper和mapping.xml文件在同一个包下需要的配置

前言 当我们在开发过程中,由于maven项目本身的限制,我们不能直接把我们的mapper.xml文件和对应mapper.java接口文件放到一起,也就是不能直接放在java包中,如图: 因为maven项目在构建打包时,会从src/main…

mysql配置文件简易代码_MySQL配置文件my.cnf 例子最详细翻译

转的MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用。#BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大#TYPE: SYSTEM#END CONFIG INFO## 此mysql配置文件例子针对4G内存。# 主要使用INNODB#处理复杂队列并且连接数量较少的mysql服务器#…

Spring+Mybatis使用MapperScannerConfigurer简化配置__MapperScannerConfigurer的作用

SpringMybatis使用MapperScannerConfigurer简化配置 MyBatis的一大亮点就是可以不用DAO层的实现类,而我们知道service层调dao层 如果没有实现类,Spring如何为Service注入DAO的实例呢? 比如 现在有一个dao层的bookmapper和配置mybatis的xm…

python的property用法_在python中property怎样使用-百度经验

在python中property可以使类中的方法变为类中的属性一样来使用,使得类中的属性值不易暴露,更加安全,那么在python中property怎样使用呢?下面小编就带大家来看看详细的教程!工具/原料 python的版本:python 3…

Spring AOP 实现原理

什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善。OOP引入封装、继承和多态性等概念来建立一种对象层次结构&…

java string类的方法_Java-String类的常用方法总结

一、String类String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象。java把String类声明的final类,不能有类。String类对象创建后不能修改,由0或多个字符组成,包含在一对双引号之间二、Str…

python爬虫入门实战---------一周天气预报爬取_Python爬虫入门实战--------一周天气预报爬取【转载】【没有分析...

Python爬虫入门实战--------一周天气预报爬取【转载】【没有分析 Python爬虫入门实战--------一周天气预报爬取【转载】【没有分析】 来源:https://blog.csdn.net/qq_40705355/article/details/83856960七天天气来源:http://www.weather.com.cn/weather/…

Spring IOC原理总结

Spring容器高层视图 Spring 启动时读取应用程序提供的Bean配置信息,并在Spring容器中生成一份相应的Bean配置注册表,然后根据这张注册表实例化Bean,装配好Bean之间的依赖关系,为上层应用提供准备就绪的运行环境。 Bean缓存池&…