微信小程序的(de) javascript運行(xing)環境和瀏(liu)覽(lan)器不同，頁面(mian)的(de)腳本邏輯是(shi)(shi)在(zai)JsCore中(zhong)(zhong)運行(xing)，JsCore是(shi)(shi)一個沒有窗口對象的(de)環境，所以不能在(zai)腳本中(zhong)(zhong)使(shi)用window，也無法在(zai)腳本中(zhong)(zhong)操作(zuo)組(zu)件，JsCore中(zhong)(zhong)也沒有 XmlhttpRequest對象，所以jquery 、zepto、axios這些在(zai)小程序中(zhong)(zhong)都(dou)不能用，而此時(shi)，正(zheng)是(shi)(shi) fly 大顯身手的(de)時(shi)候。

這是fly的第三篇(pian)文(wen)章，幫助您(nin)在微(wei)信小程序中使用fly。在閱讀本(ben)文(wen)之前(qian)，如果您(nin)還不了解 fly。 請先閱讀前(qian)兩篇(pian)文(wen)章：

第一篇： JS HTTP 請求終極解決(jue)方案 - fly.js

第(di)二(er)篇： Fly vs axios 

下載

您(nin)需要在 //unpkg.com/flyio/dist/ 或 //github.com/wendux/fly/tree/master/dist 下載(zai)wx.js(未壓縮) 或 wx.umd.min.js（已(yi)壓縮，12k）任意一個, 然(ran)后將其拷貝到您(nin)的工(gong)程(cheng)目錄下。

使用

1. var Fly=require("../lib/wx.js") //wx.js為您(nin)下載的源碼(ma)文件
2. var fly=new Fly();創(chuang)建fly實例
3. ...
4. Page({
5. //事(shi)件處理函數
6. bindViewTap: function() {
7. //調用(yong)
8. fly.get("//10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
9. console.log(d.data)
10. }).catch(err=>{
11. console.log(err.status,err.message)
12. })
13. })
14. })

如(ru)果(guo)您只是單(dan)純的使用者，不用往下看了(le)(le)，到這里就可(ke)以了(le)(le)，先別急著關啊(a)，來，star一(yi)下再走 //github.com/wendux/fly 。 如(ru)果(guo)你對原理(li)感興趣，下面(mian)介紹一(yi)下背后(hou)的原理(li)。

原理

Fly對(dui)小程序的支(zhi)持(chi)實際上(shang)是通過自定義 http engine的方式，我(wo)們來看一下(xia)wx.js源(yuan)碼：

1. //微信小(xiao)程(cheng)序入口
2. var Fly=require("../dist/fly")
3. var EngineWrapper = require("../dist/engine-wrapper")
4. var adapter = require("../dist/adapter/wx") //微信小程序adapter
5. var wxEngine = EngineWrapper(adapter)
6. module.exports=function (engine) {
7. return new Fly(engine||wxEngine);
8. }

可以看出(chu)，關鍵代碼(ma)就(jiu)在adapter/wx中，我們看看微信小程序(xu)的adapter代碼(ma)：

1. //微信小程序適配(pei)器
2. module.exports=function(request, responseCallback) {
3. var con = {
4. method: request.method,
5. url: request.url,
6. dataType: request.dataType||"text",
7. header: request.headers,
8. data: request.body||{},
9. success(res) {
10. responseCallback({
11. statusCode: res.statusCode,
12. responseText: res.data,
13. headers: res.header,
14. statusMessage: res.errMsg
15. })
16. },
17. fail(res) {
18. responseCallback({
19. statusCode: res.statusCode||0,
20. statusMessage: res.errMsg
21. })
22. }
23. }
24. //調用微信(xin)接口(kou)發出請求(qiu)
25. wx.request(con)
26. }

這就是所有的(de)(de)實現，很簡單(dan)！通過這個例子，可以(yi)幫助您理解 “fly正是通過不(bu)同的(de)(de)adpter來(lai)支持不(bu)同的(de)(de)環境(jing)” 這句話(hua)，至于其(qi)它的(de)(de)環境(jing)，我們完全可以(yi)照貓畫虎(hu)。

最后

再次(ci)貼出fly github地(di)址，如果你喜歡，歡迎star，以使更多(duo)的人知(zhi)道fly，感謝您的支(zhi)持：//github.com/wendux/fly