vue插件开发-前端 Vue.js 快速开发微信小程序

vue微信公众号开发教程_vue插件开发_vue组件化开发

Megalo是基于 Vue（Vue@2.5.16）的小程序开发框架vue插件开发，让开发者可以用 Vue 的开发方式开发小程序应用。

Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案，只需要少量改动即可完成 H5 和小程序之间的代码迁移。

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

DEMO：

相比于其他小程序开发模式，由于支持更多特性，megalo 更贴近 Vue 原生的开发模式。

vue组件化开发_vue插件开发_vue微信公众号开发教程

项目地址：

码云极速下载地址：

下面我们就来试试他的效果。

跟着文档走

官方文档的第一部分就是快速入门，顺藤摸瓜，构建一个 megalo 项目。

安装

$ npm install -g @megalo/cli

vue插件开发_vue组件化开发_vue微信公众号开发教程

构建

$ megalo megalo-yanxuan-demo

打包

以微信小程序为入口

$ npm run dev:wechat

至此一个完整的 megalo 项目就构建好了，接下来我们开始转移源码

转移 weex 项目

我从以前 weex 的 demo 项目，yanxuan-weex-demo，为基础进行转移，转移过程中涉及到很多 weex 特有的 api 的移除和转换。

网络请求

以网络请求为例，weex 是使用的 stream

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
            })
        }
    }
}