作者：ITDragon龍，原文(wen)地址

一：文章列表

這章內容先講解 如何使用 template 和 wx:for 完成文章列表的骨架。然后下章談談 如何使用weui-wxss UI框架美化頁面。 
微信小程序官網的api介紹很詳細，//mp.weixin.qq.com/debug/wxadoc/dev/ 。但這也讓我有些無從下手。所以我打算從實戰中學習它。 
在看(kan)這篇文(wen)章前，先請大家，大致了(le)解(jie)微(wei)信小程序(xu)文(wen)檔(dang)。

第一步，先搭好骨架，創建一個list文件夾，用來存放文章列表相關的內容，官方文檔中也強調過：“為了方便開發者減少配置項，我們規定描述頁面的這四個文件（js，wxml，wxss，json）必須具有相同的路徑與文件名。” 
（打(da)開項目(mu)硬盤目(mu)錄(lu)，然后把index文(wen)件夾下的內容copy到list下面，文(wen)件名好(hao)像會自動修改）

第二步，在 app.json 中配置 pages ，"pages/list/list" 不需要添加文件后綴名（模仿index來即可）。 
同時也可以添加底部(bu)tabBar （官方文檔：//mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html）

1. "tabBar": {
2. "list": [{
3. "pagePath": "pages/list/list",
4. "text": "文章列表"
5. }, {
6. "pagePath": "pages/logs/logs",
7. "text": "日志"
8. }]
9. },

配置好后，便(bian)可(ke)以(yi)在list.wxml文件中寫代碼：

1. <!--pages/list/list.wxml-->
2. <text>這是文章列表頁面</text>
3. <!--用name 定義模版-->
4. <template name="msgTemp">
5. <!--
6. 1. scaleToFill : 圖片全部填充顯示，可能導致變形
7. 2. aspectFit ： 圖片全部顯示，以最長邊為準
8. 3. aspectFill ： 圖片全部顯示，以最短邊為準
9. 4. widthFix ： 寬不變，全部顯示圖片
10. -->
11. <view>
12. <image src="{{src}}" mode="scaleToFill"></image>
13. </view>
14. <view>
15. <text>{{title}}</text>
16. <text>{{time}}</text>
17. </view>
18. </template>
19.  
20. <view wx:for="{{msgList}}">
21. <!--用is 使用模版-->
22. <template is="msgTemp" data="{{...item}}"/>
23. </view>

沒有一點點樣式，，，  那我們開始(shi)學習，這段代碼中(zhong)所用(yong)到(dao)的新知(zhi)識，  首先是模(mo)版template的定義(yi)用(yong)name去定義(yi)模(mo)版，然后(hou)用(yong)is去調用(yong)模(mo)版，數(shu)組當前項的變量名默認為item所以data里(li)面(mian)可(ke)以用(yong){{...item}}來輸出數(shu)據(ju)（官方文檔(dang)(dang)：//mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html）  然后(hou)用(yong)wx-for 循環打印，運行時可(ke)能(neng)有警告(gao) （官方文檔(dang)(dang)：//mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html）

最后(hou)一步是在list.js中(zhong)定義數(shu)據  在Page 下 data中(zhong)添(tian)加 （圖片(pian)路(lu)徑(jing)是相對路(lu)徑(jing)，根(gen)據自己(ji)的情況(kuang)修改）

1. data:{
2. msgList:[
3. {id:1,title:"標題一",time:"2017-3-5 23:01:59",src:"../../images/wechatHL.png"},
4. {id:2,title:"標題二",time:"2017-3-5 23:02:59",src:"../../images/wechatHL.png"},
5. {id:3,title:"標題三",time:"2017-3-5 23:03:59",src:"../../images/wechatHL.png"},
6. {id:4,title:"標題四",time:"2017-3-5 23:04:59",src:"../../images/wechatHL.png"}
7. ]
8. },

 最后編譯運行可以看到(dao)(dao)數據(ju)都打印出來(lai)了。比較簡(jian)單，只是會(hui)很丑(chou)陋，下一(yi)站(zhan)會(hui)用(yong)到(dao)(dao)weui-wess中的面(mian)板去修飾(shi)文章列表(biao)頁面(mian)

 注意(yi)事(shi)項：  1.json格式，很(hen)容易在最(zui)后一條數據加(jia)上“，” 逗號；  2.“{{}}” 變量忘(wang)記添加(jia)該符號  3.刪(shan)(shan)除或回車的(de)時(shi)候，可能會把<>刪(shan)(shan)掉，操作時(shi)需注意(yi)。

二：UI框架

上一章(zhang)節(jie)，談了文章(zhang)列(lie)表的(de)結(jie)構搭建，現(xian)在(zai)要給(gei)它披(pi)上嫁衣，我選擇的(de)是weui-wxss這款官(guan)方(fang)提供的(de)UI框架(jia)。下一章(zhang)便要談談如(ru)何使用(yong) wx.request 動態獲取數據(ju)  weui-wxss是微(wei)信官(guan)方(fang)提供的(de)ui框架(jia)，用(yong)起(qi)來也很方(fang)便（copy）。下載地(di)址：//github.com/weui/weui-wxss

第一步(bu)：需(xu)要(yao)把下載的內容(rong)copy到項(xiang)目中，主要(yao)是dist目錄(lu)下的style目錄(lu)下的weui.wxss文(wen)件。

第二步：在全局的app.wxss文(wen)件中(zhong)引用 ， 注(zhu)意(yi)目錄是相對路徑

1. @import "style/weui.wxss";

第三步：加class樣式(shi)

1. <view class="page">
2. <view class="page__bd">
3. <!--用name 定義模版-->
4. <template name="msgTemp">
5. <!--
6. 1. scaleToFill : 圖片全部填充顯示，可能導致變形 默認
7. 2. aspectFit ： 圖片全部顯示，以最長邊為準
8. 3. aspectFill ： 圖片全部顯示，以最短邊為準
9. 4. widthFix ： 寬不變，全部顯示圖片
10. -->
11. <view class="weui-panel__bd">
12. <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
13. <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
14. <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
15. </view>
16. <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
17. <view class="weui-media-box__title">{{title}}</view>
18. <view class="weui-media-box__desc">{{time}}</view>
19. </view>
20. </navigator>
21. </view>
22. </template>
23.  
24. <view class="weui-panel weui-panel_access">
25. <view class="weui-panel__hd">文章列表</view>
26. <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
27. <view class="kind-list__item">
28. <!--用is 使用模版-->
29. <template is="msgTemp" data="{{...item}}"/>
30. </view>
31. </view>
32. <view class="weui-panel__ft">
33. <view class="weui-cell weui-cell_access weui-cell_link">
34. <view class="weui-cell__bd">查看更多</view>
35. <view class="weui-cell__ft weui-cell__ft_in-access"></view>
36. </view>
37. </view>
38. </view>
39. </view>
40. <view class="page__ft">
41. </view>
42. </view>

這(zhe)個步驟很(hen)關鍵，怎么找到合適的(de)(de)文(wen)檔(dang)(dang)呢？weui-wxss是沒有文(wen)檔(dang)(dang)的(de)(de)，但是它有例(li)子(zi)。在下(xia)載的(de)(de)內容(rong)中，dist目錄(lu)下(xia)的(de)(de)example目錄(lu)下(xia)全部都是例(li)子(zi)。我們需(xu)要做的(de)(de)是將dist目錄(lu)導入IDE中，然后找到合適的(de)(de)UI。 

如(ru)圖所示，找(zhao)到(dao)合適的(de)(de)頁面，然后(hou)通過紅色框(kuang)的(de)(de)路徑找(zhao)到(dao)對(dui)應的(de)(de)wxml文(wen)件，把(ba)需要的(de)(de)部分copy出來(lai)，再結合自己的(de)(de)要求修改(gai)。  文(wen)章列表(biao)效果圖：

注意點：  1.copy出來(lai)的(de)代碼(ma)，勢必會打亂原來(lai)代碼(ma)的(de)結構，這時不(bu)能(neng)心急，慢慢修改。畢竟(jing)這些class的(de)命名是比較長(chang)的(de)。