kaola-fed / megalo Goto Github PK

基于 Vue 的小程序开发框架

License: MIT License

CSS 0.31% HTML 0.50% JavaScript 98.19% Shell 0.09% TypeScript 0.54% Vue 0.37%

megalo's Introduction

Megalo

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

Megalo 目前支持微信小程序，支付宝小程序，百度智能小程序，字节跳动小程序。

配套设施

支持

megalo 经公司内部大项目验证，可在你的公司或个人项目中使用
如果你觉得还不错，请点下「star」以表支持
任何技术问题均可在交流群内讨论

灵感来源

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

megalo's People

Contributors

Stargazers

Watchers

Forkers

stevenbz guozhengmao valsun2016 zwwill gto999 allwynliang arch-leo joncv mvpleung accr weaccreative bsyslient lancersun witme joyruby ass233 lanmaomm chenchiwei jaylinlee xionghao1991 chengyuzhang zc806zc zhongyushi joe223 makeclan dut3062796s sdtm1016 jangocheng jangocity linecode hukuivip woerwin ilaotan scbzld liumiangit fanglong zhj296409022 liuqq168 zlxbuzz kgloveyou qingchengli jackymoto zhiweicoding rockywu kule2018 harrypoint jskit bailant datafu hzjzxy weizhidb xuhengfeng tongxin3267 mosquito1803 menzil fengzhiqiang012 825553819 kalmanzhang suuqi yangsa1995 chenmins hinisal ycs0405 e8wow yzq007 zhipingch leezhang521 shenxueyuan hhy5277 apphuangweipeng137 xiexieni1992 foundations wayenliu ethonchan eric-seekas geminate zxw915288730 khalilxia zn-fe 06linux codeteenager luorijin chenzizo niceue fangcong27630 bluepeople1 ac51300696 charleswise angleszhaixd hycript chooin 7253641 davidyangfei dominic0312 zhaoqishan 2733284198 lisir nearsmile kevinluuu sdgdsffdsfff

megalo's Issues

可以将自定义方法挂载在app实例下面吗

在app的配置中挂载了自定义方法，页面中getApp后，没有该自定义方法。改用vue的mixins吗

[BUG] v-if 和 slot，scoped-slot 一起使用时，fallback slot 不生效

code:

测试用例

export default {
      data: {
        ok: false
      },
      template: `
        <test>
          <template v-if="ok" slot-scope="foo">
            <p>{{ foo.text }}</p>
          </template>
        </test>
      `,
      components: {
        test: {
          data () {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot :text="msg">
                <span>{{ msg }} fallback</span>
              </slot>
            </div>
          `
        }
      }
}

现象：

test 组件内部的 fallback slot 不生效。

支持微信小程序的第三方组件吗？

支持微信小程序的第三方原生组件吗》？如vant-app等。
如果支持，可以同步在支付宝小程序和百度小程序中使用吗？

新建项目，报Module not found: Error: Can't resolve 'octoParse'

仅新建项目，运行npm run dev:wechat

就会有

ERROR in ./node_modules/@megalo/vhtml-plugin/index.js
Module not found: Error: Can't resolve 'octoParse' in '/home/lujian/wechatproj/genchain.wechat.todo/node_modules/@megalo/vhtml-plugin'
@ ./node_modules/@megalo/vhtml-plugin/index.js 3:16-36
@ ./src/app.js

错误提示。

百度小程序在编译时报错

-百度小程序编译后报错，应该时async/await的问题，但是我已经引入run-time支持。微信、支付宝平台下无报错。

版本信息如下
"@megalo/target": "^0.3.0",
"@megalo/template-compiler": "^0.2.2",
"megalo": "^0.4.0",

Mpvue 迁移指北

获取小程序相关数据

this.$root.$mp.query; 改成 this.$mp.options; 写法

Typescript工程入口需要增加下面配置

import { Component } from 'vue-property-decorator';

declare module "megalo/types/vue" {
    interface Vue {
        $mp: any
    }
}

//
Component.registerHooks([
    'onShow',
    'onHide',
    'onShareAppMessage',
    'onReachBottom',
    'onPullDownRefresh'
])

复杂模块可以拆得细一点了

有官方使用文档吗？

请问megalo中如何使用插件，例如图表插件 f2-canvas

需要使用一些第三方的组件库，例如，f2-canvas
按照其文档使用没有效果，请问是否需要其他特别的配置？

请问是个人还是团队进行维护?

v-if 不能解析条件

问题描述：

多次使用 v-if 时，只有第一次能够正常解析，第二次开始无论条件是否为 true 时，都默认为 false.

软件版本：

{
    "megalo": "^0.3.0",
    "@megalo/target": "^0.2.2",
    "@megalo/template-compiler": "^0.3.0"    
}

问题复现代码：

<template>
  <div>
     // 第一次正常显示
    <div v-if="test1"> {{ test1 }} </div>

    // 第二次开始不能正常显示
    <div v-if="test2 !== ''"> {{ test2 }} </div>
    <div v-else-if="test2 !== ''"> {{ test2 }} </div>
    <div v-else-if="true"> {{ test2 }} </div>
    <div v-else>没有正确显示</div> 
  </div>
</template>

<script>
  export default {
    mpType: 'page',
    data (){
      return {
        test1: '第一次会显示',
        test2: '第二次开始不显示'
      }
    }
  }
</script>

支付宝小程序内的 web-view 属性无法动态更新

原生支付宝小程序在使用 web-view 组件时，src 属性只能在，页面初次渲染完成前进行更新。即必须在 onReady 触发以前。

<web-view src="{{url}}" onMessage="onmessage"></web-view>

Page({
  data: {
    url: 'xxx' // 有效
  },
  onLoad() {
    this.setData({ url: 'aaa' }) // 有效
  },
  onReady() {
    this.setData({ url: 'bbb' }) // 无效
  }
})

目前，megalo 的 $mount 的触发时机是在 onReady 触发时，此时才会首次将 vnode 上的数据同步到小程序视图层，使得 web-view 的 src 无法修改。

支付宝小程序 wev-view 属性后期是否有可能支持动态绑定（微信小程序是 ok 的，如果官方支持 megalo 就不修改了）
将数据更新的时机提前到 onLoad 阶段。本身不需要操作 DOM 节点，只是同步数据，所以实现上将 $mount 提前到 onLoad 阶段执行是没什么问题的，但这样的修改会改变生命周期钩子的顺序（onLoad -> created -> mounted -> onReady）。有待验证其影响。

能用vue-cli3创建项目么？

希望能有官方文档

[email protected] 遍历组件，组件里的点击事件失效

代码复现

/megalo-demo/src/packageA/pages/a/components/ComA.vue

<template>
  <div @tap="handleTap">点击我{{ index }}</div>
</template>

<script>
export default {
  props: {
    index: Number
  },
  methods: {
    handleTap() {
      console.log("点击了：", this.index);
    }
  }
};
</script>

<style>
</style>

/megalo-demo/src/packageA/pages/a/index.vue

<template>
  <div class="app">
    <div>v-for 组件，组件里的点击事件失效</div>
    <com-a v-for="n in 9" :key="n" :index="n"/>
    <div v-for="n in 9" :key="n" @tap="handleTap(n)">点击我---{{ n }}</div>
  </div>
</template>

<script>
import ComA from "./components/ComA";
export default {
  components: {
    ComA
  },
  methods: {
    handleTap(i) {
      console.log('点击了---' + i)
    }
  }
};
</script>

<style lang="less" scoped>
</style>

问题现象

组件ComA里的点击事件失效了

版本

操作系统

mac 10.14.1

hooks test

test

什么时候支持百度智能小程序

请问,有计划支持百度智能小程序吗? 什么时候支持

[BUG] 嵌套组件构建后路径丢失，提示找不到文件

什么时候有模板啊.

项目自带的demo 在真机预览打开白屏

项目下载下来后，自带的demo，在支付宝开发工具里打开是正常的，但是用真机预览是白屏，

首页执行了详情页的代码，导致没有 $mp

进入小程序的时候首页没去点击去详情页，反而执行了详情页的代码，

执行顺序为： app.vue created ==> detail.vue created ==> index.vue created

首页的created反而更晚执行

dataset 自动转换 camelCase

百度小程序

<button :data-index="index">

更新是更新路径是 $root.0.h['data-index']，会有问题。需要转换成 dataIndex

代码组织与可读性问题

提个小建议，感觉源码阅读起来还是很吃力的，大部分都是 Vue 的源码，不知道 megalo 的代码具体分布在哪里，开源的目的应该就是要让大家发现问题找到问题，这样好像不太好提 pr😂

如何手动切换页面呢?

建议 | 给出相应的开发工具【项目设置】标准

如图，这里的配置是否有一个标准，如果我开启或关闭某些设置，是否对项目的运行会造成影响？

例如：我的项目中使用了 vant-weapp 的组件，需要开启 es6 转 es5 才能正常使用 vant-weapp 。

建议与疑问

建议

修改.github目录下的 issue 模版等，现在还是 vue 的。

疑问

请问除了支持支付宝小程序外与 mpvue 有什么明显却别/设计思路差异吗？

可以帮忙写文档

props 的default 不能使用函数

写成 default: true 正常

v-for嵌套报错

<div class="cell-group"
     v-for="(cellGroup,index) in cells"
     :style="{marginBottom:groupGap+'rpx'}">
  <div v-for="(cell,cellIndex) in cellGroup">>
    <text>test</text>
  </div>
</div>

百度小程序报错

父组件不传有定义name的 slot 的内容时报错

是否支持小程序分包？

请问是否支持小程序分包？

是否支持小程序插件的开发？

你好，请问是否支持小程序插件的开发？

vuex 的 Vue 实例被当做了 page 的 Vue 实例，导致 vuex 无法挂载

在 App 层面使用Vue.prototype.$store = store挂载 Vuex 时，出现了以下问题：

貌似把 vuex 的 Vue 实例被当成页面的实例处理了。

建议新增对async/await的支持

为避免过多的回调地狱，建议新增对async/await语法的支持，我的做法如下：

引入transform-runtime包

npm i babel-plugin-transform-runtime

修改babel配置文件

{
  "plugins": ["transform-runtime"],
  "presets": [ "env", "stage-0" ]
}

修改webpack配置文件(createBaseConfig.js)

     {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                babelrc: true
              }
            }
          ]
    },

不知官方后期是否考虑列为新特性？

下载官网的cli，没有wap版本的打包配置，有计划加进来吗？

或者说有教程吗，咋整合？

有官方使用文档吗？

官方使用文档有吗

是不是纯vue开发用的如果是vue中用了一大堆插件是不是就不支持了

[BUG] v-if 嵌套时执行逻辑错误

代码：

<template>
  <div>
    <div v-if="obj">
      <div v-if="obj.a"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: null
    }
  }
}
</script>

现象：

报错 Cannot read property 'a' of undefined;

原因：

第一个调整判断为 false 时，后面的条件判断不应该执行，但是在 render 方法里没有对 v-if 嵌套关系进行判断。

支持头条小程序

https://developer.toutiao.com/homepage

components不支持短横线

在components中用驼峰模式声明组件

    components: {
      mediaHead
    },

在template中用短横线方式使用

       <media-head
                :data="categoryData"
                v-model="curCategoryIndex"
                :searchText="searchText"
        >
        </media-head>

在编辑器中无法被解释出来

只有驼峰模式使用才能被解释

        <mediaHead
                :data="categoryData"
                v-model="curCategoryIndex"
                :searchText="searchText"
        >
        </mediaHead>

//  index.js里
加入Vue.prototype.$app = 'test'

// page 里使用
created () {
  console.log(this.$app) // 结果为undefined
 }

test hook

test

megalo-cli创建的项目在有多页面时编译错误

问题

使用megalo/cli创建项目后直接编译成功，增加一个page后编译报如下错误：

项目代码地址：https://github.com/zhdwwf/megalo-demo

版本：

win10
node 10.13.0
@megalo/target 0.3.1
@megalo/template-compiler 0.4.0

微信小程序Picker组件range参数无法响应其绑定对象的变化

微信小程序 Picker组件，动态绑定的range对象无法响应对象的变化，点击addcity按钮，picker里的选项没有增加。

测试组件代码

<template>
  <div>
    <picker
      class="_picker"
      mode="multiSelector"
      range-key="name"
      :value="mindex"
      :range="range"
    >testing</picker>

    <div @click="addCity">add City</div>
  </div>
</template>

<style>
._picker {
  padding: 13px;
  background-color: #ffffff;

  height: 100rpx;
  width: 200rpx;
  border: 1rpx solid red;
}
</style>

<script>
export default {
  methods: {
    addCity() {
      this.range[0].push({ id: 9, name: "云南" });
    }
  },
  data() {
    return {
      range: [
        [{ id: 0, name: "北京" }, { id: 1, name: "上海" }],
        [{ id: 2, name: "海淀区" }, { id: 3, name: "玄武区" }]
      ],
      mindex: [0, 0]
    };
  }
};
</script>

从mpvue 迁移的项目时遇到的主要问题

迁移后的主要问题

px 无法自动转为rpx 需要手动替换
在mpvue 中布局好的样式，迁移后大部分出现异常，布局错乱
3.页面部分插值没有渲染

优点：
解决了mpvue 共用同一个page导致的问题，和数据diff 问题

建议增加 ‘端能力 API’ 的自动处理

3端小程序各自有各自的 Api 写法，如拍照、扫描二维码等等，建议提供统一处理方式
否则均需要手动判断 platform，会形成大量无用代码且繁琐。

可参考 Taro 的处理方式
https://nervjs.github.io/taro/docs/native-api.html

其中路由跳转部分我已经单独抽出了一个插件，megalo-router-patch，mpvue 也有类似插件，便于迁移，希望可以加入到本项目的 readme 或 demo 中。

例子中，src下面的htmlparse 目录下的文件有什么作用，删除后，build后的小程序会报错

请问例子中，./src/htmlparse 目录下的文件有什么作用，里面的两个文件都是空文件，删除后build的小程序运行会报错

Error:
in File: ./app.wxss

File not found: ./htmlparse/index.wxss
编译 .wxss 文件错误，错误信息如上，可在控制台查看更详细信息