微信小程序開發入門之共享賬本（二）
接著上一篇
首先，把調試器界面關掉
為什麼？因為太佔地方！
因為暫時用不到
頁面上說"點擊獲取openid"，但是點了卻說失敗了是不是
解釋的已經是相當清楚了
就是在文件目錄的cloud function下的login上右鍵，選擇創建並部署：雲端安裝
再點一下獲取openid是不是就成功了
先不說這個，後面用到再提。現在先把開發工具自動生成的一些東西刪掉，當然你也可以選擇移動到其他地方，當參考代碼（我就是這麼做的）。
在開發工具裡沒法進行多選，所以要到資源管理器裡操作。選一個文件夾右鍵-硬盤打開
回到第一層目錄下
把cloudfunctions、miniprogram/pages、miniprogram/components下的文件夾都刪掉，miniprogram/images下的圖片以及miniprogram/style文件夾也刪掉，都沒什麼用
然後回到開發工具，將app.json中的page裡的內容全都刪除，可以順便改一下標題文字
然後在miniprogram文件夾上右鍵-新建目錄，起個名字，如index
然後在index目錄上右鍵-新建Page，起個名字，如index
完成結果如下
點開index.wxml，刪掉原有內容，輸入一段有意義的話，如 Hello，World
完成後點擊編譯或者ctrl+s保存（會自動編譯）
模擬器展示結果
畫畫要打底稿，我們也先給賬單分個區，先上圖
這是模擬器顯示的圖，可不是切的圖
再看代碼，index.wxml
賬單記錄區
當前代碼裡只用到了兩個組件、，成對的標籤表示一個組件，是一個容器組件，可以用來放這樣的其他組件，也可以自己相互嵌套；是用來展示文字信息的組件。組件信息可以查看微信小程序的組件文檔
https://developers.weixin.qq.com/miniprogram/dev/component/
組件有很多公共屬性
class是用來指定當前組件的樣式名稱，對應樣式將寫在wxss文件裡，再看index.wxss文件內容
/* miniprogram/pages/index/index.wxss */
Page {
width: 100%;
height: 100%;
background-color: white;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main, .footer {
width: 100%;
display: flex;
align-items: center;
}
.main {
flex: 7;
justify-content: center;
}
.footer {
flex: 1;
justify-content: space-around;
border-top: 1px solid rgba(0, 0, 0, 0.4);
}
.menu, .balances {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.menu {
border-left: 1px solid rgba(0, 0, 0, 0.4);
}
這裡面以"."開頭的都是index.wxml文件中的組件對應的class名稱，其後{}中定義了組件的樣式。
Page定義了當前頁面的樣式。
可以把小程序當成一個盒子，Page就是放在盒子裡的一塊板子，把寬度width和高度height定義成100%就是讓板子的大小和盒子一樣，然後我們往板子上畫東西就是添加組件，組件的樣式規定組件的大小和位置等信息。
其中display: flex;是一種叫做"彈性盒子"的樣式，可以很方便的將定義了該樣式的組件裡的內容進行對齊，align-items: center;和justify-content: center;就表示將其中的內容水平和垂直方向都居中；border用來定義邊框信息。
樣式就是CSS ，指層疊樣式表 (Cascading Style Sheets)，可以在
https://www.runoob.com/css/css-tutorial.html 中學習相關知識
