weui使用教程及部分源码解析

Weui是什么

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。简单的理解就是有一套自己的样式规范和一组常用的JS插件可供使用，可以满足65-70%的移动页面的开发。

WeUI页面层级

用于规范WeUI页面元素所属层级、层级顺序及组合规范。分别为内容层，菜单层，遮罩层和弹窗内容层。

部分结构源码解读

以官方demo为例，依次为body（无定位-高度100%）>container（absolute-固定定位-限制y轴）>page。内容层class为page（absolute-固定定位-Y轴不限）。这个结构会导致部分页面滚动类的插件$(window).on(“scroll”)失效。因为实际的滚动层为page。

菜单层官方DEMO则是使用的tab布局。层级依次为page__bd>weui-tab>weui-tab__panel | weui-tabbar（菜单层） 。且weui-tab使用的flex布局并flex-direction: column（元素内容垂直排列）。weui-tab__panel 则是 flex:1，scrool为auto（保证内容可以完全输出切不影响底部的菜单层）。weui-tabbar则使用绝对定位，这样可以保证菜单层一直高于内容层。

遮罩层和弹窗内容层则是分别对应#dialogs(在page内与page__bd同级)>weui-mask（fixed-固定定位-1000）和weui-dialog | weui-actionsheet | weui-half-screen-dialog （fixed-固定定位-5000）等。固定定位保证了内容能完全覆盖在菜单层和内容层。Js部分则是更多的使用了fadeIn和fadeOut，先对的简单粗暴。

weui样式组件

样式组件包含了大部分网页所需的表单，按钮，输入框。以及grid布局结构，徽章等样式。这里就不过多的赘述了。、

分享一些CSS的黑科技部分吧。首先是0.5px的border。weui的解决方案是

    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);
    left: 16px;
    z-index: 2;

简单来说就是y轴缩放了0.5倍，将1px缩小为了0.5px。

还有现在流行的深夜模式则是使用了data-weui-theme=”dark” or data-weui-theme=”light“，并且还使用到了CSS变量  赋予深夜模式和白天模式不同的色值。这算是现在主流的解决方案，但是个人不常用深夜模式，因为觉得意义不大。

然后是图标，怎么使用图标字体。weui则是简单粗暴的使用了-webkit-mask-image，图片都是base64转过的图。而且提前设置了图标的大小尺寸。如果未设可能导致div显示不出来。

example.js部分源码解读

首先是图片预加载。

function preload() {
    $(window).on('load', () => {
      const imgList = [
        './images/layers/content.png',
        './images/layers/navigation.png',
        './images/layers/popout.png',
        './images/layers/transparent.gif',
      ];
      for (let i = 0, len = imgList.length; i < len; ++i) {
        new Image().src = imgList[i];
      }
    });
  }

还有就是移动页面点击延迟修复

function fastClick() {
    const supportTouch = (function () {
      try {
        document.createEvent('TouchEvent');
        return true;
      } catch (e) {
        return false;
      }
    }());
    const _old$On = $.fn.on;

    $.fn.on = function () {
      if (/click/.test(arguments[0]) && typeof arguments[1] === 'function' && supportTouch) {
        let touchStartY; const callback = arguments[1];
        _old$On.apply(this, ['touchstart', function (e) {
          touchStartY = e.changedTouches[0].clientY;
        }]);
        _old$On.apply(this, ['touchend', function (e) {
          if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10) return;

          e.preventDefault();
          callback.apply(this, [e]);
        }]);
      } else {
        _old$On.apply(this, arguments);
      }
      return this;
    };
  }

以及CSS结构导致的Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

 function androidInputBugFix() {
    if (/Android/gi.test(navigator.userAgent)) {
      window.addEventListener('resize', () => {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          window.setTimeout(() => {
            document.activeElement.scrollIntoViewIfNeeded();
          }, 0);
        }
      });
    }
  }

总结

weui是一套不错的移动端CSS基础结构，只能满足基础样式统一。如果做复杂的交互等，还是有很多需要补充的地方，虽然之前有jquery weui 但是感觉功能上还是不够用，比如幻灯片，电梯楼层，视频播放等，这些都不满足，其他大厂则是基于vue或React，出的同样有很多优秀框架，例如阿里的 ant design 和  京东的 NutUI  还有 美团的 elment 都是不错的解决方案。