小功能 -- WIFI扫码链接

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

一、 功能介绍

点击选择WiFi生成二维码，使用手机相机扫描二维码，连接WiFi，（当然事先是把密码写进了代码里，只是这样更方便的可以使用WiFi连接，不需要输入密码，避免老被人问WiFi密码，哈哈哈）

二、 安装依赖

2.1 需要引入jquery

在线引入

  <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>

也可以下载安装包到本地引入

2.2 引入qrcode

这里我是下载安装包到本地，百度一下就有了

 <script src="./plug/qrcode.min.js"></script>

三、 项目实战

3.1 分析

拿到一个项目首先最重要的就是进行分析，只要分析的够彻底，写代码就不会太难

先思考我们都需要做什么？

• 首先也是最基础的页面需要呈现，这里我做的一个比较简约的一个页面，连接WiFi也是为了方便不需要什么花里胡哨的操作
• 其次就是最重要的部分js交互部分

首先分为这两大步，具体分析下面具体介绍，

四、 页面设计

页面设计我想应该难不倒大家，这是最基础部分，如果不会，建议好好学习一下html和css

首先分析页面，你心里大致要有个想法，想要做个什么样的页面，也可以拿笔画下来，更直观一些，至少有个大致的方向，然后就是进行页面分析，别看页面简单，分析哪都适用，直接上代码：

html

<main class="wifi">
    <section class="wifi_logo" id="qr">
        <h3>扫码登陆</h3>
    </section>
    <section class="wifi_content">
        <div class="wifi_content_info">
            <p class="wifi_content_title">可用Wi-Fi</p>
            <ul class="wifi_content_items" id="ul-template">
            </ul>
        </div>
    </section>
</main>

html比较简单，初学者看看就好了， 来看看css代码： 这里用的是sass代码，不会sass的小伙伴，可以看看我的sass用法介绍，其实和css差不太多，都能看的懂

css / sass

$head_bg:#fff;
$canvas_bg:#fff;
$body_bg:#fff;
$wifi_bg_all:rgb(245, 245, 245);
$wifi_bg:#fff;
$item_shadow_color:rgba(#f39800, 0.15);
main {
    width: 100%;
}

.wifi {
    max-width: 1000px;
    min-width: 800px;
    margin: auto;
    border-radius: 12px;
    h3 {
        text-align: center;
        font-size: 28px;
        font-weight: 400;
        padding: 20px 0;
    }
    &_logo {
        background-color: $head_bg;
        // height: 600px;
        margin: 0px auto;
        padding-bottom: 120px;
        canvas {
            display: block;
            margin: 0 auto;
            border: 5px dashed #BDC3C7;
            background-color: $canvas_bg;
            box-shadow: 2px 2px 10px rgba($color: #000000, $alpha: 0.2);
        }
        img {
            display: block;
            margin: 0 auto;
        }
    }
    &_content {
        background-color: $body_bg;
        &_info {
            width: 88%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #0000;
            border-radius: 12px;
            background-color: $wifi_bg_all;
            transform: translate( 0, -100px);
            p {
                color: #666;
                font-size: 18px;
                margin-bottom: 10px;
            }
        }
        ul {
            max-height: 255px;
            overflow: scroll;
            overflow-x: hidden;
            margin: 0 auto;
            border: 1px solid #0000;
            border-radius: 12px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            /* 整个滚动条 */
            &::-webkit-scrollbar {
                width: 2px;
                background-color: #ffffff;
                margin-left: 5px;
            }
            /* 滚动条轨道 */
            &::-webkit-scrollbar-track {
                /* 阴影 */
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                background-color: #ffffff;
            }
            /* 滚定条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 30px;
                background-color: #615b5b49;
            }
            &:hover::-webkit-scrollbar {
                display: block;
            }
        }
        &_item {
            width: 28%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            border-radius: 8px;
            margin-top: 20px;
            padding: 0 20px;
            cursor: pointer;
            background-color: $wifi_bg;
            box-shadow: 2px 2px 2px rgba($color: #000000, $alpha: 0.2);
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &:hover {
                box-shadow: 0px 1rem 2rem 0px rgba($item_shadow_color, 0.15);
                transform: translate(0, -5px);
                transition-delay: 0s !important;
            }
        }
    }
}

因为结构比较简单代码也相对简单很多，主要讲讲里面的注意点，头部的生成二维码的位置，使用了qrcode插件后，会自动生成一个canvas标签，所以可以给设置样式，生成二维码之后会生成一个img的标签，所以这里大小不能写死，需要根据js里的宽高来变化，

css里使用了一个动画效果，鼠标经过WiFi有个上浮效果

    &:hover {
                box-shadow: 0px 1rem 2rem 0px rgba($item_shadow_color, 0.15);
                transform: translate(0, -5px);
                transition-delay: 0s !important;
            }

还有一个是滚动条的样式设置，这是网上找的，大家网上也能找得到，感兴趣可以了解

            /* 整个滚动条 */
            &::-webkit-scrollbar {
                width: 2px;
                background-color: #ffffff;
                margin-left: 5px;
            }
            /* 滚动条轨道 */
            &::-webkit-scrollbar-track {
                /* 阴影 */
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                background-color: #ffffff;
            }
            /* 滚定条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 30px;
                background-color: #615b5b49;
            }

五、 页面交互

这里详细介绍分析的重要性，这个功能最核心的也就是js部分了

5.1 分析

首先想想我们需要做什么，我们需要先动态生成wifi按钮，这需要什么，需要一个数组来存放wifi的名称，才能成功动态生成按钮，然后我们的功能是什么，扫码连接，不需要输入密码，那肯定这个数组包含名称，也需要一个密码的数组，这时候就可以用一个对象将wifi的名称和密码存放在一起，这就很清晰了。然后最后才是生成二维码，而生成二维码需要一个固定格式的字符串，也就是下面的text，所以我们要通过循环，将账号密码传入，通过字符串拼接，变成符合格式的字符串传出，我们用一个对象来存放，最后传入生成二维码的函数里面，就将所有数据关联起来了，这么说可能有点乱，每个人思路都不一样，但一定要做的就是分析，这个对写代码很有帮助，结合代码看更容易理解：

5.2 数组的创建

首先我们需要一个对象或两个数组，来存放wifi的账号和密码，具体就不展示了

 const names = ['wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', ]

数组格式应该很简单，然后创建一个map，就是对象，来将传出的格式的字符串接收

     const wifiMap = {}
     for (let i = 0; i < names.length; i++) {
        wifiMap[names[i]] = createWifiOptions(names[i], password[i])
     }
     function createWifiOptions(names, password) {
        return `WIFI:T:WPA;S:${names};P:${password};H:true;`
     }

这里解释一下：首先for循环数组，因为wifiMap是个对象，所以是以key：value的形式存放数据，key的值就是wifi的名称，所以是wifiMap[name[i]] ,而value的值就是，下面createWifiOptions加工后传出的固定格式的字符串,这样wifiMap里的数据就是以“wifi名称”：“固定格式的字符串”这种形式存在

搞定了接下来就使用数据就好了，因为前面都分析过了

5.3 WiFi按钮的动态生成

第一张图上有很多wifi的按钮，这个可以使用js来动态生成

function createLielement(el, options) {
    if (typeof el === 'string') {
        el = document.getElementById(el)
    }
    if (!el || !options || !Array.isArray(options)) return
    let html = ''
    options.forEach(item => {
        html += `<li class="wifi_content_item" data-type="${item}">${item}</li>`
    })
    el.innerHTML = html
}

首先一行一行看，第一行是一个函数传入了两个参数，第一个参数是生成元素的父元素的id，第二个参数是一个数组，存放你要显示的wifi名称，也就是names数组，这样代码就清晰了，下面使用了forEach循环，将元素生成，然后使用innerHTML父元素，来动态生成这些元素

5.4 了解QRCode插件的使用

//生成二维码
const qr = document.querySelector('#qr')
const wifi_items = document.querySelector('.wifi_content_items')
wifi_items.addEventListener('click', (e) => {
        if (e.target.className === 'wifi_content_item') {
            const { type } = e.target.dataset
            makeqr(wifiMap[type])
        }
    })
    //创建QRCode对象
const qrcode = new QRCode(qr, defaultOptions);
//清理--生成二维码
function makeqr(text) {
    qrcode.clear()
    qrcode.makeCode(text)
}

首先使用 new QRCode 创建一个qrcode对象，第一个参数是挂载的位置，就是二维码要生成在哪里，的id挂载就好了，第二个参数是一个对象里面有一些参数，最重要的就是text，这决定了你生成的二维码的样子

 const defaultOptions = {
    width: 320,
    height: 320,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
}

这里把对象里的参数单独抽出来，创建一个对象存放，到时候只需要修改这个对象里的数据就可以， 不需要去代码里面修改内容，然后把这个对象传入就可以了

 const qrcode = new QRCode(qr, defaultOptions);       //qr是html标签的id

这里就完成了qrcode的创建，里面包含两个方法

 qrcode.clear()                     //清除之前生成的二维码
 qrcode.makeCode(text)              //生成新的二维码，传入text值，决定二维码的样子

这样就html里面就会自动生成一个canvas标签，在你挂载的id元素内部

最后将前面写好的数据wifiMap传入makeqr(wifiMap[type])，就相当于text，传入就可以自动生成二维码了，扫码可以不需要输入密码，初学者写的不好，可以提提意见。

后续添加了js代码的优化和详细介绍，可以参考小功能--扫描二维码自动连接WiFi（扩展）

本章完