欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《二十九》wx.request网络请求

发布：2018-01-25 16:18浏览： 次来源：网络 作者：tianshu

接口说明:

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

客户端展示

小程序极速实战开发《二十九》wx.request网络请求(图1)



服务器端展示

小程序极速实战开发《二十九》wx.request网络请求(图2) 


 

wxml

  1. <view class="container">
  2.   <button hover-class="but-hover" bindtap="insert">插入数据</button>
  3.   <button hover-class="but-hover" bindtap="update">修改数据</button>
  4.   <button hover-class="but-hover" bindtap="del">删除数据</button>
  5.   <text>key:{{aKey}}
  6. value:{{aValue}}
  7. type:{{aType}}</text>
  8. </view>

js

  1. var app = getApp()
  2. Page({
  3.   data:{
  4.     aKey:"null",
  5.     aValue:"null",
  6.     aType:"null"
  7.   },
  8.   onLoad:function(options){
  9.     //加载时就获取后台的数据
  10.     this.get_data()
  11.   },
  12.   insert:function(){
  13.     // 插入数据
  14.     var that=this
  15.     wx.request({
  16.       url: 'https://api.wxappclub.com/put',
  17.       data: {
  18.         appkey: 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
  19.         key: "akey",
  20.         value:"avalue",
  21.         type:"String"
  22.       },
  23.       method:'get',
  24.       header: {
  25.           'Content-Type': 'application/json'
  26.       },
  27.       success: function(res) {
  28.         that.get_data();
  29.       }
  30.     })
  31.   },
  32.   update:function(){
  33.     // 更新数据
  34.     var that=this
  35.     wx.request({
  36.       url: 'https://api.wxappclub.com/put',
  37.       data: {
  38.         appkey: 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
  39.         key: "akey",
  40.         value:"new_avalue",
  41.         type:"String"
  42.       },
  43.       method:'get',
  44.       header: {
  45.           'Content-Type': 'application/json'
  46.       },
  47.       success: function(res) {
  48.         that.get_data();
  49.       }
  50.     })
  51.   },
  52.   del:function(){
  53.     //删除数据
  54.     var that=this
  55.     wx.request({
  56.       url: 'https://api.wxappclub.com/del',
  57.       data: {
  58.         'appkey': 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
  59.         'key': "akey",
  60.         'type':"String"
  61.       },
  62.       method:'get',
  63.       header: {
  64.           'Content-Type': 'application/json'
  65.       },
  66.       success: function(res) {
  67.         that.setData({
  68.           aKey:"null",
  69.           aValue:"null",
  70.           aType:"null"
  71.         })
  72.       }
  73.     })
  74.   },
  75.   get_data:function(){
  76.     // 获取数据
  77.     var that=this;
  78.     wx.request({
  79.       url: 'https://api.wxappclub.com/get',
  80.       data: {
  81.         'appkey': 'hi0yhmmemhkn00ud7ne748agga7qyj1j',
  82.         'key': "akey",
  83.         'type':"String"
  84.       },
  85.       header: {
  86.           'content-type': 'application/json'
  87.       },
  88.       success: function(res) {
  89.         if(res.data.success){
  90.           that.setData({
  91.             aKey:res.data.result.key,
  92.             aValue:res.data.result.value,
  93.             aType:res.data.result.type
  94.           })
  95.         }
  96.       }
  97.     })
  98.   }
  99. })

wxss

  1. page{
  2.   height: 100%;
  3.   width:100%;
  4. }
  5. .container{
  6.   display: flex;
  7.   flex-direction: column;
  8.   align-items: center;
  9. }
  10. button{
  11.   width:500rpx;
  12.   margin: 10rpx 0;
  13. }
  14. .but-hover{
  15.   background-color: #5CB85C;
  16. }

主要属性：
参数名
类型
必填
说明
url String 是 请求后台接口的地址（不能带有端口号）
data Object、String 否 请求携带的参数
header Object 否 设置请求的 header , header 中不能设置 Referer
method String 否 默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success Function 否 请求后台成功返回后的回调函数，res = {data: ‘开发者服务器返回的内容’}
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有