megalo -- 网易考拉小程序解决方案

megalo 是基于 Vue 的小程序框架（没错，又是基于 Vue 的小程序框架），但是它不仅仅支持微信小程序，还支持支付宝小程序，同时还支持在开发时使用更多 Vue 的特性。

背景

对于用户而言，小程序能提供更好的体验，但对于开发者而言，要让一个应用跑在多个平台上，则需要写多套代码。如何提高小程序开发效率让很多开发者都感到头疼。

业界也有相关的解决方案，如 taro 和 mpvue，二者都是基于 react 和 vue 的开发模式实现，让开发者能够以他们熟知的 react 或 vue 模式来开发小程序，提高开发效率。

mpvue 的发布给了我们很多启发，更早的时候，我们基于 RegularJS（网易自研的前端框架）开发了一个名为 mpregular 的小程序框架。在 mpregular 的开发和实际使用过程中，我们发现如果小程序框架所支持的特性只是原框架的子集（例如不支持 filter、模版复杂表达式等），开发效率会大打折扣。

所以，我们在方案上做了很多尝试，目的是支持更多的特性，减少小程序与 H5 开发之前的差异。目前 mpregular 已经在考拉的小程序业务中大量应用，相关业务的开发同学纷纷表示，学习成本变低，跨端业务（H5 和小程序）的开发效率提升近一倍。

方案经过一段时间验证后，我们决定把这套方案用 vue 再实现一次，一是为了适应技术栈的变更升级，二是为社区做一点微小的工作，于是就便有了 megalo。

特性

支持更多模版语法特性

相比于其他小程序开发模式，由于支持更多特性，megalo 更贴近 Vue 原生的开发模式。

特性	小程序	mpvue	megalo
computed 计算属性	❌	⭕️	⭕️
v-model 双向绑定	❌	⭕	⭕️
slot 插槽	⭕️	⭕️	⭕️
scoped-slot 插槽	❌	❌	⭕️
filter 过滤器	❌	❌	⭕️
v-html 富文本	❌	❌	⭕️
复杂表达式插值	❌	❌	⭕️

从表格可以看到，megalo 最大的特点之一是，支持更多的 Vue 语法特性。这意味着，如果你有一个需求是要把现有的 Vue 代码迁移到小程序上，不需要太多改动。因为你的代码中可能大量使用 filter、scoped-slot、复杂表达式插值。

基本语法

支持 vue 的基本模版语法，包括 v-for、v-if。class 和 style 的绑定方式没有限制，官方的用法都支持。

<!-- v-if & v-for -->
<div v-for="(item, i) in list">
  <div v-if="isEven(i)">{
  { i }} - {
  { item }}</div>
</div>

<!-- style & class -->
<div :class="classObject"></div>
<div :class="{ active: true }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :style="{
       color: activeColor, fontSize: fontSize + 'px'