昨天做完了登錄界面處理了邏輯闸餐，今天先來搞一下界面的排版吧
這里不做過多的介紹了茬高，css的學(xué)習(xí)我推薦這里，wxss和css使用基本沒有太大的差距吧凉，所以可以學(xué)css上手隧出。新手朋友們戳這里-----》菜鳥教程

直接上代碼和效果圖

<!--pages/helloworld/helloworld.wxml-->
<view class='container'>
<text>登錄測試系統(tǒng) 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文件里

效果圖

做完一個(gè)簡單的登錄頁面后阀捅，我們來思考一個(gè)東西胀瞪，一個(gè)登錄界面僅僅由界面構(gòu)成嗎？當(dāng)然不是饲鄙！除了前端的頁面以外凄诞，會(huì)有后臺(tái)的處理和驗(yàn)證。這時(shí)我們應(yīng)該怎么去做呢忍级？這里我們可以使用API接口來實(shí)現(xiàn)這些數(shù)據(jù)的交互處理功能帆谍。

目前來說微信為我們提供了8種API接口：

• 網(wǎng)絡(luò)API
• 媒體API
• 文件API
• 數(shù)據(jù)緩存API
• 位置API
• 設(shè)備信息API
• 界面API
• 微信開放接口

今天我們先來了解一下網(wǎng)絡(luò)API。

網(wǎng)絡(luò)API

網(wǎng)絡(luò)API可以幫助開發(fā)者實(shí)現(xiàn)網(wǎng)絡(luò)URL訪問調(diào)用轴咱、文件上傳下載汛蝙、網(wǎng)絡(luò)套接字使用等功能。目前有10個(gè)接口：

• wx.request(OBJECT) 接口用于發(fā)起HTTPS請求朴肺。
• wx.uploadfile(OBJECT) 接口用于將本地資源上傳至開發(fā)者服務(wù)器窖剑。
• wx.downloadfile(OBJECT) 接口用于下載文件資源到本地。
• wx.connectSocket(OBJECT) 接口用于創(chuàng)建一個(gè)WebSocket連接戈稿。
• wx.onSocketOpen(CALLBACK) 接口用于監(jiān)聽WebSocket連接打開時(shí)間苛吱。
• wx.onSocketError(CALLBACK) 接口用于監(jiān)聽WebSocket錯(cuò)誤。
• wx.sendSocketMessage(OBJECT) 接口通過實(shí)現(xiàn)WebSocket連接發(fā)送數(shù)據(jù)器瘪。
• wx.onSocketMessage(CALLBACK) 接口實(shí)現(xiàn)監(jiān)聽WebSocket連接接受服務(wù)器的消息事件翠储。
• wx.ckiseSocket() 接口用于關(guān)閉WebSocket連接。
• wx.onSocketClose(CALLBACK) 接口用于實(shí)現(xiàn)監(jiān)聽WebSocket關(guān)閉橡疼。

1.RequestTask wx.request(Object object)

發(fā)起 HTTPS 網(wǎng)絡(luò)請求援所。使用前請注意閱讀相關(guān)說明。

參數(shù)

Object object

object.method 的合法值

object.dataType 的合法值

object.responseType 的合法值

object.success 回調(diào)函數(shù)

參數(shù)

Object res

返回值

RequestTask

基礎(chǔ)庫 1.4.0 開始支持滔岳，低版本需做兼容處理杠娱。

請求任務(wù)對象

data 參數(shù)說明

最終發(fā)送給服務(wù)器的數(shù)據(jù)是 String 類型，如果傳入的 data 不是 String 類型谱煤，會(huì)被轉(zhuǎn)換成 String 摊求。轉(zhuǎn)換規(guī)則如下：

• 對于 GET 方法的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

• 對于 POST 方法且 header['content-type'] 為 application/json 的數(shù)據(jù)刘离，會(huì)對數(shù)據(jù)進(jìn)行 JSON 序列化

• 對于 POST 方法且 header['content-type'] 為 application/x-www-form-urlencoded 的數(shù)據(jù)室叉，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

示例代碼

wx.request({
 url: 'test.php', // 僅為示例，并非真實(shí)的接口地址
 data: {
 x: '',
 y: ''
 },
 header: {
 'content-type': 'application/json' // 默認(rèn)值
 },
 success(res) {
 console.log(res.data)
 }
})

注意一下硫惕，wx.request這里使用需要配置域名茧痕，所以就今天就先研究一下文檔配置一下域名。（不知道怎么配置戳這里相關(guān)說明）
順便我的開發(fā)工具也要升級(jí)了恼除，今天先到這里吧~

上一篇：微信開發(fā)之旅———Day4（hello world~）
下一篇：微信開發(fā)之旅———Day6（遠(yuǎn)程請求）