應(yīng)公司需求，著手開發(fā)一個(gè)同時(shí)部署到移動(dòng)端和微信小程序上產(chǎn)品需求相同的聊天機(jī)器人。

于是初步構(gòu)想：

移動(dòng)端

使用Vue.js開發(fā)。

小程序

使用美團(tuán)點(diǎn)評(píng)的開源框架mpvue復(fù)用移動(dòng)端代碼集成到小程序。

一般來說，根據(jù)官方文檔將兩個(gè)端分開來寫，重復(fù)代碼直接復(fù)制粘貼基本上就可以實(shí)現(xiàn)公司的需求。但一天忽然心血來潮，想把兩個(gè)項(xiàng)目合二為一，只在Power Shell里改變一條命令，就能構(gòu)建出適應(yīng)不同平臺(tái)的項(xiàng)目，于是就有了這個(gè)東西。

Git地址先貼為敬：Github聊天機(jī)器人

接下來說一說為了實(shí)現(xiàn)這個(gè)騷想法所遇到的幾個(gè)問題：

一、如何通過一條命令來構(gòu)建不同平臺(tái)項(xiàng)目

解決方法是把這個(gè)任務(wù)交給webpack來完成。webpack作為強(qiáng)大的前端模塊化開發(fā)工具“用過都說好”，沒用過的趕緊去用一下吧。

小程序構(gòu)建的webpack配置可以直接使用mpvue-cli的配置，里面用到了一些美團(tuán)實(shí)現(xiàn)的vue文件轉(zhuǎn)小程序文件的webpack插件，下載安裝就可以了。

移動(dòng)端的webpack配置可以參考vue-cli的配置，熟悉webpack的話可以自己來寫。當(dāng)然也可以使用我的項(xiàng)目里的配置。

構(gòu)建不同項(xiàng)目時(shí)只需要使用npm命令啟用不同的webpack配置文件就行。（手動(dòng)修改項(xiàng)目package.json里的npm script）。

遇到的第一個(gè)問題就這樣愉快地解決了。

二、http請(qǐng)求的封裝

以往Vue項(xiàng)目的http請(qǐng)求都是使用axios插件完成的，而小程序里的http請(qǐng)求必須調(diào)用微信的原生API——wx.request。因此為了同時(shí)支持兩個(gè)平臺(tái)，項(xiàng)目里需要將http請(qǐng)求封裝并且能夠自動(dòng)識(shí)別調(diào)用。

解決方法是使用vue的全局混入(mixins)方式?；烊肴肿兞縯his.service通過判斷是否是瀏覽器環(huán)境（if(window)），而指向不同的http模塊。

有了這種識(shí)別混入方式，基本上就可以通過將小程序的原生API在瀏覽器環(huán)境下重新全部實(shí)現(xiàn)一次而完成全部代碼復(fù)用。

三、頁面跳轉(zhuǎn)

vue項(xiàng)目中使用vue-router跳轉(zhuǎn)頁面已經(jīng)十分成熟了，但是mpvue的文檔中卻寫明由于小程序頁面的注冊(cè)方式奇特而不支持vue-router的使用。

但是有了上面的這種混入方式，還是可以實(shí)現(xiàn)曲線救國，在項(xiàng)目中引入vue-router。

解決方法是全局混入this.router變量，同時(shí)封裝小程序里的wx.navigateTo和web端的location.href方法實(shí)現(xiàn)頁面跳轉(zhuǎn)。

四、頁面間參數(shù)的傳遞

web開發(fā)經(jīng)常會(huì)通過在url上附帶參數(shù)來傳遞，但小程序里是不允許這樣的。解決方法是就去開心(wu nai)地去使用vuex吧，統(tǒng)一狀態(tài)管理聽起來就高大上~

參閱文檔上手vuex應(yīng)該沒什么問題，但vuex略微遺憾的是頁面刷新會(huì)使?fàn)顟B(tài)參數(shù)丟失。為了使項(xiàng)目體驗(yàn)更佳我使用了vuex+localstorege的方式來存儲(chǔ)參數(shù)（微信也原生實(shí)現(xiàn)了緩存數(shù)據(jù)的wx.setStorage）。這種方法兩個(gè)端表現(xiàn)效果都還不錯(cuò)。

五、其他

1. 項(xiàng)目里嘗試使用了 day.js 這個(gè)剛剛發(fā)布的時(shí)間處理庫，輕量級(jí)，很不錯(cuò)。

2. 百度的echarts插件移動(dòng)端的表現(xiàn)很好，但最近發(fā)布的echarts for wx在小程序的表現(xiàn)有點(diǎn)差強(qiáng)人意。

至此，一個(gè)同時(shí)支持移動(dòng)端與小程序的聊天機(jī)器人技術(shù)層面基本實(shí)現(xiàn)，還有其它不足之處有待完善，github還會(huì)繼續(xù)commits~

轉(zhuǎn)載請(qǐng)注明出處。

附效果圖：