小功能--扫描二维码自动连接WiFi

一、功能介绍

点击选择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)) returnlet 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.datasetmakeqr(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代码的优化和详细介绍，

本章完