微信小程序：mpvue+flyio「建议收藏」

全栈程序员站长

发布于 2022-10-04 21:10:33

55100

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

mpvue项目创建

1、全局安装vue-cli

npm install --global vue-cli

2、创建一个基于 mpvue-quickstart 模板的新项目

 vue init mpvue/mpvue-quickstart my-project
 //这是vue旧版本创建项目方法，如果init报错需要运行vue init,创建项目过程中跟着命令行的引导填写项目配置信息（可以选择全部enter）

3、安装依赖

cd my-project
npm install

4、启动构建

npm run dev
至此，mpvue项目构建完成，下一步可以打开微信开发者工具，将新建的项目引进去就可以看到小程序运行的结果

flyio在mpvue中的使用

1、使用NPM安装flyio

npm install flyio

2、在小程序中引入flyio

var Fly=require("flyio/dist/npm/wx")
var fly=new Fly()
//添加全局配置、拦截器等
Vue.prototype.$http=fly //将fly实例挂在vue原型上

这种方式使用flyio可能会使你的框架不那么整洁，推荐使用 3、flyio集中式配置、请求

3、flyio集中式配置、请求

这种方式不需要在main.js中配置flyio #项目目录结构（这里重点看http这个目录）在安装成功flyio后，新建http目录（目录名字自定义）其中config.js为项目的请求配置，包括拦截器、baseURL等，my-api.js为数据请求接口，所有请求后台的接口都写在这里

（1）config.js代码

首先第一第二句引入flyio
接着添加拦截器，拦截器部分按照个人需求可以参考flyio官方文档
(https://wendux.github.io/dist/#/doc/flyio/readme)拦截器部分
然后请求配置，可以参考官方文档请求配置部分

**这里要注意的是**最后export部分，只有对当前实例export，
别的地方才能通过import ... fron 'config'来引用fly

(2)、my-api.js代码

首先import http from './config'将config.js中的实例引入，注意config依赖在引入的时候
建议写成图片中的代码格式，不然可能会**报依赖包找不到的错误**（This dependency was not found）
下面就是各个请求接口，注意不要忘记export 实例