上周戏自，Megalo@0.2.0 正式發(fā)布志衣，優(yōu)化了數(shù)據(jù)更新性能的同時(shí)绿店，支持了百度智能小程序废登，著實(shí)激動(dòng)了一把羽戒，這“可能”是目前社區(qū)里第一個(gè)同時(shí)支持三端小程序的 vue 小程序框架企量。下面我們就來(lái)試試他的效果。
跟著文檔走
官方文檔的第一部分就是快速入門瘾英，順藤摸瓜瓣赂，構(gòu)建一個(gè) megalo 項(xiàng)目煌集。
安裝
$ npm install -g @megalo/cli
<img src="https://user-images.githubusercontent.com/20720117/48394195-8da99780-e74d-11e8-8993-b64be5852d82.png" width=500/>
構(gòu)建
$ megalo megalo-yanxuan-demo
<img src="https://user-images.githubusercontent.com/20720117/48394212-9d28e080-e74d-11e8-90d5-dda7bc9638d1.png" width=500/>
打包
以微信小程序?yàn)槿肟?/p>
$ npm run dev:wechat
至此一個(gè)完整的 megalo 項(xiàng)目就構(gòu)建好了，接下來(lái)我們開始轉(zhuǎn)移源碼
轉(zhuǎn)移 weex 項(xiàng)目
我從以前 weex 的 demo 項(xiàng)目乍赫，yanxuan-weex-demo林束，為基礎(chǔ)進(jìn)行轉(zhuǎn)移避除，轉(zhuǎn)移過(guò)程中涉及到很多 weex 特有的 api 的移除和轉(zhuǎn)換。
網(wǎng)絡(luò)請(qǐng)求
以網(wǎng)絡(luò)請(qǐng)求為例书斜，weex 是使用的 stream
let stream = weex.requireModule('stream');
export default {
methods: {
GET (api, callback) {
return stream.fetch({
method: 'GET',
type: 'json',
url: api
}, callback)
}
}
}
因?yàn)樾〕绦蚨加刑峁┚W(wǎng)絡(luò)請(qǐng)求的 API焙糟，所以此處對(duì)此進(jìn)行改造，如下
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>等組件在小程序組件內(nèi)是不存在的，所以有三種解決方案
- 自定義一個(gè)同名 vue 組件
- 找小程序可用的組件替換
- 實(shí)在不行就砍掉需求吧
比如 weex 的 <slider> 組件本涕，可以用小程序的 <swiper> 替換业汰，好在微信、支付寶和百度小程序都有支持菩颖。
css
Weex 容器默認(rèn)的寬度 (viewport) 是 750px样漆，小程序以 750rpx 為基。所以直接將需要的 px 轉(zhuǎn)換成 rpx位他。
另外自己實(shí)現(xiàn)了 1 像素的 wpx氛濒，替換成 px 即可产场。
執(zhí)行三端效果
最后看下改造效果鹅髓。同時(shí)執(zhí)行三端
效果比預(yù)想的要好，沒(méi)有過(guò)多的適配出錯(cuò)
demo 源碼拋給大家供大家把玩京景。
哪些可以轉(zhuǎn)
只要現(xiàn)有工程沒(méi)有做以下幾件事窿冯，理論上，都是可以轉(zhuǎn)移的确徙，只需要稍微更新一下格式
- 使用 megalo 暫不支持的 vue 特性
- 涉及瀏覽器特有的 dom 操作醒串，window、userAgent鄙皇、location芜赌、getElementById 等
- 使用第三方組件庫(kù)且該組件庫(kù)使用了 dom 操作
- 使用了 vue-router，暫不支持
- 全局使用 vuex
不過(guò)伴逸，方案都是可以調(diào)整的缠沈，以上功能在社區(qū)均可以找到替代方案。
換之即可错蝴。
參考
《Megalo 官方文檔》
《megalo -- 網(wǎng)易考拉小程序解決方案》
《Megalo github》
首發(fā)：zwwill/blog#29
作者：木羽
轉(zhuǎn)載請(qǐng)標(biāo)明出處
