导语: 上周,Megalo@0.2.0 正式发布,优化了数据更新性能的同时,支持了百度智能小程序,着实激动了一把,这“可能”是目前社区...
上周,Megalo@0.2.0 正式发布,优化了数据更新性能的同时,支持了百度智能小程序,着实激动了一把,这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。下面我们就来试试他的效果。 跟着文档走官方文档的第一部分就是快速入门,顺藤摸瓜,构建一个 megalo 项目。 安装$ npm install -g @megalo/cli 复制代码 构建$ 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
})
}
}
}
复制代码
类似的还有 toast、message 等组件的改造。 组件由于 weex 中的
比如 weex 的 cssWeex 容器默认的宽度 (viewport) 是 750px,小程序以 750rpx 为基。所以直接将需要的 px 转换成 rpx。 另外自己实现了 1 像素的 wpx,替换成 px 即可。 执行三端效果最后看下改造效果。同时执行三端 效果比预想的要好,没有过多的适配出错 demo 源码 抛给大家供大家把玩。 哪些可以转只要现有工程没有做以下几件事,理论上,都是可以转移的,只需要稍微更新一下格式
不过,方案都是可以调整的,以上功能在社区均可以找到替代方案。 换之即可。 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。