微信小程序: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java课程设计【学生信息管理系统】[通俗易懂]

    Java课程设计【学生信息管理系统】[通俗易懂]课程设计目录一、问题描述二、基本要求三、需求分析四、概要设计1、类之间的调用关系2、学生信息模块3、管理系统模块4、详细设计①主程序LoginGUI的代码②程序View的代码③程序Student的代码④程序ConnectSQLServer的代码五、调试分析六、用户使用说明1、登录2、添加3、查询4、修改5、删除6、退出七、测试结果八、课程设计总结九、参考文献一、问题描述如何实现一个功能简单的学生信息管理系统,能够对学生信息(包括照片)进行添加、删除、修改和查询等操作。二、基本要求实现一个功能简单的学

    2022年10月17日
    0
  • Diablo II中的各种hacks

    Diablo II中的各种hacksGamehacks,也就是通常所说的游戏软件。在网络游戏时代,也许是因为针对传奇这类游戏的软件大都利用WPE之类的抓包工具来制作,因此hacks又叫外挂。不过Diablo的hacks绝大多数是和游戏代码紧密结合在一起的,也许应该叫内挂才对。DiabloIILOD(以下简称D2X)中的hacks大概可分为exploit、bot和mod三大类。exploit即漏洞,就是利用游戏设计上的缺陷或者B…

    2022年6月2日
    52
  • 因工作站与主要域间的信任关系失败而导致请求失败_此工作站和域控不信任

    因工作站与主要域间的信任关系失败而导致请求失败_此工作站和域控不信任在服务器的日志上,这个错误应该大家都不陌生了,错误的特征,我给大致描述一下:在域中总是会有计算机由于某种原因,导致计算机账户的密码无法和lsasecret同步系统会在计算机登陆到域的时候,提示已经丢失域的信任关系。日志大致如下:EventID:5SourceNETLOGONType  ErrorDescription  Thesessionsetupfromth…

    2022年10月18日
    0
  • 最新版本交易猫钓鱼源码完整版

    最新版本交易猫钓鱼源码完整版源码介绍:数据库:config/Conn.php然后导入数据库就行后台admin密码123456网盘下载地址:https://zijiewangpan.com/2bxUP1wqpmQ图片:

    2022年8月24日
    3
  • 基于 CAS 无锁实现的 Disruptor.NET 居然慢于 BlockingCollection,是真的吗?

    基于 CAS 无锁实现的 Disruptor.NET 居然慢于 BlockingCollection,是真的吗?

    2021年11月24日
    39
  • linux修改程序文件内容,linux 批量修改文件内容

    linux修改程序文件内容,linux 批量修改文件内容如果有批量修改文件内容的需求,可参考下面这些方法1.批量查找某个目下文件的包含的内容,例如:#grep-rn或l”要找查找的文本”路径或文件rn表示匹配查找字符串的内容显示出来和行号rl表示匹配查找字符串的文件名全部显示出来比如grep-rn”aaa”/usr/local/表示/use/local目录下所有匹配”aaa”的字符串和行号grep-rl”aaa”…

    2022年7月26日
    5

发表回复

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

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