リード
上の記事の小さなmpvueの+のvantを構築するためのマイクロチャネルプログラム「mpvueプロジェクトをセットアップする方法をカバーし、vantを導入しまし、この記事では、それに基づいてflyioの導入を継続し、要求を開始するための小さなプログラムを目的としたいくつかのパッケージを実行します。
そして、読者がいくつかの質問を持って、アプレットが要求を持って、なぜflyioでしょうか？これは、ホイール、それを作成しないのですか？私はそれがmpvueであるかどうか、実際には、そう思う、またはwepyは完璧なマイクロチャネルバージョンアプレットとH5をコンパイルしていないようでした。H5アイデアを作成しているボスの将来のバージョンに対応するために、我々は、将来の再利用のアプレットコードのための十分な準備する必要があります。H5はアヤックスがありますので、flyioも、両側が、宮ない使用することができ、いくつかのパッケージを行い、これだけで持ち込むflyio入れ、アプレットおよびH5をサポートしていますか？
記事の最後には、+のvant + flyioを作成したプロジェクトmpvueステップチュートリアルに付属品は、学生が離れてそれを言及していない、学ぶ必要があります。
最初のステップ：プロジェクトに参加flyio
私のプロジェクトのパス：/ユーザー/ HRZ /マイワークスペース/弁護士・カードwxss
$ cd /Users/hrz/myworkspace/lawyer-card-wxss
$ cnpm i flyio -S --production 
正しい姿勢
ステップ2：二次包装
作成APIのフォルダを、次の2つのファイルを作成api.js、httpRequest.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 } 第三段階：デモを書き込むための要求を送信します
<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