vue 项目快速输出微信、支付宝、百度小程序

上周，Megalo@0.2.0 正式发布，优化了数据更新性能的同时，支持了百度智能小程序，着实激动了一把，这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。下面我们就来试试他的效果。跟着文档走官方文档的第一部分就是快速入门，顺藤摸瓜，构建一个 megalo 项目。安装$ npm install -g @megalo/cli<img src=“https://user-images.githubuse…; width=500/>构建$ megalo megalo-yanxuan-demo<img src=“https://user-images.githubuse…; width=500/>打包以微信小程序为入口$ npm run dev:wechat至此一个完整的 megalo 项目就构建好了，接下来我们开始转移源码转移 weex 项目我从以前 weex 的 demo 项目，yanxuan-weex-demo，为基础进行转移，转移过程中涉及到很多 weex 特有的 api 的移除和转换。网络请求以网络请求为例，weex 是使用的 streamlet 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 }) } }}类似的还有 toast、message 等组件的改造。组件由于 weex 中的 <recycle-list>、<loading>、<refresh>、<scroller>等组件在小程序组件内是不存在的，所以有三种解决方案自定义一个同名 vue 组件找小程序可用的组件替换实在不行就砍掉需求吧比如 weex 的 <slider> 组件，可以用小程序的 <swiper> 替换，好在微信、支付宝和百度小程序都有支持。cssWeex 容器默认的宽度 (viewport) 是 750px，小程序以 750rpx 为基。所以直接将需要的 px 转换成 rpx。另外自己实现了 1 像素的 wpx，替换成 px 即可。执行三端效果最后看下改造效果。同时执行三端效果比预想的要好，没有过多的适配出错demo 源码抛给大家供大家把玩。哪些可以转只要现有工程没有做以下几件事，理论上，都是可以转移的，只需要稍微更新一下格式使用 megalo 暂不支持的 vue 特性涉及浏览器特有的 dom 操作，window、userAgent、location、getElementById 等使用第三方组件库且该组件库使用了 dom 操作使用了 vue-router，暂不支持全局使用 vuex不过，方案都是可以调整的，以上功能在社区均可以找到替代方案。换之即可。参考《Megalo 官方文档》《megalo – 网易考拉小程序解决方案》《Megalo github》首发：zwwill/blog#29作者：木羽转载请标明出处