微信小程序入门二UI框架

weui-wxss是微信官方提供的ui框架，用起来也很方便（copy）。下载地址：https://github.com/weui/weui-wxss

第一步：需要把下载的内容copy到项目中，主要是dist目录下的style目录下的weui.wxss文件。

第二步：在全局的app.wxss文件中引用 ， 注意目录是相对路径

[html] view plain copy

 

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

第三步：加class样式

[html] view plain copy

 

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>  

这个步骤很关键，怎么找到合适的文档呢？weui-wxss是没有文档的，但是它有例子。在下载的内容中，dist目录下的example目录下全部都是例子。我们需要做的是将dist目录导入IDE中，然后找到合适的UI。

如图所示，找到合适的页面，然后通过红色框的路径找到对应的wxml文件，把需要的部分copy出来，再结合自己的要求修改。

文章列表效果图：

http://blog.csdn.net/qq_19558705/article/details/60576157