vue 專案快速輸出微信、支付寶、百度小程式

zwwill_木羽發表於2018-11-13
Vue

上週，Megalo@0.2.0 正式釋出，優化了資料更新效能的同時，支援了百度智慧小程式，著實激動了一把，這“可能”是目前社群裡第一個同時支援三端小程式的 vue 小程式框架。下面我們就來試試他的效果。

跟著文件走

官方文件的第一部分就是快速入門，順藤摸瓜，構建一個 megalo 專案。

安裝

$ npm install -g @megalo/cli
複製程式碼
vue 專案快速輸出微信、支付寶、百度小程式

構建

$ megalo megalo-yanxuan-demo
複製程式碼
vue 專案快速輸出微信、支付寶、百度小程式

打包

以微信小程式為入口

$ 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>等元件在小程式元件內是不存在的，所以有三種解決方案

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

比如 weex 的 <slider> 元件，可以用小程式的 <swiper> 替換，好在微信、支付寶和百度小程式都有支援。

css

Weex 容器預設的寬度 (viewport) 是 750px，小程式以 750rpx 為基。所以直接將需要的 px 轉換成 rpx。

另外自己實現了 1 畫素的 wpx，替換成 px 即可。

執行三端效果

最後看下改造效果。同時執行三端

vue 專案快速輸出微信、支付寶、百度小程式

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

demo 原始碼拋給大家供大家把玩。

哪些可以轉

只要現有工程沒有做以下幾件事，理論上，都是可以轉移的，只需要稍微更新一下格式

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

不過，方案都是可以調整的，以上功能在社群均可以找到替代方案。

換之即可。

參考

《Megalo 官方文件》 《megalo -- 網易考拉小程式解決方案》 《Megalo github》

首發：zwwill/blog#29

作者：木羽

轉載請標明出處

相關文章