WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
同时它有微信小程序专用版本,项目地址:点击访问 ,我们可以用它快速实现小程序项目的创建及开发。
WeUI的引用:
1、下载后找到目录:weui-wxss-masterstyle ,将 weui.wxss 复制到您的小程序项目中。
2、在 app.wxss 或页面 wxss 导入 weui.wxss
代码语言:javascript复制/**app.wxss**/
@import 'weui.wxss';
3、WeUI 也提供了单个组件的样式,可以单独引用,方法同上。
4、组件的根元素是 class="page"
代码语言:javascript复制<view class="page"></view>
5、页面结构
代码语言:javascript复制<view class="page">
<view class="page__hd">页面主体</view>
<view class="page__hd">页面主体</view>
</view>
6、除此之外都是按照 weui- 开头后接组件名称,例如 class="weui-footer"
代码语言:javascript复制<view class="weui-footer">我是页脚</view>
7、子组件样式,例如 view.weui-footer 组件还有链接和版权信息。
代码语言:javascript复制<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-masterexample ,就可以随时查找自己要的组件效果了,需要的效果直接复制粘贴就可以了。