微信小程序的网络请求接口如何使用?

时间:2017-06-09 13:37:45 作者: anna

  今天小编就带大家来共同学习微信小程序的网络请求接口如何使用?希望可以帮助到有需要的小伙伴哦,下面就是详细完整的操作步骤。

  接口说明:

  wx.request是小程序客户端与服务器端交互的接口(类似javascript的ajax请求),只能发起 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接,因此开发者要控制好请求的数量。由于request操作依赖网络,会造成等待,影响用户体验,因此目前只支持异步模式。

  需注意:

  客户端的 HTTPS TLS 版本为1.2,但 Android 的部分机型还未支持 TLS 1.2,所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本

  请求参数 method 的 value 经测试(IDE和IOS)不区分大小写,默认为GET请求

  请求参数 url 中不能带有端口号,否则真机上无法运行

  接口用法:

  利用request请求访问微信小程序俱乐部提供的API

  客户端展示

微信小程序的网络请求接口的详细使用方法

  服务器端展示

微信小程序的网络请求接口的详细使用方法

  wxml

  

  

  

  

  key:{{aKey}}

  value:{{aValue}}

  type:{{aType}}

  

  复制代码

  js

  var app = getApp()

  Page({

  data:{

  aKey:"null",

  aValue:"null",

  aType:"null"

  },

  onLoad:function(options){

  //加载时就获取后台的数据

  this.get_data()

  },

  insert:function(){

  // 插入数据

  var that=this

  wx.request({

  url: \'https://api.wxappclub.com/put\',

  data: {

  appkey: \'hi0yhmmemhkn00ud7ne748agga7qyj1j\' ,

  key: "akey",

  value:"avalue",

  type:"String"

  },

  method:\'get\',

  header: {

  \'Content-Type\': \'application/json\'

  },

  success: function(res) {

  that.get_data();

  }

  })

  },

  update:function(){

  // 更新数据

  var that=this

  wx.request({

  url: \'https://api.wxappclub.com/put\',

  data: {

  appkey: \'hi0yhmmemhkn00ud7ne748agga7qyj1j\' ,

  key: "akey",

  value:"new_avalue",

  type:"String"

  },

  method:\'get\',

  header: {

  \'Content-Type\': \'application/json\'

  },

  success: function(res) {

  that.get_data();

  }

  })

  },

  del:function(){

  //删除数据

  var that=this

  wx.request({

  url: \'https://api.wxappclub.com/del\',

  data: {

  \'appkey\': \'hi0yhmmemhkn00ud7ne748agga7qyj1j\' ,

  \'key\': "akey",

  \'type\':"String"

  },

  method:\'get\',

  header: {

  \'Content-Type\': \'application/json\'

  },

  success: function(res) {

  that.setData({

  aKey:"null",

  aValue:"null",

  aType:"null"

  })

  }

  })

  },

  get_data:function(){

  // 获取数据

  var that=this;

  wx.request({

  url: \'https://api.wxappclub.com/get\',

  data: {

  \'appkey\': \'hi0yhmmemhkn00ud7ne748agga7qyj1j\',

  \'key\': "akey",

  \'type\':"String"

  },

  header: {

  \'content-type\': \'application/json\'

  },

  success: function(res) {

  if(res.data.success){

  that.setData({

  aKey:res.data.result.key,

  aValue:res.data.result.value,

  aType:res.data.result.type

  })

  }

  }

  })

  }

  })

  复制代码

  wxss

  page{

  height: 100%;

  width:100%;

  }

  .container{

  display: flex;

  flex-direction: column;

  align-items: center;

  }

  button{

  width:500rpx;

  margin: 10rpx 0;

  }

  .but-hover{

  background-color: #5CB85C;

  }

  复制代码

  以上就是微信小程序的网络请求接口如何使用的全部内容了,大家都学会了吗?

相关推荐
抖音

热文推荐

  • 48小时热文
  • 每周热文

微信小程序的网络请求接口如何使用?