小程序模板网

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

2018-01-03 盘子头

微信小程序的 javascript运行环境和浏览器不同,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件,JsCore中也没有 XmlhttpRequest对象,所以 ...

 
 
 

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

这是fly的第三篇文章,帮助您在微信小程序中使用fly。在阅读本文之前,如果您还不了解 fly。 请先阅读前两篇文章:

第一篇: JS HTTP 请求终极解决方案 - 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)任意一个, 然后将其拷贝到您的工程目录下。

使用

 

		
  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. })

如果您只是单纯的使用者,不用往下看了,到这里就可以了,先别急着关啊,来,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. }

可以看出,关键代码就在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. }

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

最后

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18359.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询