上周，Megalo@0.2.0 正式發布，優(you)化了(le)數據更(geng)新(xin)性(xing)能(neng)的(de)同時，支持(chi)了(le)百度智(zhi)能(neng)小程序(xu)(xu)，著實激動了(le)一把，這(zhe)“可能(neng)”是目前社區里第一個同時支持(chi)三端小程序(xu)(xu)的(de) vue 小程序(xu)(xu)框(kuang)架(jia)。下(xia)面我們就來試試他的(de)效(xiao)果。

跟著文檔走

官方文(wen)檔(dang)的(de)第一部分(fen)就是快速(su)入門，順(shun)藤摸瓜，構建一個 megalo 項目。

安裝

$ npm install -g @megalo/cli
復制代碼

 

構建

$ megalo megalo-yanxuan-demo
復制代碼

 

打包

以微信小程序為入口

$ npm run dev:wechat
復制代碼

至(zhi)此(ci)一個(ge)完整(zheng)的(de) megalo 項目就(jiu)構建好了，接下來我們開(kai)始轉移源碼

轉移 weex 項目

我(wo)從(cong)以前(qian) weex 的 demo 項目， yanxuan-weex-demo ，為基礎進(jin)行轉移，轉移過程中涉及到很多(duo) weex 特有的 api 的移除和轉換(huan)。

網絡請求

以(yi)網(wang)絡請求為例，weex 是使用(yong)的 stream

let stream = weex.requireModule('stream');
export default {
    methods: {
        GET (api, callback) {
            return stream.fetch({
                method: 'GET',
                type: 'json',
                url: api
            }, callback)
        }
    }
}
復制代碼

因為小程序都有提供網(wang)絡請求的 API，所以此處(chu)對此進(jin)行改造，如下

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
            })
        }
    }
}
復制代碼

類似(si)的(de)(de)還有 toast、message 等(deng)組件的(de)(de)改造。

組件

由于(yu) weex 中的 <recycle-list> 、 <loading> 、 <refresh> 、 <scroller>&nbsp;等組(zu)件在(zai)小(xiao)程序組(zu)件內是不存在(zai)的，所(suo)以有三(san)種解決方案

1. 自定義一個同名 vue 組件
2. 找小程序可用的組件替換
3. 實在不行就砍掉需求吧

比如 weex 的 &lt;slider> 組(zu)件，可(ke)以(yi)用(yong)小程(cheng)序的 <swiper> 替換(huan)，好在微(wei)信、支(zhi)付寶和百度小程(cheng)序都有(you)支(zhi)持。

css

Weex 容(rong)器默認的寬度 (viewport) 是(shi) 750px，小程序以(yi)(yi) 750rpx 為(wei)基。所以(yi)(yi)直(zhi)接將需要(yao)的 px 轉換成 rpx。

另外自己(ji)實現了 1 像(xiang)素的 wpx，替(ti)換成 px 即可。

執行三端效果

最后看下改造(zao)效果(guo)。同時執行三端

效果比預想(xiang)的要好，沒有(you)過多的適配出錯

demo 源(yuan)碼 拋給大家(jia)供大家(jia)把玩(wan)。

哪些可以轉

只(zhi)要現有(you)工(gong)程沒有(you)做以下幾件(jian)事，理論上，都是可以轉(zhuan)移的，只(zhi)需要稍(shao)微更新一下格式(shi)

• 使用 megalo 暫不支持的 vue 特性
• 涉及瀏覽器特有的 dom 操作，window、userAgent、location、getElementById 等
• 使用第三方組件庫且該組件庫使用了 dom 操作
• 使用了 vue-router，暫不支持
• 全局使用 vuex

不過(guo)，方案(an)都是(shi)可以調整的，以上功能在(zai)社(she)區均可以找到(dao)替代方案(an)。

換之即可。