megalo 是基于 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-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要使用 import Vue from 'vue'
import VHtmlPlugin from '@megalo/vhtml-plugin'
Vue.use(VHtmlPlugin)
复制代码
利用 <div v-html="'<h1>megalo</h1>'"></div>
复制代码
更好的数据更新性能小程序的官方明确说明,在调用 像下面这段代码,如果视图只需要展示 <div>{{ user.name }}</div> <script> export default { data() { return { user: { name: 'kaola', age: 3, favorite: [ 'encalyptus', 'sleeping' ] } } } } </script> 复制代码
支持更多平台今年以来,各大流量平台都在小程序领域有所动作,蚂蚁金服成立小程序事业部,百度、今日头条也纷纷推出自己的小程序。megalo 目前已经支持微信和支付宝小程序,百度小程序等平台的支持也在计划当中。 使用使用 megalo 开发非常简单,只需在常见的 Vue 项目 webpack 构建配置上配置 const { createMegaloTarget } = require('@megalo/target');
module.exports = {
target: createMegaloTarget( {
compiler: require('@megalo/template-compiler'),
platform: 'wechat'
} )
// 其他 webpack 配置,如 vue-loader 等
};
复制代码
接着,就可以像开发 Vue 应用一样去开发小程序。示例可以参考 megalo-demo 。 如果想用 typescript 进行开发,可以参考 megalo-ts-simple 。 实现小程序在结构上主要有 Service(JavascriptCore) 和 View(WebView) 两部分组成(微信和支付宝小程序有着类似的结构,下文均以微信小程序为例,并简称为小程序),分别运行在独立的环境上,之间不具备共享数据通道,二者的通信方式是将数据封装在 js 脚本后传递。Page 实例就在 Service 中,通过 实际开发中,小程序的逻辑和模版需要写在 最终的运行效果是,当 Vue 的 vm 上数据发生更新时,会重新渲染出 vdom,在的 patch 阶段,框架不在去操作 DOM,而是通过 Page 上的 megalo 的实现,主要分成以下四个部分,下面本文将对每个部分进行介绍。 生命周期小程序中,每一个页面(Page)是一个实例,页面的生命周期钩子有很多,但和实例创建的两个关键生命周期分别是 除了这两个生命周期钩子以外,像小程序的 模版转换小程序有它特有的模版语法和文件名后缀,所以在构建阶段,我们会将 这一部分是在构建阶段完成的,这意味着,megalo 不支持 render 函数的写法。在构建阶段除了将模版转换成 数据映射由于无法直接操作视图层的 DOM,所以我们只能利用 但是,这种粗暴的更新方式有两个弊端: i. 全量更新 ii. 同步到 当然以上两个弊端不会对功能开发造成影响,但在实际的业务开发中,会让开发体验不一致,尤其是 h5 代码迁移到小程序时,对效率影响颇大。为了解决这个问题,megalo 采用另一种方式,即将 render 时生成的 vnode 上的数据更新到视图,vnode 的数据就是已经处理好的展示数据,根据 vnode 构造每个节点的数据结构,再同步到视图层。 例如以下这段代码,在构建阶段 megalo 会对每个节点进行标记,使 render 时生成的 vnode 和模版中每个插值能够对应上。 <!-- 编译前的 Vue 模版 .vue --> <div :class=“classObj”> {{ date | format( 'YYYY' ) }} </div> <!-- 编译后的小程序模版 .wxml --> <view class="{{ node_1.class }}"> {{ node_1.text }} </view> 复制代码
以这种方式实现的数据映射,只有视图层需要的两个字符串数据会被同步到小程序的 Page 实例上,其余数据则被认为与视图无关则不会进行同步。 export default {
data() {
return {
classObj: {
'kaola': true
},
date: new Date(),
users: {
// big object
}
}
}
}
复制代码
如下图所示,Vue 渲染出来的 vnode 会被以特定的数据结构映射到 page 上,再同步到小程序视图层。 以这种方式实现的数据映射,可以更好地支持 Vue 的模版语法,且更大限度地减少更新视图时传输的数据量,从框架层面规避 事件代理小程序视图触发事件后,会将 <!-- 编译前的 Vue 模版 .vue -->
<div @click="onClick"></div>
<!-- 编译后的小程序模版 .wxml -->
<view bindtap="proxy" data-compid="0" data-nodeid="0"></view>
复制代码
事件触发时,proxy 方法会从 event 对象上获取对应的 id 信息和事件类型,进而从 Vue 的根 vm 开始查找,最终在 vnode 上找到对应的 handler 并执行事件处理,完成小程序事件到 Vue 实例的事件代理。 现在与未来目前,megalo 已经逐步在考拉的小程序应用开发中投入使用,但 megalo 的数据映射方案早已通过 mpregular 在考拉的大量小程序应用中得到了验证。现在,megalo 支持 typescript 开发,支持支付宝小程序。 百度智能小程序的支持也在计划之内,同时,我们还计划开发一个兼容个平台的 UI 组件库、API 库,尝试将跨 H5 和各小程序平台的应用开发之间的差异最小化,提升开发效率。 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码