微信Weui教程

Weui项目的引用

时间:2018/12/20 14:45:41  作者:互联网  来源:网络转载  查看:7506  评论:0
内容摘要:项目引用你在使用小程序从零开始开发的时候,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库,如果有的话,一定是一个完美的事情。上帝总是宠着我们,这样的好事情真的有,我的答案是weui.wxss。WeUI概述 WeUI ...

项目引用

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

WeUI概述

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

weui.wxss的引入

app.wxss内或者需要的页面引入weui.wxss       

/**app.wxss**/ 

@import  'weui.wxss';

根组件使用class="page  

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

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

<view class="page">

<view class="page__hd"></view>  <!--页头-->

<!--主体-->

<view class="page__bd"></view>

</view>

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

<view id="{{item.id}}" class="weui-flex" >

组件的子组件样式,

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

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

 


欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通

  Weui项目的引用

上一篇:weui-实战项目整体框架的制作教程
下一篇:没有了
相关文章
相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |