WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
同时它有微信小程序专用版本,项目地址:点击访问 ,我们可以用它快速实现小程序项目的创建及开发。
WeUI的引用:
1、下载后找到目录:\weui-wxss-master\style ,将 weui.wxss 复制到您的小程序项目中。
2、在 app.wxss 或页面 wxss 导入 weui.wxss
/**app.wxss**/ @import 'weui.wxss';
3、WeUI 也提供了单个组件的样式,可以单独引用,方法同上。
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 ,就可以随时查找自己要的组件效果了,需要的效果直接复制粘贴就可以了。
未经允许不得转载:前端资源网 - w3h5 » 小程序界的Bootstrap WeUI微信原生视觉体验样式库