微信小程序weui在线入门教程-Weui项目的引用

时间:2024-03-31 09:53:06

项目引用

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

WeUI概述

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

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项目的引用