跳到主要内容

小程序概览

· 阅读需 12 分钟
Jeii Zou

简介​


小程序是相对于App而言更轻便的一种应用存在形式，强调**用完即走、无需安装卸载、随时可用的特点。

小程序架构设计​


![image.png](/img/miniprogram/weixin-mp.png)

以微信小程序为例:
  1. 小程序的渲染层和逻辑层是分开的。
  2. 数据通信上, 逻辑层通过显示调用 setData 方法与 Native 交互再通知视图层进行更新。反过来视图层也只能通过Native触发逻辑层的逻辑。
  3. 分离设计的好处在于渲染页面的时候不需要处理JS, 因此可以提高首屏的渲染速度和稳定性。同时, 逻辑层不能直接操作DOM，这从某种程度上也算是一种优点。
  4. 需要注意: 小程序的渲染层仍然是以 webview 来渲染而不是原生渲染的, 因此小程序的性能是无法跟 Native 程序比较的。

小程序和WebView的比较​


大部分的平台都支持 `webview` 模式。从渲染进程上来说原生和 `webview` 的性能是一致的, 但是在其他因素的影响下会有一些不同, 下面我尝试根据官方的文档和我查询到的资料列举一些 `webview` 的优点和缺点。

**优点:**
  1. 可以直接兼容原来的H5代码, 代码开发量小。
  2. 内容更新无需审核, 部署完站点刷新生效。

**缺点:**
  1. 原生小程序进行了渲染逻辑分离, 并设计了一套加载和优化的机制(更新, 离线缓存等等), 同样是 webview 内核渲染, 这点仍然会有差距。
  2. webview 无法跳转原生页面, 并有由于通信机制的问题, 还可能有其他的一些问题(例如页面跳转, 支付, 分享等)。
  3. webview 的比重过大可能会对审核造成影响。


小程序平台对比​

平台应用入口开发成本文档地址支持
微信小程序微信使用JS开发, 有一定的API学习成本https://developers.weixin.qq.com/miniprogram/dev/framework/小程序/小游戏
支付宝小程序支付宝与微信小程序的整体架构基本一致, 修改API和文件后缀可以进行迁移https://opendocs.alipay.com/mini/developer小程序/小游戏
字节跳动小程序头条/抖音/头条极速版可以从微信小程序转换过来， 部分框架支持https://microapp.bytedance.com/dev/cn/mini-app/introduction/about-mini-app/general-introduction小程序/小游戏
百度智能小程序百度APP与微信小程序的整体架构基本一致, 提供"搬家工具"从微信小程序迁移到百度小程序https://opendocs.alipay.com/mini/introduce小程序/小游戏
快应用vivo、华为、OPPO、小米、联想、金立、魅族、中兴、努比亚、一加、海信、中国移动终端相比微信、支付宝小程序，快应用的开发语法标准，其语法也更接近传统网页。https://doc.quickapp.cn/小程序
QQ小程序QQ可以比较简单的从微信小程序迁移过来https://q.qq.com/wiki/develop/miniprogram/frame/小程序/小游戏
钉钉小程序钉钉小程序自建DSL, 类似Vue的语法, 微H5则是全前端的技术栈https://ding-doc.dingtalk.com/doc#/personnal/fdzxvg小程序/H5微应用

微信小程序是小程序这个概念的发起者，因此后续许多小程序的设计都很类似与微信小程序。**支付宝小程序**只需要在微信小程序的代码上稍作修改就能进行转换（甚至有个vscode的插件“wx2my”可以一键转换）。而**QQ小程序**甚至可以兼容微信小程序直接运行（只需要干掉一些手机获取之类的API）。
**
**注**: 快应用和其他小程序在设计上有所不同, 而更接近与PWA的概念。正是如此，快应用更多的是手机厂商在推动而不是平台方。 

小程序框架简单对比​

小程序框架wepyjsmpvuetarouni-appchameleon
团队腾讯美团京东DCloud(数字天堂)滴滴
支持平台H5, 微信, 支付宝支持将微信小程序转换为支付宝、百度、qq、头条小程序微信/百度/支付宝/字节跳动/QQ小程序 、快应用、 H5 端 以及 移动端（React Native）小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5web、微信小程序、支付宝小
程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用
语法风格接近Vue与Vue一致React标准, 可以使用JSX与Vue一致类似Vue
数据流管理Redux/MobxVuexRedux/MobXVuexVuex
开源组件库需要小改目标源码可以直接使用原生组件库可以直接使用原生组件库可以直接使用原生组件库需要大改目标源码
组件化自定义组件规范Vue组件规范React组件规范Vue组件规范自定义组件规范
脚手架wepy-clivue-clitaro-clivue-clichameleon-tool, 不支持npm
构建框架内置构建工具webpackwebpackwebpackchameleon-tool
样式支持less/sass/stylus/postcssless/sass/postcssless/sass/postcssless/sass/postcssless/sass/postcss
API文档https://wepyjs.github.io/wepy-docs/2.x/#/base/introhttp://mpvue.com/https://taro-docs.jd.com/taro/docs/README.htmlhttps://uniapp.dcloud.io/https://cml.js.org/doc/api/api.html
Star(02/05)19.7k19.4k23.8k18k7.1k
最后一次更（02/07 15：30）20小时前6个月前1小时前19小时前22天前
其他说明发布的时间较早, 多平台的支持一般更新较慢支持ESlint, 支持CSS Module, 支持微信小程序转为taro进行重构使用HBuilder支持更完整, 语法,编译部署等自研了语法检验工具, 但是不支持ts, 有专门针对多端开发的多态协议

从几个平台的比较可以看出，taro是以react为技术栈的，虽然发展的很不错，但不太符合原先代码的技术选型。chameleon和wepyjs另起炉灶自己构建了一套dsl，对于目前的代码来说兼容性一般，如果要使用需要对原来的代码进行大幅度的修改。所以下面主要详细的对比下mpvue和uni-app这两个框架的各方面。

mpvue和uni-app的比较​


  1. 开发工具

mpvue和uni-app都提供了脚手架进行项目初始化，并且都是以vue-cli为基础的。此外uni-app在它自家的Hbuilder中提供了可视化的初始化操作，并集成了后续的测试发布。鼠标点点点即可完成。
两个框架都支持sass、less、stylus和typescript。uni-app在自家的ide上集成了代码提示支持。


这里说明几点uni-app其ide创建项目和cli创建项目的不同点：
  • 两者的最大区别在于cli的编译器是附在项目中的，ide则附在ide的软件中。cli创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update 。
  • cli 安装sass、less需要自己手动安装， ide上可以点点点。
  • 把 cli 的src直接拖入ide可以继续执行，但是会使用ide的编译器。
  • cli 的项目不能编译成APP。
  1. 端的支持

mpvue支持微信、百度、头条和支付宝。uni-app如果不算h5端和app（android、ios）的支持，只算小程序则比mpvue多一个钉钉小程序和QQ小程序的支持。

  1. 组件生态

uni-app的官方搭建了社区和组件库，mpvue没有。不过mpvue支持直接使用小程序原生的组件库，并且第三方的工具库也比较丰富。

  1. 接入成本

两个库都是兼容vue的语法规则，uni-app实现的语法规则更多。mpvue对于现有代码来说是没有接入成本的。uni-app则提供了mpvue迁移到uni-app的方法（https://ask.dcloud.net.cn/article/34945）。

  1. 文档

文档链接如下：uni-app , mpvue 。比较明显的是uni-app的文档更清晰。

其他框架补充​


文章链接​

  1. 微信官方小程序同构新方案Kbone全解析
  2. 小程序硬件框架
  3. 小程序底层实现原理及一些思考