微信小程序网络通讯系列（1）-微信小程序俱乐部 www.wxappclub.com

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

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

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	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

登陆页面
附上页面代码

<view class="inputView" style="margin-top: 40% ">
<input class="input" type="number" placeholder="请输入账号" placeholder-style="color: red" bindinput="listenerPhoneInput" />
</view>

<view class="inputView">
<input class="input" password="true" placeholder="请输入密码" placeholder-style="color: red" bindinput="listenerPasswordInput"/>
</view>

<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登录</button>

登录的点击按钮事件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('失败！')
  }  
});
}

走一趟流程：

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

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

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