258资源分享网

微信小程序的 javascript运行环境和浏览器不同，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，JsCore中也没有 XmlhttpRequest对象，所以 ...

微信小程序的 javascript运行环境和浏览器不同，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，JsCore中也没有 XmlhttpRequest对象，所以jquery 、zepto、axios这些在小程序中都不能用，而此时，正是 fly 大显身手的时候。

这是fly的第三篇文章，帮助您在微信小程序中使用fly。在阅读本文之前，如果您还不了解 fly。 请先阅读前两篇文章：

第一篇： JS HTTP 请求终极解决方案 - fly.js

第二篇： Fly vs axios 

下载

您需要在 https://unpkg.com/flyio/dist/ 或 https://github.com/wendux/fly/tree/master/dist 下载wx.js(未压缩) 或 wx.umd.min.js（已压缩，12k）任意一个, 然后将其拷贝到您的工程目录下。

使用

varFly=require("../lib/wx.js")//wx.js为您下载的源码文件

var fly=newFly();创建fly实例

...

Page({

//事件处理函数

bindViewTap:function(){

//调用

fly.get("",{xx:6}).then((d)=>{

console.log(d.data)

}).catch(err=>{

console.log(err.status,err.message)

})

})

})

如果您只是单纯的使用者，不用往下看了，到这里就可以了，先别急着关啊，来，star一下再走 https://github.com/wendux/fly 。 如果你对原理感兴趣，下面介绍一下背后的原理。

原理

Fly对小程序的支持实际上是通过自定义 http engine的方式，我们来看一下wx.js源码：

//微信小程序入口

varFly=require("../dist/fly")

varEngineWrapper=require("../dist/engine-wrapper")

var adapter =require("../dist/adapter/wx")//微信小程序adapter

var wxEngine =EngineWrapper(adapter)

module.exports=function(engine){

returnnewFly(engine||wxEngine);

}

可以看出，关键代码就在adapter/wx中，我们看看微信小程序的adapter代码：

//微信小程序适配器

module.exports=function(request, responseCallback){

var con ={

method: request.method,

url: request.url,

dataType: request.dataType||"text",

header: request.headers,

data: request.body||{},

success(res){

responseCallback({

statusCode: res.statusCode,

responseText: res.data,

headers: res.header,

statusMessage: res.errMsg

})

},

fail(res){

responseCallback({

statusCode: res.statusCode||0,

statusMessage: res.errMsg

})

}

}

//调用微信接口发出请求

wx.request(con)