当前阅读教程:小程序Weui在线教程 > WEUI在微信小程序中的使用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 暂无 | 下一篇: 项目框架的制作 |
你在使用小程序从零开始开发的时候,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库,如果有的话,一定是一个完美的事情。上帝总是宠着我们,这样的好事情真的有,我的答案是weui.wxss。 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。 在app.wxss内或者需要的页面引入weui.wxss,代码示例 如下: /**app.wxss**/ @import 'weui.wxss'; 根组件使用class="page”,代码示例 如下: <view> </view> 页头和主体使用class="page__xx"(注意是两个下划线) ,代码示例 如下: <view> <view></view> <!--页头--> <!--主体--> <view></view> </view> 其他组件采用weui-xx,例如class = "weui-flex",代码示例 如下: <view id="{{item.id}}" > 组件的子组件样式, 例如weui-flex还有weui-flex__item信息。 注意:子组件样式后面使用的两个下划线,"__"。 |
|
上一篇: 暂无 | 下一篇: 项目框架的制作 |