伸手党系列三：使用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组件库

这里是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>