小功能--扫描二维码自动连接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代码：
这里