小程序原生开发有很多弊端：
原生wxml开发对Node、预编译器支持较差，影响开发效率和项目构建过程。所以大公司会用框架来开发微信定义的语法，wxml、wxs、wx:if等语法，过于私有化。不如认真学习Vue，学会通用，而不只是为了微信小程序。Vue生态中有太多可以提高开发效率的周边工具，比如IDE、验证器、三方库。. . 相比专业编辑，微信的开发者工具真的不好用，个性化设置也很少。
作为前端工程师，除了微信小程序，我们还需要开发网页、其他小程序甚至是应用程序。人们不喜欢来回切换开发工具并改变他们对语法的看法。
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）组件，但是开发者仍然可以使用微信组件在小程序端展示广告。代码示例如下：
微信官方banner广告
微信官方视频广告
小程序运行效果如下：
包括微信小程序自定义组件、WXS、云开发等复杂用法，uni-app全面支持。
所以得出的结论是：使用uni-app框架开发，功能和原生小程序开发没有区别，不会有限制。
2. 性能体验
开发者经常问的第二个问题：三方框架大多是分层封装的。这些封装会增加运行负载并导致性能下降吗？
也是想多了，uni-app不会导致性能下载，甚至会自动优化很多链接。在很多场景下，性能体验都优于微信原生开发。
类似于使用vue.js开发web，不仅不会导致性能比原生js差，而且由于使用了虚拟DOM和差分更新技术，在大多数场景下，性能都优于原生js的开发人员手动编写代码来操作 DOM。
在小程序中，需要频繁地编写代码来更新数据。这里重要的是差分数据更新。如果不做区别，代码性能不好。如果每个逻辑都判断差异数据更新，代码写起来太麻烦了。
使用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。以不同的模式编写代码。
小程序原生代码：
page({
data:{
list:['a','b','c','d']
},
change:function(){
let newData = ['e','f','g','h'];
this.data.list.push(...newData);
this.setData({
list:this.data.list
})
}
})
如上面微信原生代码所示，当方法执行时，列表中的a、b、c、d、e、f、g、h8列表项会通过all传递。
单应用代码：
export default{
data(){
return {
list:['a','b','c','d']
}
},
methods:{
change:function(){
let newData = ['e','f','g','h'];
this.list.push(...newData)
}
}
}
如上面的uni-app代码所示，在执行该方法时，只会传输列表中新增的四个列表项e、f、g、h，大大简化了传输量。
uni-app 利用 JSON Diff 库。在调用它之前，它会比较历史数据，准确高效地计算变化的差分数据，然后调用它。只传输变化后的数据，以达到传输数据量最小的目的。，大大提高了通信性能。
小贴士：可能有同学不同意将数据从a,b,c,d,e,f,g,h8列表项转为e,f,g,h4列表项的优化，但我们提醒，不要小看这一点机制，上面只是一个demo例子。
2.1.2 减少调用频率
假设我们需要改变多个变量的值，我们以微信原生和uni-app两种模式编写代码。
小程序原生代码：
change:function(){
this.setData({a:1});
this.setData({b:2});
this.setData({c:3});
this.setData({d:4});
}
以上四个调用会引起四个逻辑层和视图层数据通信
单应用代码：
change:function(){
this.a = 1;
this.b = 2;
this.c = 3;
this.d = 4;
}
上面uni-app的代码会合并成{"a":1,"b":2,"c":3,"d":4}一条数据，然后只调用一次就完成了数据传输，大大降低通话频率。
uni-app之所以有这样的优势，是因为uni-app是基于Vue深度定制的，使用了Vue的机制。
2.2 实测：性能对比数据
有了上面的理论分析，我们再进行实机测量，并用数据进行对比。
测试模型如下：
模仿微博的榜单是一个有很多组成部分的榜单。这种复杂的列表对性能的压力更大，非常适合性能测试。
从触发上拉加载到数据更新和页面渲染完成，都需要准确的时序。人类视觉计时绝对是不够的。我们采用程序嵌入的方法，制定如下时序：
Tips：回调函数的开始时间可以认为是页面渲染完成的时间，因为微信是这样定义的（微信规范）：
测试方法：从页面上的一个空列表开始，程序自动触发上拉加载，每次添加20个列表，记录单次耗时；以固定间隔连续触发N次上拉加载，使页面达到20*N个列表，计算从触发上拉到渲染完成的平均时间。
测试结果如下：
说明：以400条微博列表为例，从页面空列表开始，每1秒触发一次上拉加载（新增20条微博），记录单次耗时，停止触发20次后（页面达到400条微博），计算这20次的平均耗时，结果显示这20次微信原生触发上拉->渲染的平均时间为876毫秒， uni-app 是 741 毫秒。
这些数据可能违背许多人的直觉。uni-app的性能比原来的微信还要好！
不要混淆，这是上面理论分析部分减少传输数据量的优化方案的结果；微信原生每次传输全量数据，而`uni-app`在调用`之前会自动做一次`diff`计算，每次只传递变化的数据。
使用微信原生框架，开发者可以完全自行优化和简化数据传输。例如修改如下：
data: {
listData: []
},
onReachBottom() { //上拉加载
// 通过长度获取下一次渲染的索引
let index = this.data.listData.length;
let newData = {}; //新变更数据
Api.getNews().forEach((item) => {
newData['listData[' + (index++) + ']'] = item //赋值，索引递增
})
this.setData(newData) //增量数据，发送数据到视图层
}
经过以上优化修改，再次测试，微信原生框架的性能数据如下：
从测试结果可以看出，经过开发者手动优化后，微信原生框架可以实现更好的性能，但`uni-app`的性能差距与微信原生相比并不大。
但是原生开发需要开发者熟悉小程序的通信机制，有意识地编写代码，简化数据；uni-app 自动处理，自然更省心。
这个结果类似于 web 开发，也包括原生 js 开发、vue 和 react 框架。如果不做特别优化，原生js编写的网页性能往往不如vue和react框架。
正是因为优秀的`Vue`和`react`框架，良好的性能和良好的开发体验，使得原生js开发的使用逐渐减少。
通过本章性能优化的理论分析和数据测量，我们可以输出这样一个结论：
3.社区生态3.1 周边车轮
小程序脱离web自创生态天外神坛，很多web生态不能使用轮子。
微信小程序还有一个周边生态，而其他几个小程序平台的生态还没有建立起来。
uni-app周边生态非常丰富，插件市场有近800个插件，详见。
首先，uni-app兼容小程序生态小程序源码论坛，可以直接引入使用各种自定义组件。在此基础上，uni-app插件市场拥有更多vue组件，可以跨多个终端同时使用，性能卓越。
这使得 uni-app 生态系统成为最丰富的小程序开发生态系统。
比如富文本解析、图表等组件，uni-app的插件性能超过了wx-等微信小程序组件。
如果开发者需要丰富的高性能组件，应该使用 uni-app 而不是原生小程序开发。
3.2 活跃的QQ/微信群和论坛
uni-app官方拥有70个开发者QQ/微信交流群（大部分是2000人，近10万开发者），还有更多的三方群。
每天有数百条帖子的问答社区。活动与官方微信小程序论坛相同，远超其他小程序官方论坛。
uni-app三方培训活跃，腾讯课堂官方为uni-app制作课程。各种培训网站随处可见免费或付费的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的学习门槛低于vue.js由网络开发。
在开发体验上，微信原生开发与uni-app有较大差距，主要体现在：
在开发工具的维度上，差距更大： - 微信开发者工具被投诉无数 - uni-app的生产公司也是.io的生产公司。/是四大主流前端开发工具（堪比百度指数），对uni-app做了很多优化，所以uni-app的开发效率和易用性都比不上微信原生开发.
这里可以得出一个结论：如果需要工程能力，微信原生开发就别想了。
5.未来的可扩展性
虽然现在的产品只要求发布到微信小程序，但如果有一天，老板和一个外国和尚喝完咖啡转身要求覆盖阿里、百度、字节跳动等各种小程序平台。程序员此时应该做什么？管理？
每个平台都搬砖是真的吗？
这时，uni-ap的跨端功能将成为程序员的自助神器。基于uni-app开发的小程序无需修改即可同时发布到多个小程序，甚至是App和H5平台。这不是梦想，而是现实。可以依次扫描以下8个二维码，体验最全面的跨平台效果！.
6.结束语
结论：只开发微信小程序，uni-app也要用。 | 
发表于 2022-1-9 02:00:36
