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


相关推荐

  • 海思Hi3798MV310芯片处理器参数介绍「建议收藏」

    海思Hi3798MV310芯片处理器参数介绍「建议收藏」Hi3798MV310是用于IPTV/OTT机顶盒市场的支持4KP60解码的超高清高性能SOC芯片。集成4核64位高性能CortexA53处理器和多核高性能2D/3D加速引擎;支持H.265/AVS24Kx2K@P6010bit超高清视频解码,高性能的H.265高清视频编码,HDR视频解码及显示,HDR转SDR,BT.2020,Dolby和DTS音频处理;内置USB2.0…

    2022年6月28日
    195
  • 网站性能常用指标与优化方法有哪些_常见的web性能优化方法

    网站性能常用指标与优化方法有哪些_常见的web性能优化方法一、怎么看网站性能好不好?在做网站性能测试之前,我们先要了解网站性能影响因素,究竟是什么拖延了网站访问速度?通常来说主要有以下几种:1、网络带宽;简单来说,就是网速好不好,网站接入网络提供的带宽。如果用户数量大,那么造成网站拥挤,就很容易出现打不开的情况。2、服务器性能;服务器的性能,比如CPU、内存等。3、网站设计;还有个因素就是网页文件的大小,比如说图片太大,那么加载速度肯定就会变慢。4、DNS解析时间;二、网站性能测试指标主要有哪些?在日常的测试工作中,评估网站性能好不好的

    2022年9月18日
    2
  • 网孔型高级维修电工实训装置

    网孔型高级维修电工实训装置ZN-88CCV网孔型高级维修电工实训装置一、概述ZN-88CCV网孔型高级维修电工实训装置主要由实训桌、网孔板、实训元器件(也可自购)组成。学生根据实训线路进行元器件的合理布局,安装、接线全部由学生自行完成,接近工业现场,能完成电工基础电路,电机控制线路,照明配电的模拟操作,PLC可编程综合应用线路,电子技术应用电路的综合实训,通过一系列项目实训培养学生动手能力和实操技能。实训项目可自行确定,根据所选的项目选择相应的元器件。该装置也可作为电工考工的考核设备。二、特点1、实训采用网孔板与挂箱相结合

    2022年6月6日
    33
  • maven pom.xml具体解释(整理)「建议收藏」

    maven pom.xml具体解释(整理)

    2022年1月31日
    47
  • 【知识普及】平板的屏幕分辨率和屏幕比例_和平精英平板分辨率

    【知识普及】平板的屏幕分辨率和屏幕比例_和平精英平板分辨率针对IOS,Android手机分辨率大小、屏幕尺寸、开发尺寸的参考。在实际页面的开发过程,往往显示屏幕的宽度换算为像素尺寸的1/2。IOS:6.5英寸——1242x2688px——XsMax6.1英寸——828x1792px——XR5.8英寸——1125x2436px——X/Xs5.5英寸——1242x2208px——6+…

    2022年8月13日
    4
  • TLSF算法分析

    TLSF算法分析注:本文的大部分内容摘录自论文《TLSF:aNewDynamicMemoryAllocatorforReal-TimeSystems》,可以通过“科学上网”访问如下链接阅读原文:http://www.gii.upv.es/tlsf/files/ecrts04_tlsf.pdf。什么是TLSFTLSF是TwoLevelSegregatedFitmemoryal

    2022年6月30日
    29

发表回复

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

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