微信開發之旅———Day4（hello world~）
之前兩天研究了一下小程式和頁面的框架問題。理論居多吧，今天我們來實戰一波，自己動手做一個頁面出來。
第一步 整理環境
首先新建一個專案（或者用之前那個也可以）然後應該是這樣的一個場景。
刪除本身模板自帶的頁面，我們重頭來寫
新專案進入的頁面
刪完後的檔案目錄應該是這樣的
目錄結構
同時可能會出現這樣一個報錯
報錯
有沒有同學想起來，之前我們提到過，每新增一個頁面，就需要到app.json裡面進行一次註冊（最新版本的開發環境會自動幫我們註冊），所以刪除頁面時也需要去那邊把之前註冊好的頁面刪掉。開啟app.json，刪除這兩行。
刪除註冊頁面
刪除完仍然會有報錯，不過沒事，我們馬上就要新建一個頁面了
清空頁面註冊後找不到頁面會進行報錯
第二步 建立頁面
右鍵單擊pages，新建一個目錄，然後命名helloworld（可以隨便起），然後點選新建好的helloworld目錄，新建頁面，推薦命名與資料夾名相同，也是helloworld。
目錄結構
這時我們開始寫我們的第一個頁面。做一個最簡單登入頁面吧
首先開啟helloworld.wxml檔案
寫下這樣的程式碼
<!--pages/helloworld/helloworld.wxml--> 使用者名稱：<input/> 密碼：<input /> <button>登入</button>
然後Ctrl+s進行編譯，可以看到這樣的畫面
編譯後畫面
這時我們的第一個頁面的展示部分就做出來了。儘管他不是那麼的標準，不過為了最快的上手，先拋開不是非常標準的細節部分。對於使用到的標籤簡單解釋一下，<input>是輸入框標籤，使用這個標籤可以建立一個輸入框，<button>是按鈕標籤，使用和這個標籤可以建立一個按鈕，這裡不做過多的講解，可以戳這裡進行詳細學習 官方文件
這時我們可以點選使用者名稱和密碼下方的輸入框區域隨意輸入些資料嘗試一下。還可以點選登入按鈕（雖然只會閃一下，沒有其他任何動作）。
（這裡可能會碰到一個bug，是電腦模擬器的bug，有時候點選輸入框會出現點不上的情況，這是因為電腦無法聚焦，可以通過滑鼠長按來解決）
之前有提到過，wxml和wxss只負責頁面的內容和佈局問題，那頁面的動作誰來負責呢，我們發生跳轉，顯示等等一系列動作是在哪裡處理的呢？回顧一下！實在js檔案裡面進行處理的。
這時我們來寫頁面邏輯，開啟js檔案
// pages/helloworld/helloworld.js
Page({
/**
* 頁面的初始資料
*/
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檔案也要發生一點小改動
<!--pages/helloworld/helloworld.wxml--> 使用者名稱：<input bindinput='usernameInput'/> 密碼：<input bindinput='userpasswordInput'/> <button bindtap='loginBtn'>登入</button>
簡單解釋一下，wxml的改動，bindinput是input標籤的一個屬性值，可以設定一個函式，通過這個函式來呼叫輸入框內的值，這一點在js檔案中的 this.setData({username : e.detail.value}) 有體現到。e就是這個輸入事件。
而bindtap的意思就是點選事件的意思，當你點選這個按鈕，就會執行裡面的函式，然後看看我們js檔案裡的loginBtn函式裡面寫了什麼，從console.log輸出了登入成功和使用者名稱以及密碼。
注：console.log是用於在控制檯輸出的一條語句
第三步 執行
然後看一下執行效果
輸入資料
執行結果
至此，我們的第一個頁面就成功了！