使用开发小程序，比直接原生wxml3.框架不成熟，掉坑里4.社区不完善

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

使用开发小程序，比直接原生wxml3.框架不成熟，掉坑里4.社区不完善

1.功能实现

底层API调用没有限制。 小程序端支持直接编写微信原生代码，与传统的Web开发类似。 如果使用vue、react等框架让开发无法操作浏览器提供的所有API，那么这样的框架一定是不成熟的。 小程序开发也是如此。 在uni-app框架中，也可以调用微信提供的所有原生API。 如果有某个API没有封装，开发可以直接在uni-app中编写微信原生API，即以wx开头的各种API。 。

<view>  
 <view>微信公众号关注组件view>  
 <view>  
       
     <official-account>official-account>  
 view>  
view>

uni-app也全面支持包括微信小程序自定义组件、WXS、云端开发在内的复杂使用。 尤其是wxs，目前各种小程序开发框架中，只有uni-app支持。 因此，结论是：使用uni-app框架进行开发在功能上和原生小程序开发没有什么区别，不会有任何限制。

2、演出经历

不会造成性能下载，甚至会自动优化很多环节。 在很多场景下，性能体验优于微信原生开发。 类似于vue.js web开发，不仅性能不会比原生js差，而且由于使用了虚拟dom和差分更新技术，在大多数场景下，性能比开发手动编写代码操作dom要好。 更新数据在小程序中经常使用，这里非常重要的是差异化数据更新。 如果不做delta，代码性能会很差。 如果每个逻辑都决定增量数据更新，那么代码写起来就太麻烦了。 使用uni-app开发成微信小程序，底层自动更新差异数据，简单且高性能。 我们从优化理论和实测数据两个维度来详细解释。

2.1 理论：框架优化方案

为提高性能体验，小程序从架构设计层面做了很多工作：
1.逻辑层，视图层分离，避免js运算阻塞视图渲染
2.单独定义组件标签wxml，减少dom复杂度
3.精简样式wxss,提升渲染性能
4.复杂组件原生化(video/map等)，解决web组件的功能、体验缺失

通过这些规范约束，小程序的整体性能体验得到了很大的提升，但仍然存在很多性能陷阱，其中*常见的是。 这里引用微信官方的描述来简单介绍一下其背后的工作原理：目前小程序的视图层是作为渲染载体，逻辑层作为独立的运行环境。 从架构上来说使用开发小程序，比直接原生wxml3.框架不成熟，掉坑里4.社区不完善， 和 都是独立的模块，没有直接数据共享的通道。 目前，视图层和逻辑层之间的数据传输实际上是通过双方提供的数据来实现的。为了简化开发，微信将调用封装成方法来实现视图层和逻辑层的数据传输。

小程序的运行时性能直接决定了用户在使用小程序功能时的体验。如果运行时性能出现问题，很容易出现页面滚动卡顿、响应延迟等问题，影响用户使用。如果内存占用过高，还会出现黑屏、闪退等问题。
开发者可以从以下几个方面着手进行启动性能的优化
1.合理使用setData https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runtime_setData.html
2.渲染性能优化  https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runtime_render.html
3.页面切换优化
4.资源加载优化
5.内存优化

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  
        })  
    }  
})

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

export default{  
    data(){  
        return {  
            list:['a','b','c','d']  
        }  
    },  
    methods:{  
        change:function(){  
            let newData = ['e','f','g','h'];  
            this.list.push(...newData)  
        }  
    }  
}

如上面uni-app代码所示，该方法执行时，只会将列表中新增的4个列表项e、f、g、h传输给它，大大简化了传输量。

uni-app 利用 JSON Diff 库。 在调用之前，它会先比较历史数据，准确高效地计算出变化的差异数据，然后再次调用。 仅传输更改的数据，从而*大限度地减少传输的数据量。 化，大大提高了通信性能。 Tips：有些同学可能不同意将数据从a,b,c,d,e,f,g,h 8个列表项转移到e,f,g,h 4个列表项的优化，但是我们提醒您不要这样做低估了这一点。 机制，上面只是一个demo例子。

2.1.2 降低调用频率

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

change:function(){  
    this.setData({a:1});  
    this.setData({b:2});  
    this.setData({c:3});  
    this.setData({d:4});  
}

以上四个调用会触发4个逻辑层和视图层数据通信uni-app代码：

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 实测：性能对比数据

以400条微博帖子列表为例。 从页面空列表开始，每1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止加载（页面达到400条微博） ）。 (Bo)，计算这20次所花费的平均时间。 结果，微信原生这20次触发上拉->渲染完成的平均时间为876毫秒，uni-app为741毫秒。 这个数据可能违背很多人的直觉。 uni-app的性能其实比微信原生还要好！ 当然，如果你使用微信原生开发，也可以自己写代码优化。 但为每个业务写太多判断是不现实的。 自然，用框架更舒服。 这个结果与Web开发类似，开发也包括原生js开发、vue、react框架等。如果不进行专门的优化，原生JS编写的网页性能往往不如Vue、React框架。 正是因为Vue和React框架的优秀、性能和开发经验，原生js开发的使用量逐渐减少。

3、社区生态

小程序是脱离网络的自创生态系统，轮子在很多网络生态系统中是无法使用的。

微信小程序还有周边的生态系统，而其他几个小程序平台的生态系统基本还没有建立起来。 uni-app周边生态非常丰富，插件市场有近千个插件。 详情请参阅。

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

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

比如富文本解析、图表、自定义下拉刷新等组件，uni-app的插件性能超过了wx-、wx-等微信小程序组件。 uni ui等UI库的性能也超过了vant、iview等UI库的小程序版本。

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

4.学习门槛和开发经历

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

uni-app对开发更加友好。 简单来说就是vue+小程序的js 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存在较大差距，主要体现在：

在开发工具方面，差距更大：

这里可以输出一个结论：如果需要工程能力，微信原生开发就别想了。

5.未来的可扩展性

虽然目前的产品只需要发布到微信小程序，但阿里巴巴、百度、字节跳动、QQ、快应用等众多平台的流量都在增加，覆盖这些平台是迟早必须考虑的事情。

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

6. 结论 uni-app 微信

功能

相同的

相同的

表现

更适合常规场景

需要自己编写复杂的代码来提高性能

群落生态学

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