使用mpvue+VantUI+flyio進行小程序開發
基礎介紹
mpvue： （github 地址請參見）是一個使用 Vue.js 開發小程序的前端框架。
Vant Weapp： 是移動端 Vue 組件庫 Vant 的小程序版本，兩者基於相同的視覺規範，提供一致的 API 接口，助力開發者快速搭建小程序應用。
Fly.js： 一個支持所有JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可以讓您在多個端上儘可能大限度的實現代碼複用。
1. 安裝mpvue
創建一個基於mpvue-quickstart模板的新項目全部流程
# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
# 2. 由於衆所周知的原因，可以考慮切換源爲 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安裝 vue-cli
$ npm install --global vue-cli
# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
這裏是模板的具體配置信息（如果你還不太明白這些內容的含義，可以先直接全部按回車）
$ vue init mpvue/mpvue-quickstart mpvuedemo // mpvuedemo 是項目文件名稱,運行後會在目錄下生成一個這樣名稱的文件夾
? Project name (mpvuedemo) // 項目名稱
? Project name mpvuedemo
? wxmp appid (touristappid) wx*********** // 項目的appid
? wxmp appid wx**********
? Project description (A Mpvue project) // 項目說明
? Project description A Mpvue project
? Author () XXXXXX // 項目作者
? Author XXXXXX
? Vue build (Use arrow keys)
? Vue build runtime
? Use Vuex? (Y/n) y // 是否使用Vuex
? Use Vuex? Yes
? Use ESLint to lint your code? (Y/n) n // 是否使用ESLint
? Use ESLint to lint your code? No
? 小程序測試，敬請關注最新微信開發者工具的“測試報告”功能
? 小程序測試，敬請關注最新微信開發者工具的“測試報告”功能
2. 安裝Vant Weapp組件庫
① 克隆倉庫
在本地新建一個文件夾執行 命令
git clone https://github.com/youzan/vant-weapp.git
② 複製dist文件夾到你項目的 /static/vant/ 目錄下。
克隆到本地後，在你的項目的static文件夾下創建一個vant文件夾 ，將 克隆下來的文件中的dist 目錄下的所有文件複製到你項目的 /static/vant/ 目錄下。（下圖就是dist文件夾的內容）
③ 引入組件
在需要使用組件的頁面目錄下的 main.json 文件中，引入對應組件。
如圖在index.vue文件中要使用button，tab，image等組件時只要在index文件夾下的main.json文件中添加如下代碼即可
④ 在頁面使用
只要在 .vue文件中直接用就行
<van-button>按鈕</van-button>
<van-tabs active="{{ active }}" bind:change="onChange">
<van-tab title="標籤 1">內容 1</van-tab>
<van-tab title="標籤 2">內容 2</van-tab>
<van-tab title="標籤 3">內容 3</van-tab>
<van-tab title="標籤 4">內容 4</van-tab>
</van-tabs>
3. 安裝fiyio
這裏是fiyio官網地址
① 使用NPM
npm install flyio
② 使用CDN
<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
**③ 在utils文件夾下添加 flyio.js文件 **
（我們要在該文件內進行數據請求封裝）
import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()
const host = "https://rmall.ukelink.net" // 數據請求url
//添加請求攔截器
fly.interceptors.request.use((request) => {
wx.showLoading({
title: "加載中",
mask:true
});
console.log('request___________________',request);
request.headers = {
"X-Tag": "flyio",
// 'content-type': 'application/json'
'content-type': 'application/x-www-form-urlencoded'
};
let authParams = {
//公共參數
// "categoryType": "SaleGoodsType@sim",
// "streamNo": "wx18542dc630fea2a4",
// "reqSource": "MALL_H5",
// "appid": "wx18542dc630fea2a4",
// "timestamp": new Date().getTime(),
// "sign": "string"
};
request.body && Object.keys(request.body).forEach((val) => {
if(request.body[val] === ""){
delete request.body[val]
};
});
request.body = {
...request.body,
...authParams
}
return request;
});
//添加響應攔截器
fly.interceptors.response.use(
(response) => {
wx.hideLoading();
return response.data;//請求成功之後將返回值返回
},
(err) => {
//請求出錯，根據返回狀態碼判斷出錯原因
console.log(err);
wx.hideLoading();
if(err){
return "請求失敗";
};
}
);
fly.config.baseURL = host;
export default fly;
④ 引入
在main.js文件中引入
import Vue from 'vue'
import App from './App'
// 添加下面兩行代碼即可
import fly from './utils/flyio.js'
Vue.prototype.$fly = fly;
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
⑤ 在頁面內使用方法
export default {
onShow() {
console.log('onShow,onShow,onShow_________')
this.$fly.request({
method:"post", //post/get 請求方式
url:"/mms/country/queryValidZoneListForMallHome",
body:{
// name:'qianbuduo'， // 傳遞的參數
}
}).then(res =>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
}
這就大功告成，然後我們可以愉快地去開發我們的項目了~~
最後是個人在mpvue開發中碰到的一點小問題給大家提個醒
① 當我們用npm下載一些插件後在運行項目時如果報錯可以把node包刪掉重新npm install 一下就好了
② 在使用 Vant 的 Notify （消息提示）時，要引用兩次。頁面內還要再引一次.並且在 並在頁面內添加van-notify標籤 。 否則會報錯（未找到 van-notify 節點，請確認 selector 及 context 是否正確）
<template>
<div class="homePage">
<van-notify id="van-notify"></van-notify>
</div>
</template>
<script>
import Notify from '@/../static/vant/notify/notify.js'
......
</script>