原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
我們先了解小程序發起網絡請求的官方說明
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.mkhyf.com/apicenter/?api=put