昨天做完了登录界面处理了逻辑，今天先来搞一下界面的排版吧
这里不做过多的介绍了，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

object.method 的合法值

object.dataType 的合法值

object.responseType 的合法值

object.success 回调函数

参数

Object res

返回值

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（远程请求）