Giter Site home page Giter Site logo

megalo's Introduction

Megalo

Megalo 是基于 Vue([email protected]) 的小程序开发框架,让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案,只需要少量改动即可完成 H5 和小程序之间的代码迁移。

Megalo 目前支持微信小程序支付宝小程序,未来的版本将支持百度小程序。

快速开始

Page 入口

声明 mpTypepage 作为小程序页面入口,在小程序创建 Page 实例时(onLoad 阶段),同时会创建一个于这个实例绑定的 Vue 实例作为一个页面的根实例,并将各生命周期进行绑定。

主要生命周期的顺序为:created(onLoad) => mounted(onReady) => beforeDestroyed(onUnload)。同时 onShowonHideonShareAppMessageonReachBottomonPullDownRefresh 也会与小程序 Page 对应的声明周期钩子绑定。

在每一个 Vue 实例中,都可以通过 this.$mp 方法小程序相关的数据,例如可以通过 this.$mp.options 访问 onLoad 时传入的参数,例如 query 字段。

<template>
  <div>
    <h1>{{ title | greeting }}</h1>
  </div>
</template>
<script>
  export default {
    mpType: 'page',
    filters: {
      greeting(t) {
        return `Hello ${t} !`;
      }
    },
    data() {
      return {
        title: 'Megalo'
      };
    },
    create() {
      // 获取 onLoad 中的 options
      console.log(this.$mp.options);
    }
  }
</script>

App 入口

Page 入口相似,mpType 设置为 app,以此绑定小程序 App 和 Vue 实例的声明周期。

主要生命周期的顺序为:created => mounted(onLaunch)。同时 onShowonHideonErroronPageNotFound 也会与小程序 App 对应的声明周期钩子绑定。

<template></template>
<script>
  export default {
    mpType: 'app',
    created() {
      console.log('launch');
    }
  }
</script>

支持特性

基本语法

支持 Vue 的基本模版语法,包括 v-for、v-if 等。

<!-- 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>

注:class 暂时不能用在组件上

复杂表达式、方法调用

支持在模版中写复杂的表达式、和调用 methods 上的方法。

<div>
  <div>{{ message.toUpperCase() }}</div>
  <div>{{ toUpperCase(message) }}</div>
</div>

filter

支持 filter

<div>
  <div>{{ message | toUpperCase }}</div>
  <div>{{ date | dateFormatter('yyyy-MM-dd') }}</div>
</div>

slot

支持基本 slot 功能,包括具名 slot。

<div>
  <Container>
    <Card>
      <div slot="head"> {{ title }} </div>
      <div> I'm body </div>
      <div slot="foot"> I'm footer </div>
    </Card>
  </Container>
<div>

注:暂不支持将 slot 一层层传递下去,例如

CompA template:

<div>
  <CompB>
    <slot></slot>
  </CompB>
</div>

CompB template:

<div>
  <slot></slot>
</div>

page template:

<div>
  <CompA>
    page title: {{ title }}
  </CompA>
</div>

目前 CompA 无法将从 page 接收到的 slot 片段传递给它的子组件 CompB。

slot-scope

支持 slot-scope。

page template:

<div>
  <CompA>
    <span slot-scope="scopeProps">{{ scopeProps.item }}</span>
  </CompA>
</div>

CompA template:

<div v-for="(item, i) in list">
  {{ i }} - <slot :item="item"></slot>
</div>

v-html

v-html 需要添加插件 @megalo/vhtml-plugin,并引入模版解析库 octoparse

webpack 配置,指定解析库的路径、和名称。

{
  // ...
  target: createMegaloTarget( {
    // ...
    htmlParse: {
      templateName: 'octoParse',
      src: _.resolve('./node_modules/octoparse/lib/platform/wechat')
    }
  } )
}

页面入口安装插件

import Vue from 'vue'
import VHtmlPlugin from '@megalo/vhtml-plugin'

Vue.use(VHtmlPlugin)

模版中使用

<div v-html="'<h1>megalo</h1>'"></div>

事件

除了支持事件绑定以外,还支持部分修饰符

<button @click="onClick"></button>

支持修饰符:

  • stop,用小程序 catch 绑定事件实现,例如 @tap.stop => catchtap
  • capture,用小程序的 capture 绑定事件实现,例如 @tap.capture => capture-bind(支付宝小程序不支持)
  • self(实验),目前利用特定的 data-set 标记元素实现
  • once,模拟 removeListener 实现

不支持特性

动态 component、slot、template

因为需要在构建阶段将所有的模版编译成小程序所需要的模版,因此动态的组件、模版、slot,目前都是不支持的。

v-once

暂不支持。

配套设施

灵感来源

名字来源于动画 Megalo Box。项目启发自 mpvue

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.