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 都是不错的解决方案。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本站所有内容均由李哒胖子原创,码字不易,欢迎打赏。如需在使用过程中有遇到任何问题,可以随时联系本人+V18003862798!!!

给TA打赏
共{{data.count}}人
人已打赏
前端笔记

如何在网站引用特殊字体

2022-7-22 14:19:47

前端笔记

谷歌浏览器无法自动翻译问题如何解决

2022-10-7 11:01:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧