第五章: 微信小程序WebUI组件的引入和使用(详细)

WebUI 百科的介绍

WebUI 官方的介绍:

WeUI作为一个开源的移动端UI框架，是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计。WeUI各种组件的样式和微信一样，能够很好地和微信兼容，大大加强了用户的体验度。

引入WebUI的详细步骤:

第一步:在GitHub克隆WebUI开源代码

链接:https://github.com/yuanqingjian/weui-wxss 大家下载克隆到本地

第二步:找到webui.wxss文件,并copy到小程序下的根目录

第三步:在app.wxss配置文件中引用@import weui.wxss

接下来教大家如何使用WebUI

1.根组件使用: class=“page”

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

2.页面骨架组件使用: class=“page__xxx”

<view class="page">
    <!--页头-->
    <view class="page__hd"></view>
    <!--主体-->
    <view class="page__bd"></view>
    <!--没有页脚-->
</view>

3.其他组件以weui-开头+ 组件名称，例如class=“weui-footer”

<view class="weui-footer">我是页脚</view>

4.组件的子组件样式 :例如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 ©程序猫 </view>
</view>

您的鼓励就是我最大的创作动力！
如果大家觉得这篇博客不错的话,请多多点赞支持哦!
作者: 程序猫A建仔
QQ: 651405985
博客:https://blog.csdn.net/weixin_44504146