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

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

移動端

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

小程序

使用美團點評的開源框架mpvue復(fù)用移動端代碼集成到小程序。

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

Git地址先貼為敬：Github聊天機器人

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

一、如何通過一條命令來構(gòu)建不同平臺項目

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

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

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

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

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

二、http請求的封裝

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

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

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

三、頁面跳轉(zhuǎn)

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

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

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

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

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

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

五、其他

1. 項目里嘗試使用了 day.js 這個剛剛發(fā)布的時間處理庫，輕量級，很不錯。

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

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

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

附效果圖：