介绍一下伟大的WEUI

WEUI是一套由腾讯微信团队开发的UI组件库，它提供了与微信原生视觉体验一致的基础样式库。这个组件库是专门为微信Web开发设计的，特别适用于构建在微信上运行的H5应用和小程序。是一个成熟稳定且体验优雅的组件库。

weui 组件库属于微信生态的一部分输入link标签，引入weui.min.css（压缩版本）会发现该页面杂乱无章，因为本来就不是给你看的，是给浏览器机器阅读的浏览器识别不需要换行，能够理解css，是产品上线后的版本，压缩后的优点为快，非压缩版本为开发阶段制作，可供阅读，其中链接中的CDN代表着内容分发网络，能找到离我们最近的一台服务器，快速提供内容

html 复制代码

<link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">

开始实操制作导航栏和搜索栏

导航栏的搭建

框架很简单，大盒子装三小块

html 复制代码

<!-- navbar -->
  <div class="weui-tab">
    <div class="weui-navbar">
        <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
        <a href="#" class="weui-navbar__item">热点</a>
        <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
</div>

接着实现点击效果（详细介绍每个步骤，包含多个方法，多种优化）

获取所有类名为weui-navbar__item的元素，并存储在tabs变量中。
为tabs集合添加点击事件监听器，当点击任一导航项时，会在控制台打印'---'，用于测试或调试。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">
</head>
<body> 
  <!-- navbar -->
  <div class="weui-tab">
    <div class="weui-navbar">
        <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
        <a href="#" class="weui-navbar__item">热点</a>
        <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
</div>
<!-- searchbar -->
<!-- news-list -->
<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  tabs.addEventListener('click', function() {
   console.log('---');
  })
</script>
</body>
</html>

运行后会发现问题，无法同时选取所有a进行点击事件监听，因此这段代码是错误的

为解决无法同时选取所有的问题，将.weui-navbar__item所有事件遍历一遍，再进行监听

html 复制代码

<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  for (var i = 0; i < tabs.length; i++){
            tabs[i].addEventListener('click', function() {
                console.log(i);
            });
        }
</script>

但点击发现点击事件输出结果都为3

因为for循环为同步代码，循环至3便结束循环，而点击事件为异步

为了使输出的结果为各自循环到的值（即0、1、2），引入闭包使内部函数可以访问到外部函数的变量，使用立即执行函数，会循环形成三个作用域（i都不是同一个i）

html 复制代码

<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  for (var i = 0; i < tabs.length; i++){
            (function(i) {
                tabs[i].addEventListener('click', function() {
                    console.log(i);
                });
            })(i)
        }
</script>

只不过这种做法代码行数有点多，还可以更加精简一点

优化一下 ：let 和 {} 可直接形成块作用域，能形成三个块作用域，JS按照作用域查找分别能查找到对应的.weui-navbar__item

html 复制代码

<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  for (let i = 0; i < tabs.length; i++){
                tabs[i].addEventListener('click', function() {
                    console.log(i);
        })
      }
</script>

tab 切换

事件监听在dom元素上，而不是集合上

循环事件监听中，拿到下标

for 同步

event 异步

添加作用域

es5 使用立即执行闭包，会重新声明变量

es6 使用块级作用域

实现导航栏的切换效果，每次点击导航项，都能确保只有一个导航项处于选中状态。

当用户点击任一导航项时，首先获取当前页面上具有weui-bar__item_on类的元素（即当前选中的导航项）。
移除这个元素上的weui-bar__item_on类，从而取消其选中状态。
然后，给被点击的导航项添加weui-bar__item_on类，以显示新的选中状态。

html 复制代码

<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  for (let i = 0; i < tabs.length; i++){
                tabs[i].addEventListener('click', function() {
                if (this.classList.contains('weui-bar__item_on')){
                    return;//判断当前元素的class列表中是否包含`weui-bar__item_on`，如果包含则不执行后续操作
                }
                  document
                    .querySelector('.weui-bar__item_on')
                    .classList//获取页面中第一个具有 `weui-bar__item_on` 类的元素的所有类名集合
                    .remove('weui-bar__item_on')
                this.classList.add('weui-bar__item_on')
        })
      }
</script>

this 事件元素:

classList.+ add contains remove等方法

点击当前已选中 return去掉

但当前方法使用了三个事件监听，占用内存较大为了优化内存，将监听事件设置在外部同时监听（即设置在父类.weui-navbar）

设置了两个监听事件，第一个为子类，第二个为父类，点击tabs[0]时会同时触发两个事件，这时候两个事件由冒泡由内向外执行，先执行内部的子元素，再执行外部的父元素，因此输出的是1、2

html 复制代码

<script>
  const tabs = document.querySelectorAll('.weui-navbar__item')
  const navbar = document.querySelector('.weui-navbar')
  tabs[0].addEventListener('click', function(event){
            console.log('1');
        })
  navbar.addEventListener('click', function(event){
      console.log('2');
      })
</script>

从最小的单位开始冒泡，冒泡至event.target.nodeName

html 复制代码

<script>
  const navbar = document.querySelector('.weui-navbar')
  navbar.addEventListener('click', function(event){
      console.log(event.target.nodeName == 'A');
      })
</script>

当点击事件发生时：

获取事件的目标元素（可能是导航栏中的链接）。
如果目标元素是<a>标签，阻止其默认的点击行为（如跳转）
为了防止点击事件跳转至其他页面，设置event.preventDefault();阻止默认事件

html 复制代码

<script>
  const navbar = document.querySelector('.weui-navbar')
  navbar.addEventListener('click', function(event){
            const target = event.target//获取事件的目标元素（可能是导航栏中的链接）
            if(event.target.nodeName == 'A'){
                event.preventDefault();//阻止默认事件
                if (target.classList.contains('weui-bar__item_on')){
                    return;
                }
                document
                    .querySelector('.weui-bar__item_on')
                    .classList
                    .remove('weui-bar__item_on')
                target.classList.add('weui-bar__item_on')
            }
        })
</script>

那么网页中顶部链接的导航区域制作完成

接下来制作搜索栏区域

创建form搜索表单，包含搜索框和相关元素。可以通过监听表单的click事件来执行搜索操作，而无需直接绑定到每个输入元素上
搜索框内部的容器，包括搜索图标、输入框和清除按钮

html 复制代码

<div class="weui-search-bar" id="search_bar">
  <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>搜索的一个小图标
          <input type="text" id="search_input" class="weui-search-bar__input" placeholder="搜索">搜索的输入框
          <a href="#" class="weui-icon-clear"></a>右侧清除文本的按钮
      </div>
  </form>
</div>

然而运行会发现页面中没有显现出搜索图标、输入框和清除按钮，这是因为weui组件自动设置了元素不可见

在工作者状态下打开页面代码，找到visibility：hidden取消勾选就能看到了

监听input创建focus事件（即聚焦事件）

html 复制代码

<div class="weui-search-bar" id="search_bar">
  <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="text" id="search_input" class="weui-search-bar__input" placeholder="搜索">
          <a href="#" class="weui-icon-clear"></a>
      </div>
      <label id= "search_text" for= "search_input" class="weui-search-bar__label">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
      </label>
  </form>
  <a href="" class="weui-search-bar__cancel-btn">取消</a>
</div>

<script>
  const searchBar = document.querySelector('.weui-search-bar')
     document
        .querySelector('.weui-search-bar__label')
        .addEventListener('click', function() {
            searchBar.classList.add('weui-search-bar_focusing')
        })

  const searchInput = document.querySelector('#search_input')
  searchInput.addEventListener('focus', function(event) {
        console.log('聚焦了')
      })
</script>

为什么不直接使用一个input直接搜索呢？还要创建聚焦事件呢？

weui组件的伟大使命： 服务于所有人，让盲人也要能用使用。而创建的无障碍浏览，使用到读屏器（如果只设置一个input那么盲人无法判断是否点击到了，使用聚焦之后便解决了这个问题）创建了label 可以被读屏器读出来当他们点击到label时反馈到label服务的输入快框search_input（即for中的属性）

为了在用户点击input时聚焦，就得消除visibility：hidden的隐藏效果

html 复制代码

const searchBar = document.querySelector('.weui-search-bar')
  document
        .querySelector('.weui-search-bar__label')
        .addEventListener('click', function() {
            searchBar.classList.add('weui-search-bar_focusing')
        })

最后导航栏和搜索栏就完成了（附上源码）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">
</head>
<body> 
  <!-- navbar -->
  <div class="weui-tab">
    <div class="weui-navbar">
        <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
        <a href="#" class="weui-navbar__item">热点</a>
        <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
</div>
<!-- searchbar -->
<div class="weui-search-bar" id="search_bar">
  <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="text" id="search_input" class="weui-search-bar__input" placeholder="搜索">
          <a href="#" class="weui-icon-clear"></a>
      </div>
      <label id= "search_text" for= "search_input" class="weui-search-bar__label">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
      </label>
  </form>
  <a href="" class="weui-search-bar__cancel-btn">取消</a>
</div>
<!-- news-list -->
<script>
  const navbar = document.querySelector('.weui-navbar')
  const searchBar = document.querySelector('.weui-search-bar')
  document
        .querySelector('.weui-search-bar__label')
        .addEventListener('click', function() {
            searchBar.classList.add('weui-search-bar_focusing')
        })

  const searchInput = document.querySelector('#search_input')
  searchInput.addEventListener('focus', function(event) {
        console.log('聚焦了')
      })
  
  navbar.addEventListener('click', function(event){
            const target = event.target
            if(event.target.nodeName == 'A'){
                event.preventDefault();//阻止默认事件
                if (target.classList.contains('weui-bar__item_on')){
                    return;
                }
                document
                    .querySelector('.weui-bar__item_on')
                    .classList
                    .remove('weui-bar__item_on')
                target.classList.add('weui-bar__item_on')
            }
        })
</script>
</body>
</html>

结语

大家也可以去试试不使用WEUI组件库时，这串代码运行的样子

相差甚大，是因为WEUI提供了与微信原生视觉体验一致的基础样式库，以便我们快速构建美观，简洁的页面，因此学会使用WEUI组件可以大大提升我们的编程效率，更加快速得制作出高级优质得作品

WEUI生态的使用，快速制作页面导航栏和搜索栏

介绍一下伟大的WEUI

开始实操制作导航栏和搜索栏

导航栏的搭建

接下来制作搜索栏区域

为什么不直接使用一个input直接搜索呢？还要创建聚焦事件呢？

结语