文本

相信接触微信小程序一段时间的开发者或者开发团队，或多或少都会自己构建和封装一些方便开发的框架/脚手架，尤其是一些做过 Web 开发的开发者，受到如今主流的 Web 开发框架如 Vue 等核心思想的影响，对数据/状态管理、组件化、跨平台等有很高的要求。

因此自小程序出现以来，一些遵循这些 Web 开发思路的小程序框架也相继出现，其中最突出的莫过于腾讯团队推出的小程序组件开发框架 WePY，其主要特点如下：

这些特性基本都是现今主流 Web 开发的标准特性。因为我在开发 Web 应用时经常使用 Vue，所以在尝试 WePY 时感觉非常熟悉且好用。确实是一个值得使用的好框架，能有效提高生产力。

不过今天的主角并不是 WePY 这个 Vue-like 框架，我想讲的是另一个基于 Vue 的框架：美团点评团队出品的小程序开发框架。为什么说 WePY 是一个“Vue-like”的框架，而这个又是一个“Vue-”的框架呢？因为 WePY 在代码开发风格上借鉴了 Vue，和 Vue 本身没有任何关系；而这个是对整个 Vue 核心代码进行二次开发形成的一个框架，相当于赋能 Vue 本身，增加了开发微信小程序的能力。

通过开发小程序，您将基于小程序技术体系获得以下能力：

它的目标是：在未来最理想的状态下，一套代码可以直接运行在多个终端上：WEB、微信小程序、支付宝小程序、（借助Weex）。但由于终端之间存在一些明显的差异，从产品层面来说，不建议这么做。官方对这个框架的期望仅仅是开发和调试体验的一致性。

通过官网提供的五分钟快速入门教程可以发现它的开发流程和Vue高度一致，甚至使用的命令行工具也依然是开发Web应用时使用的vue-cli：

#创建一个小程序工程
vue init mpvue/mpvue-quickstart my-project

在编写模板代码时，通常主要关注 HTML。例如，当我们编写 .vue 组件时，我们编写以下代码：

<template>
 <div class="counter-warp">
   <p>Vuex counter：{{ count }}p>
   <p>
     <button @click="increment">+button>
     <button @click="decrement">-button>
   p>
   <a href="/pages/index/index" class="home">去往首页a>
 div>
template>

而是会通过编译将 HTML 模板转换成小程序的 WXML 代码：

<template name="counter$39c97971">
 <view class="_div data-v-72101980 counter-warp">
   <view class="_p data-v-72101980">Vuex counter：{{ count }}view>
   <view class="_p data-v-72101980">
     <button bindtap="handleProxy" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_button data-v-72101980">+button>
     <button bindtap="handleProxy" data-eventid="{{'1'}}" data-comkey="{{$k}}"
       class="_button data-v-72101980">-button>
   view>
   <navigator url="/pages/index/index" class="_a data-v-72101980 home">去往首页navigator>
 view>
template>

这样我们就可以像开发网页应用一样去开发小程序了，减少了一些思维切换的成本。其实最重要的是：

Vue 确实很容易使用！

另外我们提供了原生微信小程序、WePY三种开发小程序方式的对比，感兴趣的朋友可以参考一下：