微信小程序API——向服务器发送请求

在微信小程序中，我们可以通过微信的API与服务器进行数据传递，接下来我会详细介绍一下wx.request的用法。

首先给出前端代码，我们定义一个按钮，绑定点击事件，用于给服务器发送请求。当服务器返回数据后，通过wx:for循环出数组中的数据。

<button type="primary" bindtap='sendRequest'> 发送http请求 </button>

<!-- 通过wx:for循环遍历list数组 -->
<view wx:for="{{list}}" wx:key="key">
name:{{item.name}}
id:{{item.Id}}
</view>

接下来看一下后来js的请求逻辑。

var SERVER_PATH ="http://服务器IP/处理该请求的文件";//定义服务器地址
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],//list数组用于接受服务器穿回来的json数组
  },
  sendRequest : function(){
    var that=this;//获取到全局变量

    wx.request({
      url: SERVER_PATH,//给函数传递服务器地址参数 
      data: {
        x: '',
        y: ''
      },//给服务器传递数据，本次请求不需要数据，可以不填
      header: {
        'content-type': 'application/json' // 默认值，返回的数据设置为json数组格式
      },
      success: function (res) {
        console.log(res);//打印出返回的数据
        var data=res.data;
        that.setData({
          list: data
        })//通过setData方法把返回的数据复制给本页面定义的list数组
      },
    })
  },
})

大家可能心中还会有一些疑问，接下来我们来看一看json数组中的内容。

json数组中有两个元素，索引分别为0和1，我们通过wx:for把这两个元素遍历出来。每一个元素中包含两个属性，我们把list数组丢给for循环，然后标签内的{{item}}则代表每一个元素，{{item.name}}则代表name属性，就这样，我们就可以把json数组中的每一个值都遍历出来，是不是很方便。

官方文档地址https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject