使用vue框架快速开发百度小程序教程

在Megalo@0.2.0 正式发布，优化了数据更新性能的同时，支持了百度智能小程序，着实激动了一把，这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。

跟着文档走

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

安装

$ npm install -g @megalo/cli 

构建

$ megalo megalo-yanxuan-demo 

打包

以微信小程序为入口

$ npmrundev:wechat

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

转移 weex 项目

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

网络请求

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

因为小程序都有提供网络请求的 API，所以此处对此进行改造，如下

类似的还有 toast、message 等组件的改造。

组件

由于 weex 中的有些组件在小程序组件内是不存在的，所以有三种解决方案

自定义一个同名 vue 组件

找小程序可用的组件替换

实在不行就砍掉需求吧

比如 weex 的组件，可以用小程序替换，好在微信、支付宝和百度小程序都有支持。

css

Weex 容器默认的宽度 (viewport) 是 750px，小程序以 750rpx 为基。所以直接将需要的 px 转换成 rpx。

另外自己实现了 1 像素的 wpx，替换成 px 即可。

执行三端效果

最后看下改造效果。同时执行三端

只要现有工程没有做以下几件事，理论上，都是可以转移的，只需要稍微更新一下格式，使用 megalo 暂不支持的 vue 特性，涉及浏览器特有的 dom 操作，window、userAgent、location、getElementById 等，使用第三方组件库且该组件库使用了 dom 操作，使用了 vue-router，暂不支持，全局使用 vuex。

微信小程序专题推荐： 吐槽小程序   求职小程序