資訊專(zhuān)欄INFORMATION COLUMN
摘要：上一篇文章介紹了在快應(yīng)用中使用，本文主要介紹一下如何在微信小程序中使用。下面我們看看在微信小程序中和中如何使用微信小程序微信小程序采用開(kāi)發(fā)技術(shù)棧，使用語(yǔ)言開(kāi)發(fā)，但是運(yùn)行時(shí)和瀏覽器又有所不同，導(dǎo)致等庫(kù)無(wú)法在微信小程序中使用，而可以。
Fly.js 一個(gè)基于Promise的、強(qiáng)大的、支持多種JavaScript運(yùn)行時(shí)的http請(qǐng)求庫(kù). 有了它，您可以使用一份http請(qǐng)求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應(yīng)用中都能正常運(yùn)行。同時(shí)可以方便配合主流前端框架 ，最大可能的實(shí)現(xiàn) Write Once Run Everywhere。上一篇文章介紹了在快應(yīng)用中使用flyio，本文主要介紹一下如何在微信小程序中使用flyio。
Flyio Github: https://github.com/wendux/fly
問(wèn)題隨著 Weex 、mpvue 的發(fā)布，他們都是支持Vue.js語(yǔ)法。目前vue已經(jīng)你能夠運(yùn)行在瀏覽器、小程序和Native了。盡管各個(gè)平臺(tái)仍有差異，但已經(jīng)基本能實(shí)現(xiàn) Write Once Run Everywhere 。這使得我們可以在多個(gè)端上實(shí)現(xiàn)盡可能大限度在代碼復(fù)用。但是無(wú)論是 vue 還是Weex 、mpvue，它們本質(zhì)上都只是一個(gè)View層，也就說(shuō)最好的情況，也只能實(shí)現(xiàn)UI復(fù)用。但對(duì)于一個(gè)應(yīng)用程序來(lái)說(shuō)，除了UI，最重要的就是數(shù)據(jù)了，而數(shù)據(jù)來(lái)源一般都是來(lái)自網(wǎng)絡(luò)請(qǐng)求（大多數(shù)都是http）。在使用這些框架時(shí)，您的網(wǎng)絡(luò)請(qǐng)求，都需要使用平臺(tái)特定的API！這很糟糕，意味著您網(wǎng)絡(luò)請(qǐng)求的代碼不能復(fù)用，所以盡管UI可以復(fù)用，但我們還需要去適配網(wǎng)絡(luò)請(qǐng)求部分的代碼。
Flyio簡(jiǎn)介要上述問(wèn)題，就需要一個(gè)能支持多個(gè)平臺(tái)網(wǎng)絡(luò)庫(kù)，用戶(hù)層提供統(tǒng)一的API，將平臺(tái)差異在底層屏蔽。而 Fly.js就是這醬紫的一個(gè)網(wǎng)絡(luò)庫(kù)，為了方便axios使用者遷移，fly.js API設(shè)計(jì)風(fēng)格和axios相似（但不完全相同）！
Fly.js 通過(guò)在不同 JavaScript 運(yùn)行時(shí)通過(guò)在底層切換不同的 Http Engine來(lái)實(shí)現(xiàn)多環(huán)境支持，但同時(shí)對(duì)用戶(hù)層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API。不僅如此，F(xiàn)ly.js還支持請(qǐng)求/響應(yīng)攔截器、自動(dòng)轉(zhuǎn)化JSON、請(qǐng)求轉(zhuǎn)發(fā)等功能，詳情請(qǐng)參考：https://github.com/wendux/fly 。下面我們看看在微信小程序、mpvue中和中如何使用fly.
微信小程序微信小程序采用web開(kāi)發(fā)技術(shù)棧，使用JavaScript語(yǔ)言開(kāi)發(fā)，但是JavaScript運(yùn)行時(shí)和瀏覽器又有所不同，導(dǎo)致axios、jQuery等庫(kù)無(wú)法在微信小程序中使用，而flyio可以。下面給出具體使用方法
引入flyFlyio在各個(gè)平臺(tái)下的標(biāo)準(zhǔn)API是一致的，只是入口文件不同，在微信小程序中引入：
Npm安裝：npm install flyio --save.
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
如果您的微信小程序項(xiàng)目沒(méi)有使用npm來(lái)管理依賴(lài)，您可以直接下載源碼到您的小程序工程，下載鏈接wx.js 或 wx.umd.min.js .下載任意一個(gè)，保存到本地工程目錄，假設(shè)在“l(fā)ib”目錄，接下來(lái)引入：
var Fly=require("../lib/wx") //wx.js為您下載的源碼文件
var fly=new Fly; //創(chuàng)建fly實(shí)例
引入之后，您就可以對(duì)fly實(shí)例進(jìn)行全局配置、添加攔截器、發(fā)起網(wǎng)絡(luò)請(qǐng)求了。
使用Fly基于Promise提供了Restful API，你可以方便的使用它們，具體請(qǐng)參考fly 文檔 。下面給出一個(gè)簡(jiǎn)單的示例
//添加攔截器
fly.interceptors.request.use((config,promise)=>{
//給所有請(qǐng)求添加自定義header
config.headers["X-Tag"]="flyio";
return config;
})
//配置請(qǐng)求基地址
fly.config.baseURL="http://www.dtworkroom.com/doris/1/2.0.0/"
...
Page({
//事件處理函數(shù)
bindViewTap: function() {
//發(fā)起get請(qǐng)求
fly.get("/test",{xx:6}).then((d)=>{
//輸出請(qǐng)求數(shù)據(jù)
console.log(d.data)
//輸出響應(yīng)頭
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
...
})
})
在mpvue中使用
在mpvue 中您也可以將fly實(shí)例掛在vue原型上，這樣就可以在任何組件中通過(guò)this方便的調(diào)用：
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
... //添加全局配置、攔截器等
Vue.prototype.$http=fly //將fly實(shí)例掛在vue原型上
在組件中您可以方便的使用：
this.$http.get("/test",{xx:6}).then((d)=>{
//輸出請(qǐng)求數(shù)據(jù)
console.log(d.data)
//輸出響應(yīng)頭
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
反饋
如果您有問(wèn)題歡迎在 在github 提issue . fly.js github: github.com/fly
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93775.html
摘要：騰訊地圖提供的只提供了經(jīng)緯度定位，而產(chǎn)品需要的是確認(rèn)定位后獲取城市，進(jìn)行同城商品檢索阿里云對(duì)象儲(chǔ)存處理文件上傳，比較意外的是騰訊對(duì)阿里云的域名前綴進(jìn)行了封禁后臺(tái)不能配置，解決方案是讓后臺(tái)將該域名進(jìn)行服務(wù)器域名代理。 mpvue開(kāi)發(fā)小程序所遇問(wèn)題及h5轉(zhuǎn)化方案 項(xiàng)目結(jié)構(gòu) |---build |---pages.js文件目錄 |---src ...
摘要：在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，事件回調(diào)?？梢灾苯訉?xiě)等標(biāo)簽的寫(xiě)法之前會(huì)的工程師上手框架的成本較低 簡(jiǎn)介 1.美團(tuán)工程師推出的基于Vue.js封裝的用于開(kāi)發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點(diǎn)3.可完全組件化開(kāi)發(fā) 特點(diǎn) 1.組件化開(kāi)發(fā)2.完成的Vue.js開(kāi)發(fā)體驗(yàn)(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項(xiàng)目5.最終H5...
摘要：小程序原生是小程序平臺(tái)特定，不能運(yùn)用到導(dǎo)致小程序轉(zhuǎn)時(shí)，需要重寫(xiě)網(wǎng)絡(luò)請(qǐng)求部分代碼。為了解決平臺(tái)差異，代碼復(fù)用，將平臺(tái)差異在底層屏蔽，支持切換底層，可輕松適配各種運(yùn)行環(huán)境只是入口文件不同。 小程序原生wx.request是小程序平臺(tái)特定api ，不能運(yùn)用到web導(dǎo)致mpvue小程序轉(zhuǎn)web時(shí)，需要重寫(xiě)網(wǎng)絡(luò)請(qǐng)求部分代碼。為了解決平臺(tái)差異，代碼復(fù)用 ，fly.js將平臺(tái)差異在底層屏蔽，支持切換...
摘要：前提小程序使用作為請(qǐng)求轉(zhuǎn)換后的目錄結(jié)構(gòu)如下修改配置文件用腳手架初始化一個(gè)項(xiàng)目將小程序中文件夾和文件夾拷貝到中，覆蓋原來(lái)的文件夾修改文件刪除關(guān)于小程序相關(guān)配置小程序中使用中使用指定掛載元素修改刪除關(guān)于小程序的相關(guān)配置，添加如下代碼 前提：mpvue小程序使用fly作為http請(qǐng)求轉(zhuǎn)換后的目錄結(jié)構(gòu)如下： ├─build ├─config ├─src │?├─components │?├─p...
閱讀 2079·2021-10-12 10:12
閱讀 798·2021-09-24 09:47
閱讀 1198·2021-08-19 11:12
閱讀 3486·2019-08-29 13:06
閱讀 695·2019-08-26 11:43
閱讀 2581·2019-08-23 17:20
閱讀 1159·2019-08-23 16:52
閱讀 2607·2019-08-23 14:27
