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

1、官方文档的第一部分就是快速入门，构建一个 megalo 项目。

安装

$ npm install -g @megalo/cli 

2、构建

$ megalo megalo-yanxuan-demo 

3、打包

以微信小程序为入口

$ npmrundev:wechat

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

4、转移 weex 项目

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

5、网络请求

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

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

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

自定义一个同名 vue 组件

找小程序可用的组件替换

实在不行就砍掉需求吧

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

css

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

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

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