它是基于Vue（Vue@2.5.16）的小程序开发框架，允许开发者使用Vue的开发方式开发小程序应用。

旨在为跨H5和小程序的应用提供高效的解决方案，只需要少量的改动，就可以完成H5和小程序之间的代码迁移。

目前支持微信小程序、支付宝小程序、百度智能小程序。

演示：

相比于其他小程序开发模式，它支持的功能更多，并且更加接近Vue原生的开发模式。

项目地址：

码云快车下载地址：

现在我们来试试看它的效果。

遵循文档

官方文档的第一部分是构建项目的快速入门指南。

安装

$ npm install -g @megalo/cli

构造

$ megalo megalo-yanxuan-demo

盒

以微信小程序为入口

$ npm run dev:wechat

到此，一个完整的项目就搭建好了，接下来我们开始移植源码

转载weex项目

我从之前的 Weex 演示项目 -weex-demo 迁移过来，这涉及到删除和转换许多 Weex 特定的 API。

网络请求

以网络请求为例，weex 使用

let stream = weex.requireModule('stream');
export default {
    methods: {
        GET (api, callback) {
            return stream.fetch({
                method: 'GET',
                type: 'json',
                url: api
            }, callback)
        }
    }
}

因为小程序都提供了网络请求的API，我们这里修改如下

export default {
    methods: {
        GET (api, callback) {
            let { platform } = this.$mp || {},
                request = ()=>{}
            switch(platform) {
                case 'wechat':
                    request = wx && wx.request
                break;
                case 'alipay':
                    request = my && my.httpRequest
                break;
                case 'swan':
                    request = swan && swan.request
                break;
                default:
                break;
            }
            request && request({
                url: api,
                success: callback
            })
        }
    }
}

类似的修改包括和等组件的转换。

成分

由于Weex中的组件如、、、等在小程序组件中并不存在，因此解决方案有三种：

自定义一个同名的vue组件

查找小程序可用的组件替代品

如果不起作用，就减少需求。

比如Weex的组件可以替换成小程序的组件，目前微信、支付宝、百度小程序都支持。

CSS

Weex 容器默认宽度（）为 px，小程序以该宽度为基准宽度，因此只需将需要的 px 换算成 rpx 即可。

另外我实现了1像素wpx，可以用px代替。

执行三端效应

最后我们来看看变换的效果。

效果比想象中好，没有太多适配错误

演示源代码

（）抛给大家，大家玩一下。

哪些可以转让？

只要现有的项目不做以下事情，理论上是可以转移的，只需要稍微更新一下格式

但计划是可以调整的，可以在社区中找到上述功能的替代解决方案。

只需更换它即可。

设置星号，以免迷路

有很多美好的事情你想看

谢谢大家的阅读，如果觉得我的公众号不错的话，请推荐给你的朋友，非常感谢。

前端高手爱好者：每天一篇前端技术文章，不定期发前端干货