小程序原生开发有不少槽点：原生wxml怕框架不成熟，跳到坑里担心社区生态不完善

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序原生开发有不少槽点：原生wxml怕框架不成熟，跳到坑里担心社区生态不完善

原生开发小程序有很多缺点：

原生wxml开发对Node、预编译器没有很好的支持，影响开发效率和项目构建流程。所以大公司会采用框架开发

微信定义的那套语法，比如wxml、wxs、wx:if，太私有化了。与其只学微信小程序

Vue生态中有太多可以提高开发效率的外围工具，比如IDE、验证器、第三方库等。 。 与专业编辑相比，微信的开发工具确实不好用，而且个性化设置很少。

作为前端工程师，除了微信小程序之外，还需要开发Web、其他小程序甚至App。 人们不喜欢在开发工具之间来回切换，也不喜欢改变对语法的思考方式。

uni-app 自然可以解决这些问题，但开发常常会有一些顾虑：

恐怕使用uni-app后，微信小程序中的某些功能无法实现。 恐怕由于uni-app的更新，性能会不如原生的WXML。 恐怕框架还不成熟。 恐怕社区生态还不完善。 本文从开发关心的功能开始。 、性能、学习门槛、开发经验、生态、可扩展性等维度微信小程序开发难吗，一一分析对比，并给出说明。

1、功能实现

开发*常问的问题：小程序迭代升级，增加了一批新的API，但uni-app框架没有及时更新怎么办？

其实，这是一个误区。 uni-app不限制底层API调用； 小程序端，uni-app支持直接编写微信原生代码。

类比传统的Web开发，如果使用Vue、React等框架让开发无法操作浏览器提供的所有API，那么这样的框架肯定是不成熟的。 小程序开发也是如此。 在uni-app框架中，也可以调用微信提供的所有原生代码。

因此，如果有一些API（平台相关的或者新的API）没有被uni-app封装，开发可以直接在uni-app中编写微信原生API，即以wx开头的各种API。

例如，虽然uni-app目前没有封装跨平台的广告（ad）组件，但开发仍然可以使用微信组件在小程序端展示广告。 代码示例如下：

小程序运行效果如下：

uni-app也全面支持包括微信小程序自定义组件、WXS、云端开发在内的复杂使用。

因此，结论是：使用uni-app框架进行开发和原生小程序开发在功能上没有什么区别，并且不会有任何限制。

2、演出经历

开发经常问的第二个问题：第三方框架大部分都是内部封装的。 这些封装会增加运行负载并导致性能下降吗？

也是过于担心了。 Uni-app不会造成性能下载，甚至会自动优化很多链接。 在很多场景下，性能体验优于微信原生开发。

类似于使用vue.js开发web，不仅性能不会比原生js差，而且由于使用了虚拟dom和差分更新技术，在大多数场景下，性能比开发手动编写代码操作要好统治。

在小程序需要频繁编写代码来更新数据。 这里非常重要的是差异数据更新。 如果不做delta，代码性能会很差。 如果每个逻辑都决定增量数据更新，那么代码写起来就太麻烦了。

使用uni-app，底层自动更新差异数据，简单且高性能。

我们从优化理论和实测数据两个维度来详细解释。

2.1. 理论：框架优化方案

为了提升性能体验，小程序从架构设计层面做了大量的工作：

逻辑层和视图层分离，避免JS操作阻塞视图渲染。 单独定义组件标签（wxml），降低DOM复杂度并精简样式（wxss），提高渲染性能，将复杂组件（视频/地图等）原生化，解决Web组件的功能。 / 经验不足 通过这些监管约束，小程序的整体性能体验得到了很大的提升，但仍然存在很多性能陷阱，其中*常见的就是*常见的。

这里引用微信官方的描述来简单介绍一下其背后的工作原理：

目前小程序的视图层作为渲染载体，而逻辑层作为独立的运行环境。 从架构上来说， 和 都是独立的模块，没有直接数据共享的通道。 目前视图层和逻辑层之间的数据传输实际上是通过双方提供的数据来实现的。

为了简化开发，微信将调用封装成JS方法来实现视图层和逻辑层的数据传输。 数据流图如下：

执行会受到很多因素的影响。 每次传输的数据量过大或者调用频繁（参见微信官方介绍），可能会造成性能体验问题。

幸运的是，uni-app 在这两个方面都有优化。

2.1.1. 减少传输的数据量

假设当前页面有一个列表（初始值为a、b、c、d），现在我们需要向列表中添加4个新的列表项（e、f、g、h）。 我们分别使用微信原生和uni-app。 按照模式编写代码。

小程序原生代码：

如上面的微信原生代码所示，当该方法执行时，列表中的所有8个列表项a、b、c、d、e、f、g、h都会被传输。

统一应用程序代码：

如上面uni-app代码所示，该方法执行时，只会将列表中新增的4个列表项e、f、g、h传输给它小程序原生开发有不少槽点：原生wxml怕框架不成熟，跳到坑里担心社区生态不完善，大大简化了传输量。

uni-app 利用 JSON Diff 库。 在调用之前，它会先比较历史数据，准确高效地计算出变化的差异数据，然后再次调用。 仅传输更改的数据，从而*大限度地减少传输的数据量。 化，大大提高了通信性能。

Tips：有些同学可能不同意将数据从a,b,c,d,e,f,g,h 8个列表项转移到e,f,g,h 4个列表项的优化，但是我们提醒您不要这样做低估了这一点。 机制，上面只是一个demo例子：

在实际的列表场景中，每个列表项可能包含缩略图、标题、摘要、时间等各种信息，并且每个列表项的数据会更大（假设为1k）； 假设当前页面有20个列表项，连续拉取4次后，页面变成100条记录； 如果再次拉起，页面变成120条记录，情况就不一样了。 上述微信原生方法将全部120条记录数据（120k）传输至上述uni-app模式，仅传输新增的20条（101~120）条记录数据（20k），数据量为1本机模式的/6！当页面列表项数据越多时，差异就越大。 当页面有200条记录时，uni-app传输的数据量将变成微信原生传输数据量的1/10！ 2.1.2. 减少通话频率

假设我们有改变多个变量值的需求。 我们以微信原生和uni-app模式编写代码。

以上4个调用将触发4个逻辑层和视图层的数据通信。

上面的uni-app代码*终会合并成一条数据{"a":1,"b":2,"c":3,"d":4}，然后只会被调用一次完成所有数据传输，显着降低调用频率。

uni-app之所以有这样的优势，是因为uni-app基于Vue深度定制，使用了Vue的机制。

2.2. 实测：性能对比数据

有了上面的理论分析，我们接下来在真机上进行实际测量，并用数据进行对比。

测试模型如下：

开发内容：开发模仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。 模仿微博的列表是一个包含很多组件的列表。 这个复杂的列表对性能带来了较大的压力，非常适合性能测试。

界面如下：

开发版本：使用微信原生和uni-app分别开发两套代码。 uni-app 默认使用 cli 方法安装。 测试机型：红米 6 Pro、MIUI 10.2.2.0 稳定版（*新版本）、微信版本 7.0.3（*新版本） 测试环境：开始每一帧测试前，杀掉各个 App 进程并清空内存，以保证测试机器环境基本相同； 每次都在本地读取静态数据，屏蔽网络差异。 从触发上拉加载到数据更新、页面渲染完成，都需要准确的时序。 人类视觉计时肯定是不可能的。 我们利用程序埋点，制定了如下的计时时序：

定时开始定时：交互事件触发，帧赋值之前，如：上拉load()函数开始定时结束定时：页面渲染完成（微信回调函数开始）提示：回调函数开始可以认为是页面渲染完成的时间，因为微信的定义如下（微信规范）：

测试方法：从页面空列表开始，程序自动触发上拉加载，每次添加20个列表，记录单次耗时； 固定间隔连续触发上拉加载N次，使页面达到20*N个列表。 计算这N次从触发上拉到渲染完成的平均时间。

测试结果如下：

注：以400条微博列表为例，从页面空列表开始，每1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时。 结果，微信原生触发这20次上拉->渲染完成的平均时间是876毫秒，uni-app是741毫秒。

这个数据可能违背很多人的直觉。 uni-app的性能其实比微信原生还要好！

当然，如果你使用微信原生开发，也可以自己写代码优化。 但为每个业务写太多判断是不现实的。 自然，用框架更舒服。

这个结果与Web开发类似，开发也包括原生js开发、vue、react框架等。如果不进行专门的优化，原生JS编写的网页性能往往不如Vue、React框架。

正是因为Vue和React框架的优秀、性能和开发经验，原生js开发的使用量逐渐减少。

3、社区生态

3.1：外围轮

小程序独立于网络构建自己的生态系统，而轮子在很多网络生态系统中是无法使用的。

微信小程序还有周边的生态系统，而其他几个小程序平台的生态系统基本还没有建立起来。

uni-app周边生态非常丰富，插件市场有近800个插件。

首先uni-app兼容小程序生态，各种自定义组件可以直接引入使用。 在此基础上uni-app插件市场有了更多的vue组件，可以跨多个终端同时使用，并且性能优异。

这使得uni-app生态成为*丰富的小程序开发生态。

例如，对于富文本解析、图表等组件，uni-app的插件性能超过了wx-、wx-等微信小程序组件。

如果开发需要丰富且高性能的组件，应该使用uni-app而不是原生小程序开发。

4.学习门槛和开发经历

首先，微信原生开发语法既像React又像Vue，有点不伦不类。 对于开发来说，这意味着他们必须学习一套新的语法，这大大增加了学习成本。 此举遭到了大家的批评。

uni-app对开发更加友好。 简单来说就是Vue的语法+小程序的API。

它遵循Vue.js语法规范，组件和API遵循微信小程序命名。 这些都属于通用技术栈。 学习它们是一项重要的前端技能。 Uni-app没有太多额外的学习成本。

有一定Vue.js和微信小程序开发经验的开发可以快速上手uni-app。

从未学过Vue的同学不需要掌握Vue的全部。 他们只需要了解Vue的基本语法、数据绑定、列表渲染、组件等。 其他如路由、cli、node.js等不需要学习。

因为该工具可以与uni-app配合使用，消除终端开发，可视化创建项目，可视化安装组件以及扩展编译器，即uni-app的学习门槛比web开发的vue.js要低。

在开发体验上，微信原生开发与uni-app存在较大差距，主要体现在：

更强大的组件开发能力：vue的组件开发体验比小程序自定义组件开发好很多。 应用程序状态管理：uni-app支持使用Sass等CSS的vuex。 完整的 ES Next 语法支持自定义构建策略。 在开发工具方面，差距更大：

微信开发工具被无数uni-app制作公司吐槽，也是.io的制作公司。 /系列是四大主流前端开发工具，针对uni-app做了很多优化。 因此uni-app的开发效率和易用性是微信原生开发无法比拟的。 这里可以输出一个结论：如果需要工程能力，微信原生开发就别想了。

5. 未来的可扩展性

虽然现在的产品只需要发布到微信小程序，但如果有一天老板和外面的和尚喝咖啡，转身要求覆盖阿里巴巴、百度、字节跳动等各种小程序平台，程序员该怎么办？这次？ 管理？

各个平台真的到处搬砖吗？

这时候uni-ap的跨端功能就会成为程序员的自助工具。 app开发小程序无需修改即可同时发布到多个小程序，甚至App和H5平台。 这不是梦，这是现实。 您可以扫描以下8个二维码，亲身体验*全面的跨平台效果！

六，结论

结论：只开发微信小程序，个人会优先使用uni-app

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等