應公司需求，著手開發一個同時部署到移動端和微信小程序上產品需求相同的聊天機器人。

于是初步構想：

移動端

使用Vue.js開發。

小程序

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

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

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

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

一、如何通過一條命令來構建不同平臺項目

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

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

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

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

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

二、http請求的封裝

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

解決方法是使用vue的全局混入(mixins)方式。混入全局變量this.service通過判斷是否是瀏覽器環境（if(window)），而指向不同的http模塊。

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

三、頁面跳轉

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

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

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

四、頁面間參數的傳遞

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

參閱文檔上手vuex應該沒什么問題，但vuex略微遺憾的是頁面刷新會使狀態參數丟失。為了使項目體驗更佳我使用了vuex+localstorege的方式來存儲參數（微信也原生實現了緩存數據的wx.setStorage）。這種方法兩個端表現效果都還不錯。

五、其他

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

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

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

轉載請注明出處。

附效果圖：