微信小程序之----接口调用方式

最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结。

官方接口

官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例。

wx.request({
  url: ‘test.php‘, //仅为示例,并非真实的接口地址
  data: {
     x: ‘‘ ,
     y: ‘‘
  },
  header: {
      ‘content-type‘: ‘application/json‘
  },
  success: function(res) {
    console.log(res.data)
  }
})

存在的问题

  • wx.request请求的header中content-type默认为application/json,如果我们想换种方式比如用"application/x-www-form-urlencoded"会发现在请求头信息中并没有取代默认的application/json而是新增了这种方式,另外在用jquery.ajax请求时即便同样使用application/json方式来请求,得到的数据格式也不相同,无论用什么请求方式ajax都会将请求数据转换为&name1=value1&name2=value2的形式,这样在根据content-type来解析请求数据时就会出现问题,不知道微信是有意这样做还是它根本就是个bug。总之是给我带来了不必要的麻烦。
  • 微信小程序发送的是https请求,在本地调试时可以用http,如果放在手机上测试时校验请求方式和域名,不合法会报以下错误:

  • 为了方便请求,可以对wx.request做一个简单的封装,这样我们再调用的时候就方便了许多,代码如下:
var app = getApp();
function request(url,postData,doSuccess,doFail,doComplete){
      var host = getApp().conf.host;
      wx.request({
        url: host+url,
        data:postData,
        method: ‘POST‘,
        success: function(res){
          if(typeof doSuccess == "function"){
              doSuccess(res);
          }
        },
        fail: function() {
          if(typeof doFail == "function"){
              doFail();
          }
        },
        complete: function() {
          if(typeof doComplete == "function"){
              doComplete();
          }
        }
      });
  }
}

module.exports.request = request;
  • 如果一个接口在不同地方频繁用到,原本设想写一个函数,然后将函数暴露供其他js调用,但后来发现wx.request中设置async是无效的,只能发异步请求,所以如果想写一个函数来返回调用接口得到的数据就比较难实现。

来源:https://www.cnblogs.com/liululin/p/6082568.html

原文地址:https://www.cnblogs.com/dekevin/p/10226723.html

时间: 2024-10-08 10:26:54

微信小程序之----接口调用方式的相关文章

微信小程序API接口

微信小程序API接口 wx.request(OBJECT)   wx.request发起的是 HTTPS 请求. OBJECT参数说明: url->开发者服务器接口地址->String; data->请求的参数->Object.String; header->设置请求的 header , header 中不能设置 Referer->Object; method->默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE,

微信小程序之接口验证问题与处理onLaunch与onload异步同步问题

为了微信小程序接口的安全,我们需要通过一种方法,使得每次请求都需要验证一个key.但是因为异步处理的问题,我们需要先获得这个key存储后才进入下一步 1.获取开发服务器生成的key //app.js App({ userLogin:function() { var that = this; //定义promise方法 return new Promise(function (resolve, reject) { // that.getUserLocation(that,null); /*获取当前

微信小程序HTTP接口请求封装

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回调

Proxy 封装微信小程序的异步调用

上回写到: 没看上回的同学,在这里! // utils/async.js function wxPromisify(fn) { return async function(args) { return new Promise((resolve, reject) => { fn({ ...(args || {}), success: res => resolve(res), fail: err => reject(err) }); }); }; } export function toAs

微信小程序 子组件调用父组件方法

组件 js:  var value = 123; this.triggerEvent('callSomeFun', value) 父组件 wxml: <component bind:callSomeFun="onLoad"></component> 父组件 js : onLoad: function() { ... ... } 父组件调用子组件的方法 当父组件引用了子组件的时候,会遇到父组件执行子组件的方法 父组件中 wxml: <filter-cmp i

?微信小程序?----支付接口

==文档== 流程搞清楚就行  我就直接丢代码了 ==文档== # 支付接口 class Pay(APIView): def post(self, request, *args, **kwargs): login_key = request.data.get('login_key') if not login_key: return Response({'status': 400, 'msg': '参数错误'}) data_list = cache.get(login_key) if not d

php 微信小程序支付

直接贴代码: 前端测试按钮wxml: <view class="container"> <text class="name">当前选择:<参加活动> ¥0.01</text> <view class="pay" bindtap="onTap">确认支付</view> </view> wxss: .container { padding: 50r

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教