微信小程序：mpvue+flyio「建议收藏」
微信小程序：mpvue+flyio「建议收藏」
全栈程序员站长
发布于 2022-10-04 13:10:33
发布于 2022-10-04 13:10:33
代码可运行
运行总次数：0
代码可运行
大家好，又见面了，我是你们的朋友全栈君。
mpvue项目创建
1、全局安装vue-cli
npm install --global vue-cli2、创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
//这是vue旧版本创建项目方法，如果init报错需要运行vue init,创建项目过程中跟着命令行的引导填写项目配置信息（可以选择全部enter）3、安装依赖
cd my-project
npm install4、启动构建
npm run dev
至此，mpvue项目构建完成，下一步可以打开微信开发者工具，将新建的项目引进去就可以看到小程序运行的结果flyio在mpvue中的使用
1、使用NPM安装flyio
npm install flyio2、在小程序中引入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 实例
（3）在index中使用flyio
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/195998.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月8日 上，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
微信小程序学习（mpvue框架）
更多 >
腾讯云开发者
