基於mpvue框架搭建微信小程式開發環境

一、按照mpvue官網新建前臺工程

http://mpvue.com/mpvue/quickstart.html（mpvue快速上手教程）

二、路由功能程式碼實現

mpvue對vue-router的支援不好，因此還是採用小程式原生的navigator元件實現路由功能。下面介紹在mpvue中，如何實現路由功能：

1、在第一步中，建立的工程中./src下已包含main.js、app.json兩個個檔案。main.js為工程入口，掛載應用。另外，其中所有路由地址都要新增到app.json檔案中。

2、app.json檔案中涉及到的所有路由頁面，都要放在./src/pages資料夾下。這裡需要注意的是，pages下的每個資料夾中一定要包含*.vue、main.js檔案。這樣，涉及到的頁面都可以載入到應用上。

3、頁面上通過微信小程式元件介面wx.navigateTo實現路由功能。

三、前後臺呼叫

微信小程式中不能支援axios元件，因此選用flyio元件做http請求外掛。因此，在工程入口src/main.js中引入flyio。開發環境一般是通過區域網中ip+埠呼叫後臺介面。模擬環境則只能用https+域名方式訪問。下面分別介紹兩種情況下，搭建環境注意事項：

1、開發環境前後臺呼叫：微信小程式開發工具->詳情->不校驗合法域名...，勾選上。

2、模擬環境前後臺通過域名呼叫：小程式管理平臺->伺服器域名->request合法域名，新增需要訪問的後臺域名。

完成上述設定後，前後臺已可以成功呼叫。