昨天做完了登录界面处理了逻辑, 今天先来搞一下界面的排版吧
这里不做过多的介绍了, CSS 的学习我推荐这里, wxss 和 CSS 使用基本没有太大的差距, 所以可以学 CSS 上手. 新手朋友们戳这里 -----》菜鸟教程 http://www.runoob.com/css/css-tutorial.html
直接上代码和效果图
- <!--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. 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 |
返回值
基础库 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~)
来源: http://www.jianshu.com/p/19d407387856