小程序框架

什么是小程序框架？

微信小程序实质上是一款基于web技术的应用程序，他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言，代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处，最直观地来看，网站页面是运行在浏览器中，微信小程序是运行在微信中。此外，微信小程序能够做到与微信紧密相融，使得在一些功能上的开发更为方便。比如获取用户身份，因为微信账号实际上已经标识了用户身份，只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息，使用手机存储等，借助微信这一平台，小程序都能达到近乎原生APP的操作体验。

前端的开发一般采用的是HTML+ CSS + JS这样的组合， 假设做一个网站或者小程序是建造一间房子，那么html搭建了房子的骨架，通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件，顾名思义，是房子的组成部件。那么在实际的前端中，这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素，有了这些也就有了这个页面的框架。

而CSS是用来对房间进行装修美化的，就像是把墙面涂上不同的颜色，确定好门窗的摆放位置，是一切看起来非常的赏心悦目。在实际的前端中，就是给每个页面元素加上样式，包括大小、颜色、位置、形状等等。通过css，我们的页面才有了漂亮的视觉效果。

js的作用则是让门和窗户动起来，给组件添加需要的动态效果，比如对鼠标点击的响应，动态地改变展示数据等功能。

通过html+css+js这三部分的配合，最终构成了一个完整的前端。那么小程序也是如此，在小程序中，html变为了wxml，css变成了wxss，这是因为在一些语法和用法上，小程序与普通的前端存在一些差别，但是他们每一部分负责的工作和他们之间的关系都没有变化，大家可以类比加以理解。

微信小程序的框架分为两层，分别是视图层和逻辑层，框架的视图层由WXML与WXSS编写，由组件来进行展示，负责小程序的外貌；逻辑层又称为AppService，由js编写，负责小程序的行为动作。因此，我们编写的代码主要是三部分：视图层、逻辑层以及他们之间的联系互动，这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。视图层将逻辑层的数据展示到界面，同时将视图层的事件发送给逻辑层。

微信小程序主流框架汇总

一、微信小程序官方框架MINA

weixin官方文档：

框架：

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

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

二、uni-app

uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。 开发者使用 Vue 语法编写代码，uni-app 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。

特性：

开发者和案例更多：HBuilder装机量500万台，开发者社区月活百万，70多个QQ微信

群承载10万人。案例众多，uni统计月活10亿

性能更高（见评测）

更丰富的周边生态，插件市场数千款插件

提供比小程序原生开发更好的开发体验、更高的工程化效率

跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级

权威认可：阿里小程序官方工具内置uni-app、腾讯课堂官方自制uni-app培训视频

三、组件化开发框架wepy

Github地址:

官网地址：

WePY 项目启动于 2016 年 11 月份， 是小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征。

特性：

使用 Vue Observer 实现数据绑定

支持 Vue watch/computed/mixin 等特性

基于原生组件实现组件化开发

支持 TypeScript

四、 美团小程序框架mpvue

官方地址：

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

彻底的组件化开发能力：提高代码复用性

完整的 Vue.js 开发体验

方便的 Vuex 数据管理方案：方便构建复杂应用

快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

支持使用 npm 外部依赖

使用 Vue.js 命令行工具 vue-cli 快速初始化项目

H5 代码转换编译成小程序目标代码的能力