微信小程序网络通讯系列（1）

版权声明：本文为博主原创文章，未经博主允许不得转载

我们先了解小程序发起网络请求的官方说明

wx.request(OBJECT)

OBJECT参数说明：

参数名	类型	必填	说明
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	否	接口调用结束的回调函数（调用成功、失败都会执行）

我们从一个登陆页面的请求说起：

登陆页面

附上页面代码

登录的点击按钮事件listenerLogin点击即post俩个input框值到后台

我们使用咱们小程序平台的api作为例子

listenerLogin: function() {
//打印收入账号和密码
console.log('手机号为: ', this.data.phone);
console.log('密码为: ', this.data.password);
wx.request({
      url: 'https://api.wxappclub.com/put',
      data: {
        appkey: 'youappkey' ,
        key: this.data.phone,
        value:this.data.password
      },
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {

          console.log(res.data)
          wx.navigateTo({
              url: '../result/result'
            })
      },
     fail: function(){  
        console.log('失败！')
  }  
});
}

走一趟流程：

jdfw.gif

这就是很基础的request使用案例

附上官方API文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=20161122

小黄象API文档地址：http://www.wxappclub.com/apicenter/?api=put