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


相关推荐

  • route命令linux详解,route命令详解与使用实例

    route命令linux详解,route命令详解与使用实例route命令用于在本地IP路由表中显示和修改条目。使用不带参数的ROUTE可以显示帮助。语法:route[-f][-p][command[destination][masknetmask][gateway][metric][ifinterface]参数说明:-f清除所有不是主路由(子网掩码为255.255.255.255的路由)、环回网络路由(目标为127.0.0.0,子网掩…

    2022年7月18日
    17
  • 海量数据存储技术(cpu制造瓶颈)

    对于海量数据的处理随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题。对于一个大型的互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载。对于系统的稳定性和扩展性造成了极大的问题。通过数据切分来提高网站性能,横向扩展数据层已经成为架构研发人员首选的方式。水平切分数据库:可以降低单台机器的负载,同时最大限度的降低了宕机造成的损失;负载均衡策略:可以降低单台机器的访问负载,降…

    2022年4月14日
    50
  • vue页面刷新_vue强制重置组件

    vue页面刷新_vue强制重置组件vue页面刷新首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法1.wiindow.location.reload([bForceGet])该方法强迫浏览器刷新当前页面bForceGet可选参数,默认为false,从客户端缓存里取当前true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新wiindow.location.replace(URL)

    2022年10月16日
    0
  • ElasticSearch数据库安装与配置[通俗易懂]

    ElasticSearch数据库安装与配置[通俗易懂]1、安装去官网下载安装包:https://www.elastic.co/cn/downloads/elasticsearch解压改压缩包就行,解压后的目录如下2、配置进入bin目录,双击elasticsearch.bat即可启动数据库服务。在浏览器中输入localhost:9200即可查看是否启动成功:显示上面的json串则表示启动成功。下面介绍如何配置可远程连接:需要修改config目录下的elasticsearch.yml文件在elastcisearch.yml文件中加上如下配

    2022年5月3日
    115
  • EmguCV录制视频

    我所录制的为摄像头的视频:使用的函数为VideoWriter。usingSystem;usingSystem.Drawing;usingSystem.Windows.Forms;usingEmgu.CV;usingEmgu.CV.CvEnum;usingEmgu.CV.Structure;namespaceEmguCVHist{publicpartialc

    2022年4月7日
    45
  • activiti工作流引擎入门教程

    activiti工作流引擎入门教程@TOCLDistiggerforever,CGarenotbrothersforever,throwthepotandshineforever.Modestyisnotfalse,solidisnotnaive,treacherousbutnotdeceitful,staywithgoodpeople,andstayawayfrompoorpeople.talkischeap,showothersthecodean

    2022年7月21日
    11

发表回复

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

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