中国领先的IT技术网站
|
|

微信小程序中使用Fly 发起http请求

微信小程序的 javascript运行环境和浏览器不同,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件,JsCore中也没有 XmlhttpRequest对象,所以jquery 、zepto、axios这些在小程序中都不能用,而此时,正是 fly 大显身手的时候。

作者:lazydu来源:简书|2017-10-26 13:40

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


微信小程序的 javascript运行环境和浏览器不同,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件,JsCore中也没有 XmlhttpRequest对象,所以jquery 、zepto、axios这些在小程序中都不能用,而此时,正是 fly 大显身手的时候。

您需要在 https://unpkg.com/flyio/dist/ 或 https://github.com/wendux/fly/tree/master/dist 下载wx.js(未压缩) 或 wx.umd.min.js(已压缩,12k)任意一个, 然后将其拷贝到您的工程目录下。

微信小程序中使用Fly 发起http请求

使用

  1. var Fly=require("../lib/wx.js") //wx.js为您下载的源码文件 
  2. var fly=new Fly();创建fly实例 
  3. ... 
  4. Page({ 
  5.   //事件处理函数 
  6.   bindViewTap: function() { 
  7.     //调用 
  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. }) 
  15.  
  16.  
  17. 作者:lazydu 
  18. 链接:http://www.jianshu.com/p/2d0a1ad94ed5 
  19. 來源:简书 
  20. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 

如果您只是单纯的使用者,不用往下看了,到这里就可以了,先别急着关啊,来,star一下再走 https://github.com/wendux/fly 。 如果你对原理感兴趣,下面介绍一下背后的原理。

原理

Fly对小程序的支持实际上是通过自定义 http engine的方式,我们来看一下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.  
  9.  
  10. 作者:lazydu 
  11. 链接:http://www.jianshu.com/p/2d0a1ad94ed5 
  12. 來源:简书 
  13. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 

可以看出,关键代码就在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.     //调用微信接口发出请求 
  25.     wx.request(con) 
  26.  
  27.  
  28. 作者:lazydu 
  29. 链接:http://www.jianshu.com/p/2d0a1ad94ed5 
  30. 來源:简书 
  31. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 

这就是所有的实现,很简单!通过这个例子,可以帮助您理解 “fly正是通过不同的adpter来支持不同的环境” 这句话,至于其它的环境,我们完全可以照猫画虎。

【编辑推荐】

  1. 微信小程序云端增强 SDK接入
  2. 半年过去,小程序的冰火真相
  3. 这才是小程序真正价值 但他绝不会取代App
  4. 被小程序坑了这几点,你遇到了吗?
  5. 想要快速获客?送你 2 个小程序互推方法
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C语言核心技术

在这本书中,C 语言专家 Peter Prinz和Tony Crawford为你提供大量的编程参考信息。全书叙述清晰,语句简洁,分析深刻。本书主题包括: ...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)