微信小程序中post方法与get方法的封装

2024-10-23 11:43:37

微信小程序开发post方法与get方法的封装

第一步：在utils文件夹下创建httpUtil.js文件

第二步：创建函数httpPost方法代码如下:

function Post(url, data, cb, isShow, showNetError, that, showLoading) {
 if (showLoading == true || showLoading == undefined){
  wx.showNavigationBarLoading();
  wx.showLoading({
   title: '加载中...',
  })
 }
 var basicData = {
  vloginPwd: api.vloginPwd,
  vtoken: api.vtoken
 }
 if (!isEmpty(data)) {
  for (var key in data) {
   try {
    basicData[key] = data[key];
   } catch (e) { }
  }
 }
 wx.request({
  url: url,
  header: { 'content-type': 'application/x-www-form-urlencoded' },
  method: 'POST',
  data: basicData,
  success: (res) => {
   if (res.data.state == 200) {
    typeof cb == "function" && cb(res.data, "");
   } else {
    if (isShow == true) {
     wx.showModal({
      title: '提示',
      content: res.data.msg,
      showCancel: false
     })
    }
   }
  },
  fail: (err) => {
   if (showNetError) {
    that.setData({
     errorDisplay:'',
     containHidden:true
    })
   }
  },
  complete: (res) => {
   setTimeout(function () {
    wx.hideNavigationBarLoading();
    wx.hideLoading();
   }, 100)
  }
 });
};

第三步，在module里添加：

module.exports = {
 httpGet: Get,
 httpPost: Post
};

第四步，引入

var httpUtil = require('../../utils/HttpHelper.js')

第五步，如何使用

onload:function(option){
  var that = this;
  httpUtil.httpPost(api.getListUrl, jsonData, function (res) {
   wx.showModal({
    title: '提示',
    content: res.msg,
    showCancel: false,
    confirmText:"查看",
    success: function (res) {
     console.log("res.data===", res.data);
     if (res.confirm) {
      that.toDetail(res.data);
     }
    }
   })
  }, true, true, this);
}

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望通过本文能帮助到大家，谢谢大家对本站的支持！

微信小程序报错：this.setData is not a function的解决办法

微信小程序报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入
微信小程序getPhoneNumber获取用户手机号

微信小程序getPhoneNumber获取用户手机号小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"
微信小程序之蓝牙的链接

微信小程序之蓝牙的链接微信小程序蓝牙连接2.0说明: 1.本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式. 2.兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监听到开启了蓝牙后自动开始连接. (2)初始化蓝牙失败后每3000ms自动重新初始化蓝牙适配器. (3)安卓端开启蓝牙适配器扫描失败,每3000ms自动重新开启. (4)IOS端获取已连接蓝牙设备为空,每3000ms自动重新获取. (5)安卓端蓝牙开始链接后中断扫描,连接失败了,重新开始扫描. (6)IOS端开始连接设
微信小程序下拉刷新界面的实现

微信小程序下拉刷新界面的实现利用onPullDownRefresh函数设置下拉刷新功能一.在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true } 或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true { "enablePullDownRefresh": true } 二.利
微信小程序开发之好友列表字母列表跳转对应位置

微信小程序开发之好友列表字母列表跳转对应位置前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc
Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解首先在官网下载示例代码, 选php的, 这里有个坑官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le
微信小程序循环及嵌套循环的使用总结

微信小程序循环及嵌套循环的使用总结关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难. 对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中: //首页话题列表 wx.request({ url: 'https://*******************', method: 'POST', data: { pageNum: 1, pageSize: 10 },
微信小程序中使用 async/await的方法实例分析

本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe
微信小程序中正确使用地图的方法实例

目录前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市总结前言今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方
微信小程序中使用echarts的实现方法

刚开始学微信小程序,有说的不对的地方大家可以提出! 首先体验示例小程序在微信中扫描下面的二维码即可体验 ECharts Demo: 下载为了兼容小程序 Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用 ECharts. 首先,下载 GitHub 上的 ecomfe/echarts-for-weixin项目. 其中,ec-canvas 是我们提供的组件,其他文件是如何使用该组件的示例. ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-
在微信小程序中渲染HTML内容的方法示例

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极
在微信小程序中使用mqtt服务的方法

因为需求的关系,需要在小程序中使用mqtt来进行tcp的长连接,实时监听设备的返回状态. js中连接mqtt服务器是通过websocket来实现的,我在网上找了2个库,一个是eclipse开发的paho-mqtt. 项目地址:https://github.com/eclipse/paho.mqtt.javascript 一个是个人开发的mqttjs,项目地址:https://github.com/mqttjs/MQTT.js 比较了下,mqqtt.js比较灵活对小程序也有很好的支持,所以采用了这
微信小程序中显示html格式内容的方法

前言最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx
微信小程序中setInterval的使用方法

微信小程序中setInterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x
微信小程序中使元素占满整个屏幕高度实现方法

微信小程序中使元素占满整个屏幕高度实现方法在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值但是显然通过js来进行的,
微信小程序中使用Async-await方法异步请求变为同步请求方法

微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c
微信小程序中使用ECharts 异步加载数据的方法

官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

微信小程序中post方法与get方法的封装

相关推荐

随机推荐