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

微信小程序:mpvue+flyio「建议收藏」微信小程序:mpvue+flyiompvue项目创建1、全局安装vue-clinpminstall–globalvue-cli2、创建一个基于mpvue-quickstart模板的新项目vueinitmpvue/mpvue-quickstartmy-project//这是vue旧版本创建项目方法,如果init报错需要运行vueinit,创建项目过程中跟着命令行…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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为数据请求接口,所有请求后台的接口都写在这里
微信小程序:mpvue+flyio「建议收藏」

(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.net/195998.html原文链接:https://javaforall.net

(0)
上一篇 2025年10月6日 上午11:22
下一篇 2025年10月6日 下午12:01


相关推荐

  • selenium自动化测试报告_selenium自动化测试断言

    selenium自动化测试报告_selenium自动化测试断言自动化测试——selenium(完结篇)文章目录自动化测试——selenium(完结篇)一、元素操作方法二、浏览器操作方法三、获取元素信息操作四、鼠标操作(需要实例化鼠标对象)4.1鼠标右键及双击4.2鼠标拖拽4.3鼠标悬停【重点】五、键盘操作(不需要实例化对象)☆六、元素等待七、下拉框(需要实例化下拉框)八、弹出框九、滚动条十、切换frame表单☆10.1连续切换frame十一、多窗口的切换☆十二、截图操作十三、验证码前言:看这篇帖子,最好要在知道定位八大元素的基础之上才能够比较熟练

    2022年10月1日
    2
  • pycharm库安装方法

    pycharm库安装方法pycharm 库安装方法在线安装本地安装 whl 格式 tar gz 格式一些问题的解决办法证书过期解决反复下载包的问题在线安装 settings gt Project gt Projectinter gt 右侧点加号搜索想要的包进行安装本地安装 1 下载所要的包可能是 whl 格式或者 tar gz 格式 whl 格式将包拷到库中在终端运行 要在库文件夹下 pipinstall whl 包名 包括后缀 或直接 pipinstall whl 文件路径 tar gz 格式将

    2026年3月18日
    2
  • RadControls for Windows 8

    RadControls for Windows 8RadControlsforWindows8http://www.telerik.com/help/wpf/radchartview-populating-with-data-static-data.htmlRadCartesianChartchart=newRadCartesianChart();      chart.HorizontalAxi

    2022年7月19日
    15
  • KRACK 攻击解密安卓传输数据,OpenBSD 提前释出补丁

    KRACK 攻击解密安卓传输数据,OpenBSD 提前释出补丁比利时鲁汶大学的两位研究人员正式披露了被命名为KRACK(KeyReinstallationAttacks)的密钥重安装攻击,他们开发的概念验证攻击演示了对Android设备传输数据的解密能力。如果你的设备支持Wi-Fi,那么很有可能你的设备受到影响。运行Android、Linux、Apple、Windows、OpenBSD、联发科和…

    2022年5月6日
    50
  • java是值传递还是引用传递 知乎_按值调用和按引用调用

    java是值传递还是引用传递 知乎_按值调用和按引用调用最近整理面试题,整理到值传递、引用传递,到网上搜了一圈,争议很大。带着一脸蒙圈,线上线下查了好多资料。最终有所收获,所以分享给大家,希望能对你有所帮助。首先说下我的感受,这个题目出的很好,但是在Java中这个题目是有问题的(在下面我会解释)。并且,有很多结论是Java中只有值传递。我认为这样说不够严谨。当然如果针对Java语言本身来讲,Java中只有值传递,没有…

    2025年8月14日
    5
  • RxJS之组合操作符 ( Angular环境 )

    RxJS之组合操作符 ( Angular环境 )

    2022年4月2日
    71

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号