小程序原生开发有不少槽点：原生wxml开发(组图)

100665861 发表于 2022-1-24 00:42:49

小程序原生开发有很多弊端：

原生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）组件，但是开发者仍然可以使用微信组件在小程序端展示广告。代码示例如下：

<pre> <code class="language-text"><view>
<view class="title">微信官方banner广告</view>
<view style="min-height: 50px;">

 <ad unit-id="adunit-01b7axxxbf53d74e"></ad>
</view>
<view class="title">微信官方视频广告</view>
<view style="min-height: 50px;">

 <ad unit-id="adunit-9f340xxx64533" ad-type="video" ad-theme="white"></ad>
</view>
</view></code></pre>
小程序运行效果如下：

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_0.jpg

包括微信小程序自定义组件、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方法来实现视图层和逻辑层之间的数据传输。数据流图如下：

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_2.jpg

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

幸运的是，uni-app 针对两者进行了优化。

2.1.1 减少传递的数据量

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

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_3.png

小程序原生代码：

<pre> <code class="language-text">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
 })
}
})</code></pre>
如上面微信原生代码所示，当方法执行时，列表中的a、b、c、d、e、f、g、h8列表项会通过all传递。

单应用代码：

<pre> <code class="language-text">export default{
data(){
 return {
 list:['a','b','c','d']
 }
},
methods:{
 change:function(){
 let newData = ['e','f','g','h'];
 this.list.push(...newData)
 }
}
}</code></pre>
如上面的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两种模式编写代码。

小程序原生代码：

<pre> <code class="language-text">change:function(){
this.setData({a:1});
this.setData({b:2});
this.setData({c:3});
this.setData({d:4});
}</code></pre>
以上四个调用会引起四个逻辑层和视图层数据通信

单应用代码：

<pre> <code class="language-text">change:function(){
this.a = 1;
this.b = 2;
this.c = 3;
this.d = 4;
}</code></pre>
上面uni-app的代码会合并成{"a":1,"b":2,"c":3,"d":4}一条数据，然后只调用一次就完成了数据传输，大大降低通话频率。

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

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_4.jpg

2.2 实测：性能对比数据

有了上面的理论分析，我们再进行实机测量，并用数据进行对比。

测试模型如下：

模仿微博的榜单是一个有很多组成部分的榜单。这种复杂的列表对性能的压力更大，非常适合性能测试。

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_5.jpg

从触发上拉加载到数据更新和页面渲染完成，都需要准确的时序。人类视觉计时绝对是不够的。我们采用程序嵌入的方法，制定如下时序：

Tips：回调函数的开始时间可以认为是页面渲染完成的时间，因为微信是这样定义的（微信规范）：

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_6.jpg

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

测试结果如下：

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_7.jpg

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

这些数据可能违背许多人的直觉。uni-app的性能比原来的微信还要好！

不要混淆，这是上面理论分析部分减少传输数据量的优化方案的结果；微信原生每次传输全量数据，而`uni-app`在调用`之前会自动做一次`diff`计算，每次只传递变化的数据。

使用微信原生框架，开发者可以完全自行优化和简化数据传输。例如修改如下：

<pre> <code class="language-js">data: {
listData: []
},
onReachBottom() { //上拉加载
 // 通过长度获取下一次渲染的索引
 let index = this.data.listData.length;
let newData = {}; //新变更数据
 Api.getNews().forEach((item) => {
 newData['listData[' + (index++) + ']'] = item //赋值，索引递增
 })
this.setData(newData) //增量数据，发送数据到视图层
}
</code></pre>
经过以上优化修改，再次测试，微信原生框架的性能数据如下：

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_9.jpg

从测试结果可以看出，经过开发者手动优化后，微信原生框架可以实现更好的性能，但`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个二维码，体验最全面的跨平台效果！.

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_11.jpg

6.结束语

http://tt.ccoox.cn/data/attachment/forum/20220124/1642956169984_12.jpg

结论：只开发微信小程序，uni-app也要用。

页: [1]

手游源码-游戏源码-棋牌源码资源网-亲测源码-游戏搭建-破解游戏-网站源码-qq技术's Archiver

小程序原生开发有不少槽点：原生wxml开发(组图)