vue 項目快速輸出微信、支付寶、百度小程序

時間 2019-11-08

標籤 vue 項目快速輸出微信支付寶百度程序简体版

原文原文鏈接

上週，Megalo@0.2.0 正式發佈，優化了數據更新性能的同時，支持了百度智能小程序，着實激動了一把，這「可能」是目前社區裏第一個同時支持三端小程序的 vue 小程序框架。下面咱們就來試試他的效果。css

跟着文檔走

官方文檔的第一部分就是快速入門，順藤摸瓜，構建一個 megalo 項目。vue

安裝

$ npm install -g @megalo/cli

<img src="https://user-images.githubuse...; width=500/>git

構建

$ megalo megalo-yanxuan-demo

<img src="https://user-images.githubuse...; width=500/>github

打包

以微信小程序爲入口vue-router

$ npm run dev:wechat

至此一個完整的 megalo 項目就構建好了，接下來咱們開始轉移源碼vuex

轉移 weex 項目

我從之前 weex 的 demo 項目，yanxuan-weex-demo，爲基礎進行轉移，轉移過程當中涉及到不少 weex 特有的 api 的移除和轉換。shell

網絡請求

以網絡請求爲例，weex 是使用的 streamnpm

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

由於小程序都有提供網絡請求的 API，因此此處對此進行改造，以下json

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 等組件的改造。小程序