微信小程序组件化开发框架的特点及发展趋势分析
发表时间：2023-11-06 08:52:02
文章来源：炫佑科技
浏览次数：177
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
相信接触过微信小程序一段时间的开发或者开发团队或多或少都会为自己搭建一些框架/脚手架来封装、方便开发。 尤其是那些做过Web开发开发，受到现在主流Web开发框架的影响。 比如受React、Vue等核心思想的影响，对数据/状态管理、组件化、跨平台等有更高的追求。
因此，小程序到现在，一些遵循这些Web开发思想的小程序框架也相继出现。 *突出的就是腾讯团队推出的小程序组件开发框架WePY。 主要特点如下：
这些功能基本上是当今主流Web开发的标准功能。 由于我在开发Web应用时经常使用Vue，因此在试用WePY的过程中感觉非常熟悉且易于使用。 确实是一个值得使用的好框架，可以有效提高生产力。
不过，今天的主角并不是类似Vue的框架WePY。 我想说的是另一个基于Vue的框架：美团点评团队出品的小程序开发框架：mpvue。 为什么说WePY是一个“类似Vue”的框架，而这个mpvue是一个“基于Vue”的框架呢？ 因为WePY在代码开发风格上借鉴了Vue，所以与Vue本身无关； 而这个mpvue是对Vue整个核心代码进行二次开发形成的框架，相当于对Vue本身进行了赋能，增加了开发微信小程序能力。
使用mpvue开发小程序，基于小程序技术体系，您将获得以下能力：
它的目标是：未来*理想的状态，一套代码可以直接运行在多个终端：WEB、微信小程序、支付宝小程序（借助weex）。 但由于各端之间存在一些明显的差异开发微信小程序的目的，从产品层面来说，不建议这样做。 该框架的官方只期望一致的开发和调试体验。
通过官网提供的五分钟快速入门教程，可以发现它的开发流程与Vue高度一致微信小程序组件化开发框架的特点及发展趋势分析，甚至使用的命令行工具仍然是*初用来开发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>
而mpvue会通过编译将这个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>
这样我们就可以完全像开发Web应用一样开发小程序了，为我们减少了一些思维转换的成本。 其实*重要的是：
Vue 真的很容易使用！
另外，还对原生微信小程序、mpvue、WePY这三种小程序开发方式进行了对比。 有兴趣的朋友可以参考一下：
