我们在之前的《浅谈weiphp》一文中介绍了weiphp是进行微信开发很方便的一种框架，今天牛途网络的小编来为大家介绍另一种ui框架，即weui-wxss。
weui-wxss是微信官方提供的ui框架，用起来也很方便。下面是使用weui-wxss框架的流程，希望能帮到有需要的朋友们。
第一步：需要把下载的内容copy到项目中，主要是dist目录下的style目录下的weui.wxss文件。
第二步：在全局的app.wxss文件中引用 ， 注意目录是相对路径
@import style/weui.wxss;
第三步：加class样式
class=page>
lass=page__bd>
name=msgtemp>
class=weui-panel__bd>
url=../detail/detail?id={{id}} class=weui-media-box weui-media-box_appmsg hover-class=weui-cell_active>
class=weui-media-box__hd weui-media-box__hd_in-appmsg>
class=weui-media-box__thumb src={{src}} style=width: 60px; height: 60px;/>
class=weui-media-box__bd weui-media-box__bd_in-appmsg>
class=weui-media-box__title>{{title}}
class=weui-media-box__desc>{{time}}
class=weui-panel weui-panel_access>
class=weui-panel__hd>文章列表
wx:for-items={{msglist}} wx:key={{item.id}}>
class=kind-list__item>
is=msgtemp data={{...item}}/>
class=weui-panel__ft>
class=weui-cell weui-cell_access weui-cell_link>
class=weui-cell__bd>查看更多
class=weui-cell__ft weui-cell__ft_in-access>
class=page__ft>
这个步骤很关键，怎么找到合适的文档呢？weui-wxss是没有文档的，但是它有例子。在下载的内容中，dist目录下的example目录下全部都是例子。我们需要做的是将dist目录导入ide中，然后找到合适的ui。
如图所示，找到合适的页面，然后通过红色框的路径找到对应的wxml文件，把需要的部分copy出来，再结合自己的要求修改。文章列表效果图：
注意点：copy出来的代码，势必会打乱原来代码的结构，这时不能心急，慢慢修改。毕竟这些class的命名是比较长的。