首页小程序开发正文

小程序开发框架的对比（小程序原生开发和框架开发对比）

小程序开发 2023-01-25T08:57:08 2399

今天给各位分享小程序开发框架的对比的知识，其中也会对小程序原生开发和框架开发对比进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、小程序与App有什么区别？

今天给各位分享小程序开发框架的对比的知识，其中也会对小程序原生开发和框架开发对比进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、小程序与App有什么区别？
2、uniappvue3vue2性能
3、小程序的区别
4、微信小程序框架解析
5、微信小程序(Mini Program)技术栈与框架简介
6、微信小程序开发和APP开发的区别？

小程序与App有什么区别？

小程序是一款基于微信的轻应用，面向10亿+的微信用户群体，具有四个特点：无需安装、无须卸载、触手可及、用完即走。因为它轻量、简单、开发成本比app低，可以说现在的小程序非常受企业及用户的欢迎，真的是无处不在、触手可及。

小程序与APP的区别有以下几个方面：

1、用户群

载体不同则用户群体不同，小程序是基于微信平台的应用，用户群仅限微信用户，截至目前也就是微信10亿+的用户量；而APP则是上架在App Store及Android应用市场，面向全球拥有智能手机的用户。

2、开发成本

微信小程序是基于腾讯的小程序开发框架进行开发，开发技术类似HTML。一次开发就可以自动适配所有手机，设计也只需要设计750*1334一份稿子就行、输出2X图给开发，所以总体来讲开发成本相对较低；

而APP在实际开发中，它需要开发安卓系统和iOS系统两种版本，所用到开发语言不同，同时还需要根据手机的不同尺寸进行适配，开发成本较高。

3、产品定位

小程序是在微信的框架里面，大小受微信的控制，比如之前不能超过2m，虽然现在调整了开发可以用分包加载的方式扩至8m；但是对于原生app来讲，相差是很大的，原生的app可以达到几十兆上百兆、不受限制；

正因为内存的控制，所以产品定位就会有所区别，必而导致内容框架会有所不同，小程序只能在功能架构上设置较为简单，比较轻量的，适合一些工具属性的应用，符合“快速打开、用完即走”的理念。

原生App的内存就不受控制，那么内容框架可以根据产品定位随意增添，可发挥的空间非常大，一些电商、社区等等无论多么复杂的应用都能一一实现。

另外，因为小程序的发展时间相对较晚，所以大多数都是先有成熟的App之后，为了抢占微信的生态流量，再研发对应的小程序，那么因为内存限制以及上架平台属性的不同，所以两者的内容框架及结构就会不同，通常将App中现有的成熟的内容版块进行删减重组再迁入到小程序体系中，做出适合微信生态圈的小程序产品。

4、基础框架

其实移动端产品的设计规范和原则大致是相同的，但是因为受制于微信小程序的框架，小程序产品与App产品在部分版块的表现形式上会存在一些差异：如顶部导航栏区域等。

5、用户体验

1，虽然现在小程序的入口提到微信首页，通过下拉就能轻松获取，但至少需要点击3步才能打开对应的小程序；

原生App是直接下载在用户的手机桌面上，所以在打开方式上，原生App会更快速一些；

2，流畅度上，虽然小程序流畅度还不错，但是当切换界面的层级较深、加载动态数据时还是会存在部分卡顿现象；app在界面切换的流畅度以及加载数据的响应速度都会比小程序更好一些；

3，在原生app中经常会看到一些非常有趣的动画展示，氛围感特别浓烈，带给用户非常友好的沉浸感和归属感；但是在小程序中，受到内存的控制，动画展示的元素会非常少，因而在界面的切换体验中会觉得非常单一、平淡，很难给用户留下深刻印象。

4，虽然微信公众号与小程序可以快速互通响应，但是在小程序与App的关联体验就会相对较差；目前如果从一个小程序打开对应的App，需要先打开客服对话框—回复提示数字—客服发送链接—点开链接才能响应App，整个步骤相对比较繁琐，体验较差。

最后

小程序和App的区别有很多，两者的关系是既可以相互补充，又可以完全独立。对于APP来说，打通了微信的流量，更加容易引流获客，通过小程序，降低了用户体验部分核心功能的门槛；对小程序来说，拓展了功能，实现了互通共赢。我们在设计以上应该考虑小程序与App的诸多区别，分析他们的优劣势，选择合适的方向去研发属于自己品牌调性的应用。

湖南道圣科技专注于APP开发、小程序开发、系统定制开发，自成立来我们服务过数百家企业，致力于为客户创造有价值的产品！从架构到编码，从数据结构到用户体验，给用户最专业的、最可靠的、最稳定的开发保障。

uniappvue3vue2性能

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；

新增支持 Vite 构建工具，在H5平台实现秒开预览；

新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，uni-app项目获得了多快好省四大收益：

更多的语法支持，支持组合式API，业务聚焦，开发效率更高；

更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；

更好的运行性能，用户端响应更快，体验更好；

更小的代码体积，瘦身30%以上，更省体积、更省流量

更多的语法支持

新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。

Vue 3.x的一些新增特性，uni-app也已经完全支持，如：

支持script setup

支持style scoped、style module、State-Driven Dynamic CSS(v-bind)

支持jsx、tsx（h5,app 平台支持，小程序不支持）

另外，在小程序平台，新版uni-app也扩展了更多的语法，如：

更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）

更完整的 props 支持（如传递函数）

更完善的 slot 支持（如作用域插槽）

更快的编译速度

开发者日常工作中，最无聊的就是等待编译构建。

某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。

uni-app本次升级vue3 Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。

测试环境说明：

硬件：RedmiBook 14 二代

处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz

内存：16.0 GB

操作系统：Windows 11 专业版 64 位操作系统

关于编译速度，我们做了两个维度的对比：

纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译时间

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3.x版本进行对比

uni-app 历史版本纵向对比

我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译时间。

uni-app项目编译时间的采集方式：

vue 2.6版本编译时间 = webpack 的 stats.endTime - stats.startTime

vue 3.x版本编译时间 = 构建工具入口处记录 global.vite_start_time = performance.now()，构建工具编译完成时：performance.now() - global.vite_start_time

H5平台

对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：

由此，我们可以观察到：

在vue 2.6环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 2.6版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；

在vue 3.x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3.x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。

通过图表对比，我们可以直观得出结论：vue 3.x环境下的首页编译时间，平均不到vue 2.6环境下的十分之一。

换言之，vue 3.x版本下的首页编译速度，相比vue 2.6版本，有十倍效率提升。

这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：

使用原生 ESM 文件，无需打包，实现极速的服务启动；

预览（运行）使用esbuild作为打包工具，相比vue 2.6环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）

本着这个十倍效率提升，小伙伴们还不赶紧上手试试？

小程序平台

对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。

App平台

对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：App平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能提升将近50%。

虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？

业内优秀框架横向对比

除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。

具体测试方案：

安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": "3.3.16"

使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：

使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值

关于Taro编译时间的计算方案：

开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能

在ctx.onBuildStart中记录开始编译时间

在ctx.onBuildFinish中记录编译结束时间

两者的时间差，即为编译过程消耗时间

然后使用uni-app的cli命令行，创建基于vue3.x的空项目模板，项目命名为uni-app-vue3。

我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。

同框架版本在H5平台上的编译时间，结果如下：

从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译20次了，友商第一次还没完呢。

继续编译到小程序平台，多次测试，求其均值，结果如下：

从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。

更好的运行速度

开发环节编译快了，那面向最终用户的软件，运行性能怎么样？

我们进入性能测试章节。

测试方案：

开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。

界面如下：

测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版) 、微信版本 8.0.16

准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。

评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？

测试计时方式：

选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），

点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；

在小米手机上进行多次测试，求其平均值，结果如下：

记录条数 200 400 600 800 1000

vue2 30ms 43ms 56ms 72ms 90ms

vue3 8ms 9ms 9ms 8ms 9ms

从表格中可以看出：

随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；

基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。

从这个常见的长列表组件响应实验来看，vue 3.x的性能体验要远高于vue 2.6版本。

更小的代码体积

项目发行后的代码体积，是一个很重要的考量指标：

H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；

小程序平台：更小的代码体积，可加速小程序包的下载（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；

App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页

为了测试vue 3.x新版升级后，代码体积的变化，我们同样做了两个维度的测试：

纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译包大小

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比

Tips：

开发阶段重在编译速度，对应npm run dev操作

发行阶段重在编译包大小，对应npm run build操作

uni-app 不同版本纵向对比

我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译包体积。

uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。

H5平台

H5平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在H5平台上的编译包体积至少瘦身30%以上。

H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。

小程序平台

小程序平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。

小程序开发框架的对比（小程序原生开发和框架开发对比）

小程序的区别

经过三年的发展，小程序已经衍生出不同的功能平台，例如资讯类、预约类、分销类、餐饮类、电商类等，可以适应每一个行业的发展需求，可以说，小程序在各个行业都扮演着重要的角色。无论是实体店转型线上，还是电商推广，亦或是政务需要，小程序都能解决。总体来说，小程序主要还是分为普通小程序和电商小程序两大类。那么二者有什么区别呢？

普通小程序作为基本的小程序模式，在小程序平台出现的一开始就存在，而普通小程序涉及的行业范围也越来越广泛，例如餐饮、教育、政务、娱乐、医疗等等，越来越都的行业加入小程序的生态圈。

普通小程序具备app的基础系统框架，如页面展示、资讯消息、菜单栏、页面跳转等功能，基本满足商家品牌宣传的商业需求。

除此之外，微信小程序对于商家来说，开发简单，成本低；对于用户来说，操作简单，即用即走，大众更加容易接受。商家选择普通小程序也在于其主要用途是品牌推广、服务展示，以此吸引用户关注，与用户建立关系，打造品牌形象。而电商小程序不同，其主要目的在于转化变现，实现商家增收盈利。

电商小程序的衍生，是移动社交商务的产物，也是电商行业必然的趋势。小程序天然的社交属性，意味着小程序自带一个巨大的流量池，在这个流量即为销量的市场，电商小程序必会受到追捧。这也证明了越来越多的人都投身到电商行业当中来，而选择电商小程序的人也在逐年增加呈现稳定上升的趋势。

电商小程序不同于传统的电商模式，它是商家自建的商城平台，因此不需要支付入驻加盟等费用，除去前期开发小程序商城的费用外，后续即无需保证金，也不需要佣金。

更重要的是在营销推广上，能够依托于微信庞大的用户基数，几乎无需运营和推广成本，就能取得非常理想的效果。

电商小程序可以兼容百款营销插件，解决商家获客、拓客、转化、变现等一系列问题。对于企业和商家来说，好友推荐，往往能产生最佳的裂变效果，吸引一大批流量。

电商小程序还能对接分销、会员系统，通过分销推广，在空间上，打破销售范围限制，扩大产品影响力，刺激销售，提高销量，进而转化变现。而会员系统，可以加强商家对会员的管理，增强会员粘性，通过后台大数据分析，帮助商家筛选优质的会员，对于消费频次低的会员，推送活动，刺激消费。

电商小程序和普通小程序最大的区别在于商业目的不同，电商小程序在于营业利润变化，普通小程序则是品牌推广。二者在基于小程序开发框架的基础上，电商小程序的功能则更加丰富。

微信小程序框架解析

微信小程序框架（Vue.js）

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生

APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。小程序提供了自己的视图层描述语言

WXML 和 WXSS，以及基于 JavaScript

的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

在刚接触微信小程序的时候，就是官方提供的这个框架，其实该框架的思想和vue还是有相似之处，正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者，还是可以先使用或学习下该框架，更能直接的了解小程序和学习。所以初学者值得推荐。