微信小程序 在使用wx.request时显示加载中

微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图:

我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.js

var requestHandler = {
  url: ‘‘,
  data: {},
  method: ‘‘,
  success: function (res) {
  },
  fail: function () {
  },
  complete: function () {
  }
}

function request(requestHandler) {
  var data = requestHandler.data;
  var url = requestHandler.url;
  var method = requestHandler.method;
  wx.showLoading({
    title: ‘加载中‘,
  })
  wx.request({
    url: url,
    data: data,
    method: method,
    success: function (res) {
      wx.hideLoading();
      requestHandler.success(res)
    },
    fail: function () {
      wx.hideLoading();
      requestHandler.fail();
    },
    complete: function () {

    }
  })
}

module.exports = {
  request: request
}

 在需要用到的js文件用require引入即可,之后你要向服务器请求数据只要

network.request({
  url:‘‘,
  data:{}
  success:function(){

  }
})

这样就完成了wx.request的加工了,之后只要你向服务器请求数据,就会显示加载中的样式

原文地址:https://www.cnblogs.com/clicklin/p/9048904.html

时间: 2024-10-12 03:43:14

微信小程序 在使用wx.request时显示加载中的相关文章

微信小程序填坑,wx.request() 内调用setData()方法错误的解决办法

再方法内添加一行代码,把this对象赋值给给一个变量供success()方法内调用 核心代码: var v = this.txt; 完整示例 abc:function(e){//该函数用于和后台交互 // var v = e var v = this.txt; var self=this; //关键代码,这要操作程序无法运行 wx.request({ url: 'https://www.kjch.xyz/jous/hello.do', //仅为示例,并非真实的接口地址 data: { name:

微信应用号小程序发起请求wx.request(OBJECT)

微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , header中不能设置Referer method String 否 默认为GET,有效值:O

[VS调试]VS2010 VS2012调试时显示加载符号导致调试特别慢

下午睡多了,编个小程序(探索形式)搞到现在,遇到一个不爽的问题就是调试时加载很慢,这次百度终于解决了. 打开”调试”–>”选项”看下图: [VS调试]VS2010 VS2012调试时显示加载符号导致调试特别慢,布布扣,bubuko.com

微信小程序正确的异步request请求,根据经纬度获取地理位置信息

微信小程序的所有request请求都是异步的,不支持同步.但是在请求时可能会耗费一定时间,这样的话在获取返回数据时可能方法还没有执行完就已经进行赋值操作了.我遇到的就是拿到的数据为undefined. 解决办法,使用回调函数,等操作完成后再更改原来的值. 贴代码:(这是根据经纬度获取地理位置的一个方法) function GetAddress(latitude, longtitude, callback, errorCallback) { var geturl = 'https://api.ma

微信小程序之使用wx:for遍历循环

效果图如下: 实现代码如下:type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, editType: function (e) { var typeId = e.currentTarget.dataset['id']; console.log("edit:"+typeId); wx.navigateTo({ url: '../type_edit/type_edit?ty

微信小程序:获取地理定位和显示相应的城市名称。

最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案                                                                                                                                               小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图).

微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获取不到动态设置的global数据了.因为我要获取小程序的unionid以及通过unionid去获取微信的openId,并且共享数据,最开始我是通过storage来做数据共享的,后来测试发现storage存在莫名被清空的情况,后来转用globalData来做数据共享,查了下,是因为app.js中的on

微信小程序自定义组件的使用以及调用自定义组件中的方法

在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说的自定义组件,自定义组件类似于页面,它有wxml 模版.wxss 样式和js文件,然后在页面中使用该自定义组件即可. 例如,我的自定义组件代码结构是这样的: myComponent文件就是我所创的自定义组件,myComponent.wxml文件代码为: <view class="inner&q

微信小程序-bug-调用wx.login()无响应的原因和解决方案

想必,最近有些小程序开发者,在调用wx.login()的时候,在部分IOS上无响应的情况: 补充一点:在测试模式,调试模式,都是OK的,一上正式环境就GG了,百思不得其解啊! 响应结果如下: 在success \ fail的回调函数里面均未触发: 设置timeout后,在complate回调中可触发: 分析结果,我们知道,login接口一直处于pending状态,如果加了timeout时间后,在complate回调中可触发: 那为什么login方法一直是pending呢???? 看了微信的社区,