原文網(wǎng)址：https://blog.csdn.net/gsc1456/article/details/80493735
最近，想了解下微信小程序的開發(fā)矫夷。
[圖片上傳失敗...(image-6ce0c-1552448338184)]
看了下官網(wǎng)的組件和API介紹漱受，想通過一個(gè)簡單的列表展示返顺，來學(xué)習(xí)下如何開發(fā)微信小程序肥隆。
先來看下最后的效果（使用的測試數(shù)據(jù)，后期可改為http請(qǐng)求返回的數(shù)據(jù)）贴唇。
[圖片上傳失敗...(image-e7f570-1552448338184)]
底部的UI在app.json配置tabBar屬性
具體的實(shí)現(xiàn)如下：
框架的視圖層由 WXML 與 WXSS 編寫搀绣，由組件來進(jìn)行展示。
定義一個(gè)模塊戳气，新建一個(gè)page链患，如Index，會(huì)生成四個(gè)文件瓶您，分別如index.js麻捻；index.json；index.wxml呀袱；index.wxss贸毕。然后需要在app.json里配置pages，如 page/Index/index压鉴。
wxml (WeiXin Markup language) 用于描述頁面的結(jié)構(gòu)崖咨，包含一個(gè)視圖容器，如view油吭，scroll-view，或者一些基礎(chǔ)內(nèi)容及表單組件等署拟。更多支持的組件詳見微信小程序開發(fā)組件介紹婉宰。
wxss (WeiXin Style Sheet) 用于描述頁面的樣式，相當(dāng)于網(wǎng)頁的CSS文件推穷。
.js 后綴的是腳本文件心包，.json 后綴的文件是配置文件
首先，使用<block>配合<wx:for><wx:if>等標(biāo)簽及常用組件完成簡單的列表結(jié)構(gòu)馒铃，使用hidden控制元素的顯示與隱藏蟹腾，具體如圖：
[圖片上傳失敗...(image-bdebcc-1552448338184)]
里面用到的css，在index.wxss文件里定義如下圖：
[圖片上傳失敗...(image-33d2ba-1552448338184)]
該模板的整體風(fēng)格在index.json文件里進(jìn)行配置区宇，這里簡單設(shè)置了窗口的背景色娃殖，導(dǎo)航欄標(biāo)題文字內(nèi)容及顏色，如下：
[圖片上傳失敗...(image-e05da4-1552448338184)]
測試數(shù)據(jù)议谷，定義在index.js里的data下炉爆，即 頁面的初始數(shù)據(jù)：
