最近由於項目需要，需要做一套同時支持微信小程序和h5頁面 的程序，然後發現了mpvue。附上mpvue的官網：
以下爲官網的解釋：
使用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：
- 徹底的組件化開發能力：提高代碼複用性
- 完整的
Vue.js開發體驗 - 方便的
Vuex數據管理方案：方便構建複雜應用 - 快捷的
webpack構建機制：自定義構建策略、開發階段 hotReload - 支持使用 npm 外部依賴
- 使用
Vue.js命令行工具 vue-cli 快速初始化項目 - H5 代碼轉換編譯成小程序目標代碼的能力
步入正題。
剛開始開發的時候由於不熟悉mpvue開發，所以直接按照官網教程下載了2.X的版本進行開發，然後發現對於H5頁面的兼容好像不太好，所以在網上找了其他的方法，發現了mpvue的1.X版本更適用於我的需求(主要是本人比較笨，不會配置。。。)。附上gitHub下載地址
https://github.com/Aimee1608/mpvuedemo.git
好了。正式開始發起請求。。。
剛開始的思路是判斷是否爲小程序環境，然後用wx.request請求，h5頁面用axios請求，後來找到了fly.js，就可以不用再寫倆套代碼了。
https://www.npmjs.com/package/flyio
但是，在開發的過程中發現如果直接請求，請求接口以後無法得到返回值，全局變量直接賦值會報錯。所以需要響應攔截器，可以通過他在請求發起之前後收到響應數據之後做一些預處理，這樣就可以操作你的數據。
在根目錄src/utils/request.js
var Fly;
if (window) {
//h5頁面引入fly請求ajax
Fly = require("flyio/dist/npm/fly")
} else {
wx引入fly請求
Fly = require("flyio/dist/npm/wx")
}
const request = new Fly();
request.interceptors.request.use(request => {
// wx.showNavigationBarLoading();
return request;
});
request.interceptors.response.use(
(response, promise) => {
// wx.hideNavigationBarLoading();
return promise.resolve(response.data);
},
(err, promise) => {
// wx.hideNavigationBarLoading();
// wx.showToast({
// title: err.message,
// icon: "none"
// });
return promise.resolve();
}
);
export default request;
在所需頁面引入
import request from "../../utils/request.js";
發送請求
var fly = require("flyio");
request
.post(
// post/get 請求方式
url,
params
)
.then(res => {
console.log(res);
});
請求成功~~
PS：如果沒有配置接口，在小程序裏發起請求的時候，會報錯，提示
有兩種解決方法：
1、在小程序====》設置=====》域名信息種配置接口服務器，如下圖
2、還是在設置===》項目設置裏，將不校驗合法域名這一項打勾。就ok了。
有什麼不對的，還希望多多指教，也是在不斷學習中~~