位置:电子教程 > 小程序Weui在线教程 (如果看不到内容请使用360浏览器) 推荐学习资源
WEUI在微信小程序中的使用
项目框架的制作
栏目首页
weui基础组件
当前阅读教程:小程序Weui在线教程 > WEUI在微信小程序中的使用
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 暂无 下一篇: 项目框架的制作

你在使用小程序从零开始开发的时候,一定会想小程序有没有一个UI库,类似于前端中的BootstrapMDSemantic UI这样的框架UI库,如果有的话,一定是一个完美的事情。上帝总是宠着我们,这样的好事情真的有,我的答案是weui.wxss

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

app.wxss内或者需要的页面引入weui.wxss,代码示例

小白教程网www.2d5.net

如下:       

/**app.wxss**/ 

@import  'weui.wxss';

根组件使用class="page”,代码示例

小白教程网www.2d5.net

如下:

<view> </view>

页头和主体使用class="page__xx"(注意是两个下划线) ,代码示例

小白教程网www.2d5.net

如下:

<view>

<view></view>  <!--页头-->

<!--主体-->

<view></view>

</view>

其他组件采用weui-xx,例如class = "weui-flex",代码示例

小白教程网www.2d5.net

如下:

<view id="{{item.id}}" >

组件的子组件样式,

例如weui-flex还有weui-flex__item信息。

注意:子组件样式后面使用的两个下划线,"__"


上一篇: 暂无 下一篇: 项目框架的制作
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)