小程序模板網(wǎng)

微信小程序中使用Fly 發(fā)起http請(qǐng)求

發(fā)布時(shí)間:2018-01-03 09:45 所屬欄目:小程序開(kāi)發(fā)教程

微信小程序的 javascript運(yùn)行環(huán)境和瀏覽器不同,頁(yè)面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒(méi)有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window,也無(wú)法在腳本中操作組件,JsCore中也沒(méi)有 XmlhttpRequest對(duì)象,所以 ...

 
 
 

微信小程序的 javascript運(yùn)行環(huán)境和瀏覽器不同,頁(yè)面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒(méi)有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window,也無(wú)法在腳本中操作組件,JsCore中也沒(méi)有 XmlhttpRequest對(duì)象,所以jquery 、zepto、axios這些在小程序中都不能用,而此時(shí),正是 fly 大顯身手的時(shí)候。

這是fly的第三篇文章,幫助您在微信小程序中使用fly。在閱讀本文之前,如果您還不了解 fly。 請(qǐng)先閱讀前兩篇文章:

第一篇: JS HTTP 請(qǐng)求終極解決方案 - 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)任意一個(gè), 然后將其拷貝到您的工程目錄下。

使用

 

		
  1. var Fly=require("../lib/wx.js") //wx.js為您下載的源碼文件
  2. var fly=new Fly();創(chuàng)建fly實(shí)例
  3. ...
  4. Page({
  5. //事件處理函數(shù)
  6. bindViewTap: function() {
  7. //調(diào)用
  8. fly.get("http://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. })

如果您只是單純的使用者,不用往下看了,到這里就可以了,先別急著關(guān)啊,來(lái),star一下再走 https://github.com/wendux/fly 。 如果你對(duì)原理感興趣,下面介紹一下背后的原理。

原理

Fly對(duì)小程序的支持實(shí)際上是通過(guò)自定義 http engine的方式,我們來(lái)看一下wx.js源碼:

 

		
  1. //微信小程序入口
  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. }

可以看出,關(guān)鍵代碼就在adapter/wx中,我們看看微信小程序的adapter代碼:

 

		
  1. //微信小程序適配器
  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. //調(diào)用微信接口發(fā)出請(qǐng)求
  25. wx.request(con)
  26. }

這就是所有的實(shí)現(xiàn),很簡(jiǎn)單!通過(guò)這個(gè)例子,可以幫助您理解 “fly正是通過(guò)不同的adpter來(lái)支持不同的環(huán)境” 這句話(huà),至于其它的環(huán)境,我們完全可以照貓畫(huà)虎。

最后

再次貼出fly github地址,如果你喜歡,歡迎star,以使更多的人知道fly,感謝您的支持:https://github.com/wendux/fly



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/18359.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)
AI智能客服 ×