就像一個好的歌手可以同時作詞作曲，想使用JavaScript體驗從數(shù)據(jù)庫到瀏覽器前后端同時開發(fā)的快感。
于是一個后端使用node，前端可以同時部署到移動端和微信小程序上的聊天機器人就此誕生。
初步構(gòu)想：
移動端——使用Vue.js開發(fā)；
小程序——使用開源框架mpvue復用移動端代碼；
服務(wù)端——使用koa2開發(fā)node服務(wù)。
項目雖小，五臟俱全。最終希望達到效果，只改變shell中的一行命令就能實現(xiàn)前后端的啟動和不同平臺上的運行。
為了實現(xiàn)這些想法所遇到的問題：
一、通過一條命令構(gòu)建不同平臺項目
這個問題可以交給webpack來完成。
小程序構(gòu)建的webpack配置可以直接使用mpvue-cli的配置，里面會用到了一些vue轉(zhuǎn)小程序與樣式自適應(yīng)的webpack loader 和 postcss 插件，直接安裝就可以了。
移動端的webpack配置可以參考vue-cli的配置，熟悉webpack的話可以自己來寫，也可以直接使用我的項目里的配置。
構(gòu)建不同項目時只需要使用npm命令啟用不同的webpack配置文件就行。（自定義package.json里的npm script）。
二、http請求的封裝
以往Vue項目的http請求都是使用axios插件完成的，而小程序里的http請求必須調(diào)用微信的原生API——wx.request。因此為了同時支持兩個平臺，項目里需要將http請求封裝并且能夠自動識別調(diào)用。
解決方法是使用vue全局混入(mixins)方式?；烊肴肿兞?this.service?通過判斷是否是瀏覽器環(huán)境（if(window)），而指向不同的http模塊。
有了這種混入方式，基本上就可以通過將小程序的原生API在瀏覽器環(huán)境下重寫一次而實現(xiàn)全部代碼復用。
三、頁面跳轉(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)。
（現(xiàn)在貌似有了新輪子——mpvue-router-patch）
四、參數(shù)傳遞
web開發(fā)經(jīng)常會通過在url上附帶參數(shù)來傳遞，但小程序里是不允許這種方式。所以就開心(wu nai)地去使用?vuex?吧，統(tǒng)一狀態(tài)管理聽起來就高大上~
參閱文檔上手vuex應(yīng)該沒什么問題，但vuex略微遺憾的是頁面刷新會使狀態(tài)參數(shù)丟失。為了使項目體驗更佳我使用了?vuex + localstorege?的方式來存儲參數(shù)（微信也原生實現(xiàn)了緩存數(shù)據(jù)的wx.setStorage）。兩個平臺的表現(xiàn)效果都還不錯。
五、后臺開發(fā)
koa是express的升級，在commonjs規(guī)范之外引入了es6的一些新語法，并對請求與響應(yīng)做了優(yōu)化。node的開發(fā)從express到koa的過渡還算比較平緩。將后端的啟動腳本也一同在npm script中配置好，再使用npm run all插件就可以同時啟動前后端了。
五、其他
1. 項目里嘗試使用時間處理庫?day.js?，輕量級，很不錯；
2. 百度的?echarts?插件移動端的表現(xiàn)很好，但?echarts for wx?在小程序的表現(xiàn)有點差強人意；
3. 語義識別接口調(diào)用?OLAMI 開放平臺；
4. 使用 Gulp 壓縮node代碼。
至此，一個使用node服務(wù)且同時支持移動端與小程序的聊天機器人技術(shù)層面已基本實現(xiàn)，JS從云到端的理想觸手可及，但坑非踩過不知深，從開發(fā)到部署的過程中還會遇到各種各樣的坑。希望本文能對大家有所幫助~
Github地址：聊天機器人
最后附效果圖：
轉(zhuǎn)載請注明出處。
