WeUI源码简析

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库，主要内容包括表单、基础组件、操作反馈、导航和搜索以及层级规范。WeUI源码是对用户开放的，用户可以根据自身需求对WeUI框架进行调用，极大降低了开发者的工作量，提高了开发效率。笔者作为初学前端的菜鸟，选取了Button、Toast和Tabbar浅谈一下对WeUI源码的理解，如果理解有误，欢迎大家批评指正。

WeUI官方链接

1. Button按钮

<a href="javascript:" class="weui-btn weui-btn_primary">页面主操作</a>
<a href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading">
<i class="weui-loading"></i>页面主操作</a>

这是两个button按钮的HTML代码，是用了两个超链接，分别对应class:weui-btn、weui-btn_primary、weui-btn_loading,此处类的命名使用了BEM规范，接下来我们跟着类名去查找它们的CSS样式。

.weui-btn {
    position: relative;//相对定位
    display: block;//设置块级元素
    width: 184px;//宽度
    margin-left: auto;//左边距适应
    margin-right: auto;//右边距适应
    padding: 8px 24px;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 17px;//文字大小为17px
    text-align: center;//文本居中
    text-decoration: none;
    color: #fff;
    line-height: 1.41176471;
    border-radius: 4px;//圆角为4px
    overflow: hidden;//超出则隐藏
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

基础样式我就不赘述了(代码已做好注释)，这里主要介绍：box-sizing: border-box意思是元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 -webkit-tap-highlight-color: rgba(0,0,0,0)设置了点击后背景高亮 (注:webkit是苹果浏览器Safari和谷歌浏览器Chrome引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节)。

.weui-loading{
    background-image: url(./loading.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    background-size: 100%;
    top: 12px;
    left: 25px;
    animation: circle 2.5s linear infinite;
    }
    @keyframes circle{
        from{
            -webkit-transform: rotate(0deg);
            }
        to{
            -webkit-transform: rotate(360deg);
            }
        }

值得注意的是，标签里有个i标签实现加载的效果，这里用了animation动画实现。

2. Toast弹出式提示

这是微信标志性的弹出组件，接下来我们来看看它的源码实现。

<div class="page__bd page__bd_spacing">
    <a href="javascript:" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
    
<!--BEGIN toast-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
    </div>
</div>
<!--end toast-->

<script type="text/javascript">
    // toast
    $(function(){
        var $toast = $('#toast');
        $('#showToast').on('click', function(){
            if ($toast.css('display') != 'none') return;
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        });
    });

Toast主要用于临时显示一些信息，并且在2秒钟之后会自动消失。这里需要使用JavaScript进行调用，在JavaScript里先获取按钮的id"#showToast"和弹出事件的id"#toast"的dom结构。点击按钮后触发点击事件，弹出框淡入，淡入效果呈现时间为0.1秒，2秒后淡出，淡出效果呈现时间同样为0.1秒。

3. Tabbar底部导航

Tabbar，通常用作Web应用主界面的底部导航。每一个功能包含icon图标和文字描述。

<script type="text/html" id="tpl_tabbar">
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-tab__panel">

            </div>
            <div class="weui-tabbar">
                <div class="weui-tabbar__item weui-bar__item_on">
                    <div style="display: inline-block; position: relative;">
                        <img src="./images/icon_tabbar.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/icon_tabbar.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/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute; top: 0; right: -6px;"></span>
                    </div>
                    <p class="weui-tabbar__label">发现</p>
                </div>
                <div class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">我</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
</script>

此处.weui-tab是icon图标外层容器，撑满了父容器的高度，内部4个功能的图标类名都是.weui-tabbar__item为.weui_tabber的子元素，表示一个导航区，一般不少于2个，也不多于5个。 关于 active 态，开发者根据需要，给当前激活的 .weui_tabbar_item 添加标示的 .weui_bar_item_on 类名，然后控制文字颜色和图标变化。

.weui-tabbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;//设置弹性布局
  position: relative;//相对定位
  z-index: 500;//堆叠权重设置为500
  background-color: #f7f7f7;
  background-color: var(--weui-BG-1);
}

.weui-tabbar:before {
  content: " ";
  position: absolute;//针对父容器绝对定位
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-top: 1px solid var(--weui-FG-3);
  color: rgba(0,0,0,0.1);//透明度
  color: var(--weui-FG-3);
  -webkit-transform-origin: 0 0
  transform-origin: 0 0;;//设置旋转点的基本位置
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);//在Y轴缩放
}

参考来源： WeUI官方

Tip:如果读者想要使用WeUI某个组件，可以直接去WeUI选取相应的源码进行修改，然后链入CSS在线样式即可，css在线样式为weui.io/style/weui.…

最后

由于WeUI组件和源码过多，这边只选取了3个组件进行源码简析，笔者是第一次尝试在掘金发表文章，有诸多不足之处，欢迎大家批评指出。如果觉得文章不错，记得点赞哦！谢谢！