微信小程序: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


相关推荐

  • 未分配的磁盘怎么还原回去_硬盘突然未初始化

    未分配的磁盘怎么还原回去_硬盘突然未初始化大家是否遇到过此类问题,当将外部硬盘插入计算机并找到提示该驱动器已成功安装但没有出现在“此PC”上的通知?当进入Window的磁盘管理实用程序,发现磁盘是未知的,未初始化的,未分配的,那么如何修复未初始化的磁盘?还有丢失数据之后怎么找回?”第1部分:初始化磁盘意味着什么?初始化存储设备(非常类似于格式化过程)是一种擦除驱动器上的数据并允许其在以前不使用时可以再次使用的方法。要进行初始化,可以通过将…

    2025年11月30日
    6
  • @JSONField 注解详解和应用

    @JSONField 注解详解和应用讲到 JSONField 注解 就不得不提到 Alibaba 开源的 fasejsonfast 是目前 java 语言中最快的 json 库 比自称最快的 jackson 速度要快 第三方独立测试结果看这里 https github com eishay jvm serializers wiki 这里有 jackson 作者 cowtowncoder 等人对 fastjson 的性能评价 https grou

    2026年3月19日
    2
  • JAVA的网络编程基础概念建议收藏

    网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯。网络编程中有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输。在TCP/IP协

    2021年12月20日
    42
  • json字符串里有大括号_统一社会信用代码后面括号

    json字符串里有大括号_统一社会信用代码后面括号Acompoundstatementenclosedinparentheses.来自《gcc官方对此的说明》,源自gcc对c的扩展,如今被clang继承。RETURN_VALUE_RECEIVER={(//DowhateveryouwantRETURN_VALUE;//返回值)};实例使用示例self.backgroundView=({…

    2022年10月18日
    5
  • ubuntu 局域网传输文件

    ubuntu 局域网传输文件scp[可选参数]file_sourcefile_target参数说明:-1:强制scp命令使用协议ssh1 -2:强制scp命令使用协议ssh2 -4:强制scp命令只使用IPv4寻址 -6:强制scp命令只使用IPv6寻址 -B:使用批处理模式(传输过程中不询问传输口令或短语) -C:允许压缩。(将-C标志传递给ssh,从而打开压缩功能) -p:保留原文件的修改时间,访问时间和访问权限。 -q:不显示传输进度条。 -r:递归复制整个目录。 -v:详细方.

    2022年5月24日
    41
  • 浅谈欧拉函数[通俗易懂]

    浅谈欧拉函数[通俗易懂]前言欧拉函数听起来很高大上,但其实非常简单,也是NOIP里的一个基础知识,希望大家看完我的博客能有所理解。什么是欧拉函数欧拉函数是小于x的正整数中与x互质的数的个数,一般用φ(x)表示。特殊的,φ(1)=1。如何计算欧拉函数通式:φ(x)=x∏ni=1(1−1pi)∏i=1n(1−1pi)\prod_{i=1}^n{(1-\frac{1}{p_i})}φ(1)=1其…

    2022年8月22日
    11

发表回复

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

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