伸手党系列三：使用mpvue+VantUI+flyio进行小程序开发JavaScriptyw1376394716的博客-

基础介绍

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>