做为一个前端路上的探寻者,想必很多人入手的时候很想能快速的掌握一个容易看出效果的技术。 WEUI则是一个无论你是否实力怎么样,都能很快上手的框架。
WEUI框架介绍
WEUI是一套小程序的UI框架,所谓的UI框架,就是一套界面设计方案,里面有许多组件,我们只需要把它们拼接起来,就可以快速实现我们想要的界面,它也会让我们的小程序更加美观。简单来说呢,weui就是一套已经写好了的css样式,我们需要哪一个html结构,只需要加进去,就会生成一个比较美观的结构。
[WEUI](https://weui.io/)
WEUI框架的使用
1.导入框架
首先因为WEUI框架就是一份写好了的CSS样式,那么我们要怎么拿到这份样式呢?我们直接百度bootcdn传送门:https://www.bootcdn.cn/
当然除了这个地方有weui链接之外,还有github等等也有,笔者就不多介绍了
复制好这个
<link>
标签就可以去html文件里粘贴了
紧接着就是在weui上面查找我们所需的组件。下面呢 介绍一个例子方便大家更快理解
2.举例
第一个页面
在第一个界面呢,我们需要的是一个搜索框,几个重复的div放着图片和文字,最下面还有一个导航栏。
我们直接去https://www.bootcdn.cn/
找到我们需要的或者类似的。你会发现在搜索相关-Search Bar里面找到一个
然后,我们右键检查,将包着这整个搜索框的最外层div全部复制下来 右键Edit ad HTML 复制 粘贴到我们的html文件当中 然后你会发现我们的网页里面已经有了跟这个一模一样的搜索框 接下来相信大家应该会发现,在weui里面找不到适合放商品的组件,因为weui也不是万能的,这五个div就由自己来写吧,笔者在这里就不展示了。
这个页面还需要底部的导航,我们继续去weui里面找寻,在导航相关-Tabbar里面发现了一个特别类似的,这里大家就会想到,把这个拿过来删掉其中一个内层div,再换一下图标不就好啦。
没错,但是我呢要提醒大家的是,在把这些组件代码复制过来的时候,我们需要自己用div将它们包起来,以便于待会我们自行添加一些css样式修改
下面是导航代码,操作步骤跟上面一致
<div class="weui-tabbar">
<div class="weui-tabbar__item weui-bar__item_on">
<div style="display: inline-block; position: relative;">
<img src="./images/shengnvguo.png" alt="" class="weui-tabbar__icon">
<span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
</div>
<p class="weui-tabbar__label">商城</p>
</div>
<div class="weui-tabbar__item">
<img src="./images/dangao.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">购物车</p>
</div>
<div class="weui-tabbar__item">
<div style="display: inline-block; position: relative;">
<img src="./images/kafei.png" alt="" class="weui-tabbar__icon">
</div>
<p class="weui-tabbar__label">我的</p>
</div>
</div>
第二个页面
头部“我的”,简单就不用去寻找了,自己写,然后第二行是头像加一些文字,我们去weui里面找,在基础组件-Badge中,有一个符合的,我们将它的代码扒下来
<div class="weui-tab__panel tab">
<div class="mine_title">我的</div>
<div class="weui-cell">
<div class="weui-cell__hd avatar">
<img src="./images/avatar.jpg">
</div>
<div class="weui-cell__bd">
<p>联系人名称</p>
<p style="font-size: 13px; color: #888;">摘要信息</p>
</div>
</div>
</div>
在这里我们把weui最外面的那个div也取了下来,就是为了待会在里面放下面的东西,因为格式都很类似
做到这里呢,大家已经知道了WEUI框架的操作简单,省时省力,但是不可能做到跟我们想象中一模一样,必须自己再添加一些样式,不过这对于大家来说也是非常简单的。
总结
WEUI框架适合前端新手入门,在我们使用其中一些组件时,我们尽量自己给它们包上一个div,可以让我们修改它们时更加简单便捷。所以读者如果没有学习过WEUI框架,可以尽快入手,你会发现它真的是一个特别简单且实用的移动端框架,如果大家需要我这份例子,可以找我