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