微信开发之旅———Day5（网络API）

2019-01-20 本文已影响77人 Yinvoker

昨天做完了登录界面处理了逻辑，今天先来搞一下界面的排版吧
这里不做过多的介绍了，css的学习我推荐这里，wxss和css使用基本没有太大的差距，所以可以学css上手。新手朋友们戳这里-----》菜鸟教程

直接上代码和效果图

<!--pages/helloworld/helloworld.wxml-->
<view class='container'>
<text>登录测试系统 1.0</text>
  <view>
    <input bindinput='usernameInput' placeholder='请输入用户名'/>
    <input bindinput='userpasswordInput' placeholder='请输入密码'/>
    <button bindtap='loginBtn' type='primary' style='margin-top:50rpx;width:92%'>登录</button>
  </view>
</view>

/* pages/helloworld/helloworld.wxss */
input{
  border: solid 1px rgba(0, 0, 0, 0.226);
  margin: 20rpx;
  margin-bottom: 30rpx;
  padding: 15rpx;
}

.container {
  height: 100%;
  padding: 200rpx 0;
}

注意：wxss配置可以写在组件里，也可以写在wxss文件里

效果图

做完一个简单的登录页面后，我们来思考一个东西，一个登录界面仅仅由界面构成吗？当然不是！除了前端的页面以外，会有后台的处理和验证。这时我们应该怎么去做呢？这里我们可以使用API接口来实现这些数据的交互处理功能。

目前来说微信为我们提供了8种API接口：

网络API
媒体API
文件API
数据缓存API
位置API
设备信息API
界面API
微信开放接口

今天我们先来了解一下网络API。

网络API

网络API可以帮助开发者实现网络URL访问调用、文件上传下载、网络套接字使用等功能。目前有10个接口：

wx.request(OBJECT) 接口用于发起HTTPS请求。
wx.uploadfile(OBJECT) 接口用于将本地资源上传至开发者服务器。
wx.downloadfile(OBJECT) 接口用于下载文件资源到本地。
wx.connectSocket(OBJECT) 接口用于创建一个WebSocket连接。
wx.onSocketOpen(CALLBACK) 接口用于监听WebSocket连接打开时间。
wx.onSocketError(CALLBACK) 接口用于监听WebSocket错误。
wx.sendSocketMessage(OBJECT) 接口通过实现WebSocket连接发送数据。
wx.onSocketMessage(CALLBACK) 接口实现监听WebSocket连接接受服务器的消息事件。
wx.ckiseSocket() 接口用于关闭WebSocket连接。
wx.onSocketClose(CALLBACK) 接口用于实现监听WebSocket关闭。

1.RequestTask wx.request(Object object)

发起 HTTPS 网络请求。使用前请注意阅读相关说明。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 `content-type` 默认为 `application/json`
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型	1.7.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.method 的合法值

值	说明
OPTIONS	HTTP 请求 OPTIONS
GET	HTTP 请求 GET
HEAD	HTTP 请求 HEAD
POST	HTTP 请求 POST
PUT	HTTP 请求 PUT
DELETE	HTTP 请求 DELETE
TRACE	HTTP 请求 TRACE
CONNECT	HTTP 请求 CONNECT

object.dataType 的合法值

值	说明
json	返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
其他	不对返回的内容进行 JSON.parse

object.responseType 的合法值

值	说明
text	响应的数据为文本
arraybuffer	响应的数据为 ArrayBuffer

object.success 回调函数

参数

Object res

属性	类型	说明	最低版本
data	string/Object/Arraybuffer	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.0

返回值

RequestTask

基础库 1.4.0 开始支持，低版本需做兼容处理。

请求任务对象

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

示例代码

wx.request({
 url: 'test.php', // 仅为示例，并非真实的接口地址
 data: {
 x: '',
 y: ''
 },
 header: {
 'content-type': 'application/json' // 默认值
 },
 success(res) {
 console.log(res.data)
 }
})

注意一下，wx.request这里使用需要配置域名，所以就今天就先研究一下文档配置一下域名。（不知道怎么配置戳这里相关说明）
顺便我的开发工具也要升级了，今天先到这里吧~

上一篇：微信开发之旅———Day4（hello world~）
下一篇：微信开发之旅———Day6（远程请求）