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

61次阅读

共计 1535 个字符,预计需要花费 4 分钟才能阅读完成。

上周,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 是使用的 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
})
}
}
}
类似的还有 toast、message 等组件的改造。
组件
由于 weex 中的 <recycle-list>、<loading>、<refresh>、<scroller> 等组件在小程序组件内是不存在的,所以有三种解决方案

自定义一个同名 vue 组件
找小程序可用的组件替换
实在不行就砍掉需求吧

比如 weex 的 <slider> 组件,可以用小程序的 <swiper> 替换,好在微信、支付宝和百度小程序都有支持。
css
Weex 容器默认的宽度 (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 作者:木羽转载请标明出处

正文完
 0