小程序界的Bootstrap WeUI微信原生视觉体验样式库

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

同时它有微信小程序专用版本，项目地址：点击访问 ，我们可以用它快速实现小程序项目的创建及开发。

WeUI的引用：

1、下载后找到目录：\weui-wxss-master\style ，将 weui.wxss 复制到您的小程序项目中。

小程序界的Bootstrap WeUI微信原生视觉体验样式库 小程序 第1张

小程序界的Bootstrap WeUI微信原生视觉体验样式库 小程序 第2张

2、在 app.wxss 或页面 wxss 导入 weui.wxss

/**app.wxss**/
@import 'weui.wxss';

3、WeUI 也提供了单个组件的样式，可以单独引用，方法同上。

小程序界的Bootstrap WeUI微信原生视觉体验样式库 小程序 第3张

4、组件的根元素是 class="page"

<view class="page"></view>

5、页面结构

<view class="page">
    <view class="page__hd">页面主体</view>
    <view class="page__hd">页面主体</view>
</view>

6、除此之外都是按照 weui- 开头后接组件名称，例如 class="weui-footer"

<view class="weui-footer">我是页脚</view>

7、子组件样式，例如 view.weui-footer 组件还有链接和版权信息。

<view class="weui-footer">
<view class="weui-footer_links">
    <navigator url="" class="weui-footer_link">前端资源网</navigator>
</view>
<view class="weui-footer_text">Copyright © W3H5</view>
</view>

8、组件的示例，在小程序中新建个项目，地址指向 \weui-wxss-master\example ，就可以随时查找自己要的组件效果了，需要的效果直接复制粘贴就可以了。

小程序界的Bootstrap WeUI微信原生视觉体验样式库 小程序 第4张