前端小白必入手的一个框架—WEUI

6,866 阅读4分钟

做为一个前端路上的探寻者,想必很多人入手的时候很想能快速的掌握一个容易看出效果的技术。 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框架,可以尽快入手,你会发现它真的是一个特别简单且实用的移动端框架,如果大家需要我这份例子,可以找我