微信小程序网络通讯系列(1)

  • • 发表于 4年前
  • • 作者 Fredia
  • • 2147 人浏览
  • • 9 条评论
  • • 最后编辑时间 4年前
  • • 来自 [技 术]

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

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

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

分享到:
评论区(共9条评论)
9条评论
Ctrl+Enter
作者

Fredia

Fredia

APP:1 帖子:12 回复:30 积分:552

已加入社区[1342]天

CTOWAY

作者详情》
Top