之前兩天研究了一下小程序和頁面的框架問題匕累。理論居多吧坞靶，今天我們來實戰(zhàn)一波辽剧，自己動手做一個頁面出來排截。
第一步 整理環(huán)境
首先新建一個項目（或者用之前那個也可以）然后應(yīng)該是這樣的一個場景。
刪除本身模板自帶的頁面挠蛉，我們重頭來寫
刪完后的文件目錄應(yīng)該是這樣的
同時可能會出現(xiàn)這樣一個報錯
有沒有同學(xué)想起來祭示，之前我們提到過，每新增一個頁面谴古，就需要到app.json里面進(jìn)行一次注冊（最新版本的開發(fā)環(huán)境會自動幫我們注冊）质涛，所以刪除頁面時也需要去那邊把之前注冊好的頁面刪掉。打開app.json掰担，刪除這兩行汇陆。
刪除完仍然會有報錯，不過沒事恩敌，我們馬上就要新建一個頁面了
第二步 創(chuàng)建頁面
右鍵單擊pages瞬测，新建一個目錄横媚，然后命名helloworld（可以隨便起）纠炮，然后點擊新建好的helloworld目錄月趟，新建頁面，推薦命名與文件夾名相同恢口，也是helloworld孝宗。
這時我們開始寫我們的第一個頁面。做一個最簡單登錄頁面吧
首先打開helloworld.wxml文件
寫下這樣的代碼
<!--pages/helloworld/helloworld.wxml-->
用戶名：<input />
密碼：<input />
<button>登錄</button>
這時我們的第一個頁面的展示部分就做出來了因妇。盡管他不是那么的標(biāo)準(zhǔn)，不過為了最快的上手猿诸，先拋開不是非常標(biāo)準(zhǔn)的細(xì)節(jié)部分婚被。對于使用到的標(biāo)簽簡單解釋一下，<input>是輸入框標(biāo)簽梳虽，使用這個標(biāo)簽可以創(chuàng)建一個輸入框址芯，<button>是按鈕標(biāo)簽，使用和這個標(biāo)簽可以創(chuàng)建一個按鈕窜觉，這里不做過多的講解谷炸，可以戳這里進(jìn)行詳細(xì)學(xué)習(xí)官方文檔
這時我們可以點擊用戶名和密碼下方的輸入框區(qū)域隨意輸入些數(shù)據(jù)嘗試一下。還可以點擊登錄按鈕（雖然只會閃一下禀挫，沒有其他任何動作）旬陡。
（這里可能會碰到一個bug，是電腦模擬器的bug语婴，有時候點擊輸入框會出現(xiàn)點不上的情況描孟，這是因為電腦無法聚焦，可以通過鼠標(biāo)長按來解決）
之前有提到過腻格，wxml和wxss只負(fù)責(zé)頁面的內(nèi)容和布局問題画拾，那頁面的動作誰來負(fù)責(zé)呢，我們發(fā)生跳轉(zhuǎn)菜职，顯示等等一系列動作是在哪里處理的呢青抛？回顧一下！實在js文件里面進(jìn)行處理的酬核。
這時我們來寫頁面邏輯蜜另，打開js文件
// pages/helloworld/helloworld.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
username:null,
userpassword:null
},
//輸入框信息獲取
usernameInput: function(e){
this.setData({
username : e.detail.value
})
},
userpasswordInput: function (e) {
this.setData({
userpassword: e.detail.value
})
},
//登錄事件
loginBtn :function(){
console.log("登陸成功");
console.log('username:'+this.data.username);
console.log('userpassword:' +this.data.userpassword);
}
})
同時wxml文件也要發(fā)生一點小改動
<!--pages/helloworld/helloworld.wxml-->
用戶名：<input bindinput='usernameInput'/>
密碼：<input bindinput='userpasswordInput'/>
<button bindtap='loginBtn'>登錄</button>
簡單解釋一下，wxml的改動嫡意，bindinput是input標(biāo)簽的一個屬性值举瑰，可以設(shè)置一個函數(shù)，通過這個函數(shù)來調(diào)用輸入框內(nèi)的值蔬螟，這一點在js文件中的 this.setData({username : e.detail.value}) 有體現(xiàn)到此迅。e就是這個輸入事件。
而bindtap的意思就是點擊事件的意思，當(dāng)你點擊這個按鈕耸序，就會執(zhí)行里面的函數(shù)忍些，然后看看我們js文件里的loginBtn函數(shù)里面寫了什么，從console.log輸出了登錄成功和用戶名以及密碼坎怪。
注：console.log是用于在控制臺輸出的一條語句
第三步 運行
然后看一下運行效果
至此罢坝，我們的第一個頁面就成功了！
上一篇：微信開發(fā)之旅———Day3（小程序框架——下）
下一篇：微信開發(fā)之旅———Day5（網(wǎng)絡(luò)API）
