微信小程序入门二UI框架

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

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

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

 @import "style/weui.wxss";

第三步：加class样式

 <view class="page">
     <view class="page__bd">

         <template name="msgTemp">

                         <template is="msgTemp" data="{{...item}}"/>
                     view>
                 view>
             <view class="weui-panel__ft">
                 <view class="weui-cell weui-cell_access weui-cell_link">
                     <view class="weui-cell__bd">查看更多view>
                     <view class="weui-cell__ft weui-cell__ft_in-access">view>
                 view>
             view>
         view>
     view>
     <view class="page__ft">
     view>
 view>

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

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

文章列表效果图：

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