推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：520
-
2020-05-08 浏览：509
-
2020-04-04 浏览：502
-
2020-05-12 浏览：497
megalo -- 网易考拉小程序解决方案
发布时间:2020-10-04megalo 是基于 Vue 的小程序框架（没错，又是基于 Vue 的小程序框架），但是它不仅仅支持微信小程序，还支持支付宝小程序，同时还支持在开发时使用更多 Vue 的特性。
背景对于用户而言，小程序能提供更好的体验，但对于开发者而言，要让一个应用跑在多个平台上，则需要写多套代码。如何提高小程序开发效率让很多开发者都感到头疼。
业界也有相关的解决方案，如 taro 和 mpvue，二者都是基于 react 和 vue 的开发模式实现，让开发者能够以他们熟知的 react 或 vue 模式来开发小程序，提高开发效率。
mpvue 的发布给了我们很多启发，更早的时候，我们基于 RegularJS（网易自研的前端框架）开发了一个名为 mpregular 的小程序框架。在 mpregular 的开发和实际使用过程中，我们发现如果小程序框架所支持的特性只是原框架的子集（例如不支持 filter、模版复杂表达式等），开发效率会大打折扣。
所以，我们在方案上做了很多尝试，目的是支持更多的特性，减少小程序与 H5 开发之前的差异。目前 mpregular 已经在考拉的小程序业务中大量应用，相关业务的开发同学纷纷表示，学习成本变低，跨端业务（H5 和小程序）的开发效率提升近一倍。
方案经过一段时间验证后，我们决定把这套方案用 vue 再实现一次，一是为了适应技术栈的变更升级，二是为社区做一点微小的工作，于是就便有了 megalo。
特性 支持更多模版语法特性相比于其他小程序开发模式，由于支持更多特性，megalo 更贴近 Vue 原生的开发模式。
从表格可以看到，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' }"></div> <div :style="styleObject"></div> <div :style="[baseStyles, overridingStyles]"></div>slot & scoped-slot
支持 slot 和 scoped-slot。
<div> <Container> <Card> <div slot="head"> {{ title }} </div> <div> I'm body </div> <div slot="foot"> I'm footer </div> </Card> </Container> <List :list="list"> <span slot-scope="scopeProps">{{ scopeProps.item.label }}</span> </List> <div>复杂表达式 & filter
可以在模版里面写复杂表达式、调用实例上的方法，当然也可以用更简洁的 filter 语法，跟平时用 Vue 开发一样。
<div> <div>{{ message.toUpperCase() }}</div> <div>{{ toUpperCase( message ) }</div> <div>{{ message | toUpperCase }}</div> </div>v-html
要使用 v-html 需要添加插件 @megalo/vhtml-plugin ，并引入模版解析库 octoparse ，在页面入口安装一下插件：
import Vue from 'vue' import VHtmlPlugin from '@megalo/vhtml-plugin' Vue.use(VHtmlPlugin) 复制代码利用 v-html 指令然后就可以在小程序中渲染 html 了。
<div v-html="'<h1>megalo</h1>'"></div> 复制代码 更好的数据更新性能小程序的官方明确说明，在调用 setData 更新数据时如果数据量过大或频率更高，会引发性能问题。megalo 在框架底层已经帮开发者对此进行优化，每次数据发生变化时，megalo 只会将视图中要展示的、且发生变化的数据进行更新，将 setData 的数据更新量最小化，同时对更新数据频率进行了限制。
像下面这段代码，如果视图只需要展示 user.name 这个字段的话，在进行数据同步时只会将 user.name 这个字符串更新到视图层，其余字段是不会同步到小程序的对象上的。
<div>{{ user.name }}</div> <script> export default { data() { return { user: { name: 'kaola', age: 3, favorite: [ 'encalyptus', 'sleeping' ] } } } } </script>支持更多平台
