导语

上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求。

这时读者会有些疑问,小程序已经有了request,为什么还用flyio?这不是造轮子吗?我是这么想的,其实现在不管是mpvue,还是wepy都好像还不能完美编译出微信小程序和h5版本。为了以后应对老板有创建h5版本的想法,我们应该为以后复用小程序代码做好准备工作。既然h5也会有ajax,flyio也支持小程序和h5的,所以干脆把flyio引进来,再做一些封装,两边都能用,岂不美哉?

文章末尾,附文章教程步骤创建的项目mpvue+vant+flyio,需要学习的同学,拿走不谢。

第一步:将flyio加入项目

我的项目路径:/Users/hrz/myworkspace/lawyer-card-wxss

$ cd /Users/hrz/myworkspace/lawyer-card-wxss
$ cnpm i flyio -S --production
 
正确姿势

第二步:二次封装

创建api文件夹,并在下面新建两个文件api.jshttpRequest.js

 
正确姿势

api.js 用来给各页面调用,是一个汇总各类ajax方法的集合

import requestService from './httpRequest'

const PROD_SERVICE = 'https://我的线上产品域名/lawyer-card-service'
const DEV_SERVICE = 'http://localhost:8081/lawyer-card-service' /**
* 根据开发环境返回接口url
* @returns {string}
*/
function getSerive () {
if (process.env.NODE_ENV === 'production') {
return PROD_SERVICE
} else {
return DEV_SERVICE
}
} /** wx.request服务封装 */
export default { /**
* 检查微信Token是否还生效
* @param data
* @param callBack
*/
checkToken (data, callBack, failCallBack) {
requestService.sendRequest().url(getSerive() + '/auth/checkToken').method('GET').data(data).success(res => {
callBack(res)
}).fail(res => {
failCallBack(res)
}).send()
}
}

httpRequest.js是对flyio对二次封装,是ajax的核心

import {getStorageSync, hideLoading, showLoading, showNotify} from '../utils/index'

var Fly = require('flyio/dist/npm/wx')
var fly = new Fly()
// 设置超时
fly.config.timeout = 7000 // 添加请求拦截器
fly.interceptors.request.use((request) => {
// 给所有请求添加自定义header
const token = getStorageSync('token')
request.headers['token'] = token
return request
}) /**
* request服务封装
*/
export default {
sendRequest
} function sendRequest () {
return {
_sucCallback: null,
_failCallback: null,
_method: 'GET',
_data: {},
_header: {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'},
_url: '',
send: function () {
showLoading({
title: '加载中...'
}) fly.request(this._url, this._data, {
method: this._method,
headers: this._header
})
.then(res => {
hideLoading()
let error = httpHandlerError(res, this._failCallback)
if (error) return
this._sucCallback(res)
})
.catch((res) => {
hideLoading()
httpHandlerError(res, this._failCallback)
}) return this
},
success: function (callback) {
this._sucCallback = callback
return this
},
fail: function (callback) {
this._failCallback = callback
return this
},
url: function (url) {
this._url = url
return this
},
data: function (data) {
this._data = data
return this
},
method: function (method) {
this._method = method
return this
},
header: function (header) {
this._header = header
return this
}
}
} /**
* info 请求完成后返回信息
* callBack 回调函数
* errTip 自定义错误信息
*/
function httpHandlerError (info, callBack) {
hideLoading()
/** 请求成功,退出该函数 可以根据项目需求来判断是否请求成功。这里判断的是status为200的时候是成功 */
let haveError = true
let errTip
if (info.status === 200) {
if (info.data.code === undefined) {
haveError = true
} else if (info.data.code === 'success' || info.data.code === 0) {
haveError = false
} else {
haveError = true
errTip = info.data.msg
}
} else {
errTip = '网络请求出现了错误【' + info.status + '】'
haveError = true
} if (haveError) {
/** 发生错误信息时,如果有回调函数,则执行回调 */
if (callBack) {
callBack(info)
} else {
showNotify(errTip)
}
}
return haveError
}

大家看到,httpRequest.js里引用一些工具类,其实里面主要是一些加载的提示,及弹框。为什么我要把他放在工具类里?正如我最开头导语说的,为了方便以后应对h5版本,H5版本的加载、弹框、操作缓存和小程序的代码不一样,所以我统一放在工具类里管理了,以后要做h5开发,我只要改工具类就行了。下面是小程序里工具类的代码。

import Notify from 'vant-weapp/dist/notify/notify'

/**
* 显示顶部红色通知
* 使用方法:调用时确保界面上有:
* <van-notify id="van-notify"/>
* @param msg
* @param showTime
*/
export function showNotify (msg, showTime) {
if (!showTime) {
showTime = 3000
}
Notify({
text: msg,
duration: showTime
})
} /**
* 从缓存里获取数据
* @param key
* @return value
*/
export function getStorageSync (key) {
return wx.getStorageSync(key)
} /**
* 显示加载中
* @param data
*/
export function showLoading (data) {
wx.showLoading(data)
} /**
* 隐藏加载中
*/
export function hideLoading () {
wx.hideLoading()
} /**
* 将数据保存到缓存
* @param key
* @param value
*/
export function setStorageSync (key, value) {
wx.setStorageSync(key, value)
} export default {
getStorageSync,
setStorageSync,
showLoading,
hideLoading,
showNotify
}

第三步:写个Demo发送请求

<template>
<div>
{{msg}}
</div>
</template> <script>
import Api from '../../apis/api' export default {
data () {
return {
msg: null
}
}, methods: {}, onLoad () {
let that = this
let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTU0MjA0NDI0LCJleHAiOjE1NTQ4MDkyMjR9.VdlhGXOxIA97_G_u_a3GJxmWdD9t_jb_a1aodTJ75ESNgxchx8M0mRBSx-s_er8Da4MzZY1zBW4UfY5ELC9fgA'
Api.checkToken({'token': token}, function (res) {
console.log(res)
that.msg = res.data.msg
})
}
}
</script> <style scoped>
</style>
 
正确姿势

运行npm run dev起来,去小程序开发工具看效果

 
正确姿势

已经成功发送请求,还是不错的!

我创建了名字为mpvue-vant-flyio项目,除了项目名称不同,步骤都是相同的。项目源码

转载链接:https://www.jianshu.com/p/b308a89f8180

微信小程序搭建mpvue+vant+flyio的更多相关文章

  1. 微信小程序搭建mpvue+vant

    第一步:查看是否已经装了node.js $ node -v $ npm -v   正确姿势 没有装的话前往Node.js官网安装 第二步:安装cnpm $ npm install -g cnpm -- ...

  2. 使用Vue开发微信小程序:mpvue框架

    使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9

  3. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  4. 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

    昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...

  5. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  6. 微信小程序搭建和开发相关指引

    几点: 1.环境搭建 2.开发和调试 3.发布 原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetai ...

  7. 微信小程序错误——mpvue小程序:未找到 app.json 中的定义的 pages "pages/XXX/XXX" 对应的 WXML 文件

    背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中 ...

  8. 微信小程序(mpvue) wx.openSetting 无法调起设置页面

    在开发过程有个需要保存图片/视频到设备相册的业务,so easy~   巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~   btu.... ...

  9. 【微信小程序】mpvue中页面之间传值(全网唯一真正可行的方法,中指推了一下隐形眼镜)

    摘要: mpvue中页面之间传值(注意:是页面之间,不是组件之间) 场景:A页面跳转B页面,在B页面选择商品,将商品名带回A页面并显示 使用api: getCurrentPages step1: A页 ...

随机推荐

  1. 密码学初级教程(六)数字签名 Digital Signature

    密码学家工具箱中的6个重要的工具: 对称密码 公钥密码 单向散列函数 消息认证码 数字签名 伪随机数生成器 提问: 有了消息认证码为什么还要有数字签名? 因为消息认证码无法防止否认.消息认证码可以识别 ...

  2. Leetcode 13 Roman to Integer 字符串处理+STL

    题意:将罗马数字1到3999转化成自然数字,这里用了STL库map将罗马字符映射到自然数字. I,V,X,L,C,D,M -> 1,5,10,50,100,500,1000 m[s[i]]< ...

  3. wpf提示背景,资源样式

    查找资源时多用element.TryFindResource() <TextBox FontSize="17" Height="26" Margin=&q ...

  4. 设计模式--迪米特法则(Lod/LKP)

    迪米特法则:(Law of Demeter, LoD),也称最少知识原则(Least Knowledge Principle, LKP) 理解:      假设两个类不必彼此直接通信,那么这两个类就不 ...

  5. ecside入门

    ECSide是有一个基于jsp tag的开源列表组件. 简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签. 它的工作原理很简单. 您将要展现的列表的数据集合(Collection),放入r ...

  6. mfc--弹出文件夹对话框

    1. HRESULT CoInitializeEx(void* pvReserved,DWORD dwCoInit) 初始化com组件,传递参数COINIT_APARTMENTTHREADED 2.L ...

  7. C# log4net 使用

    利用log4net写入异常类日志,在网上搜索一阵之后便想记录下来,以便后期使用,同时希望帮到大家.  第一步:使用管理NuGet程序包导入log4net.dll 导入成功后会在引用下显示相应的log4 ...

  8. IP基础知识与分配实现

    一.IP寻址 1.划分网络ID和主机ID的最初方案是使用地址分类. 2.A类:0.0.0.0-127.255.255.255 B类:128.0.0.0-191.255.255.255 C类:192.0 ...

  9. 小朋友学Python(4)

    Mac下安装Python 3 Mac系统会自带Python 2.7.x.安装Python 3时,不要卸载Python 2.7.x,因为有Mac系统有一些库会依赖于Python 2.7.x. 安装步骤: ...

  10. RabbitMq初探——消息均发

    消息均发 前言 由前文 RabbitMq初探——消息分发 可知,rabbitmq自带分发机制——消息会按顺序的投放到该队列下的多个消费者,例如1,3,5投放消费者C1,2,4,6投放消费者C2. 这就 ...