第一步：需要把下載的內容copy到專案中，主要是dist目錄下的style目錄下的weui.wxss檔案。

第二步：在全域性的app.wxss檔案中引用 ， 注意目錄是相對路徑

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

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

如圖所示，找到合適的頁面，然後通過紅色框的路徑找到對應的wxml檔案，把需要的部分copy出來，再結合自己的要求修改。

文章列表效果圖：

注意點：

1.copy出來的程式碼，勢必會打亂原來程式碼的結構，這時不能心急，慢慢修改。畢竟這些class的命名是比較長的。