微信小程序中使用Fly 發(fā)起http請(qǐng)求
微信小程序的 javascript運(yùn)行環(huán)境和瀏覽器不同,頁(yè)面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window,也無(wú)法在腳本中操作組件,JsCore中也沒有 XmlhttpRequest對(duì)象,所以jquery 、zepto、axios這些在小程序中都不能用,而此時(shí),正是 fly 大顯身手的時(shí)候。
您需要在 https://unpkg.com/flyio/dist/ 或 https://github.com/wendux/fly/tree/master/dist 下載wx.js(未壓縮) 或 wx.umd.min.js(已壓縮,12k)任意一個(gè), 然后將其拷貝到您的工程目錄下。
使用
- var Fly=require("../lib/wx.js") //wx.js為您下載的源碼文件
 - var fly=new Fly();創(chuàng)建fly實(shí)例
 - ...
 - Page({
 - //事件處理函數(shù)
 - bindViewTap: function() {
 - //調(diào)用
 - fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
 - console.log(d.data)
 - }).catch(err=>{
 - console.log(err.status,err.message)
 - })
 - })
 - })
 - 作者:lazydu
 - 鏈接:http://www.jianshu.com/p/2d0a1ad94ed5
 - 來源:簡(jiǎn)書
 - 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 
如果您只是單純的使用者,不用往下看了,到這里就可以了,先別急著關(guān)啊,來,star一下再走 https://github.com/wendux/fly 。 如果你對(duì)原理感興趣,下面介紹一下背后的原理。
原理
Fly對(duì)小程序的支持實(shí)際上是通過自定義 http engine的方式,我們來看一下wx.js源碼:
- //微信小程序入口
 - var Fly=require("../dist/fly")
 - var EngineWrapper = require("../dist/engine-wrapper")
 - var adapter = require("../dist/adapter/wx") //微信小程序adapter
 - var wxEngine = EngineWrapper(adapter)
 - module.exports=function (engine) {
 - return new Fly(engine||wxEngine);
 - }
 - 作者:lazydu
 - 鏈接:http://www.jianshu.com/p/2d0a1ad94ed5
 - 來源:簡(jiǎn)書
 - 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 
可以看出,關(guān)鍵代碼就在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
 - })
 - }
 - }
 - //調(diào)用微信接口發(fā)出請(qǐng)求
 - wx.request(con)
 - }
 - 作者:lazydu
 - 鏈接:http://www.jianshu.com/p/2d0a1ad94ed5
 - 來源:簡(jiǎn)書
 - 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 
這就是所有的實(shí)現(xiàn),很簡(jiǎn)單!通過這個(gè)例子,可以幫助您理解 “fly正是通過不同的adpter來支持不同的環(huán)境” 這句話,至于其它的環(huán)境,我們完全可以照貓畫虎。















 
 
 











 
 
 
 