扫码就能测试小程序airkiss配网






以前是使用微信公众号 airkiss配网

现在微信小程序支持 wifi softap配网 airkiss配网 SmartConfig配网 8266配网

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

…

.

.

…

.

.

.

.

.

前言
本文研究如何使用微信小程序对模块进行配网，采用业界公认配网率最高，几乎100%的配网方式：softAP配网。
一、理论基础
1.softAP配网原理
softAP方式，IoT设备工作与AP模式，手机直连IoT设备，将目标路由器的SSID/Password传过去。该方式是最传统的配网方式，不考虑终端兼容性问题，配网成功率100%。
缺点是用户操作复杂。用户需要连接IoT设备热点，然后手动输入SSID/Password。
softAP配网总体流程如下：
  (1)  热点命名
    softAP方式配网，模块起来一个热点LED-XXXX (XXXX为MAC地址后四位)
    
  (2) 热点配置：
    local_ip: 192.168.10.1
    Net_mask: 255.255.255.0
    Gateway: 192.168.10.1
    udp_port: 20032
    
  (3) 设备热点配网：
    APP--------->Device
    {
      "ssid":"xxxx",
      "passwd":"xxxx"
    }
  
  (4) 设备配网结果通知：
    Device--------->APP
    {
      "status":"xxxx",
      "mac":"xxxx",
      "type":"xxxx"   //产品类型
    }

2.微信小程序基本开发
· 微信小程序有四种类型的文件
js  -------- JavaScrip文件
json ------- 项目配置文件，负责窗口颜色等等
wxml ------- 类似HTML文件
wxss ------- 类似CSS文件

在根目录下用app来命名的这四中类型的文件，就是程序入口文件。
a. app.json
必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，你只需创建这个文件，里面写个大括号就行，以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。
b. app.js
必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写，以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
c. app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件
d. app.wxml
这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
· 微信小程序组件开发
组件开发请参考微信官方介绍：
https://developers.weixin.qq.com/miniprogram/dev/component/
二、使用实例
1.程序分析
1.1 配网界面
  <view class="section">
    <input  class="config" bindinput="bindKeyInputSsid" placeholder="请输入ssid"/>
    <input  class="config" bindinput="bindKeyInputPwd" password type="text" placeholder="请输入密码"/>

    <button class="section__title" type="primary" bindtap="startConfig"> 开始配网 </button>

    <textarea class="res_text" name="textarea">{{config_res}}</textarea>
  </view>

以上代码具体效果如下：


1.2 js配网函数
  startConfig: function(e) {
    console.log("start config");
    const udp = wx.createUDPSocket()
    const locationPort = udp.bind()
    var object = {};
    var that = this;
    object['ssid'] = that.data.ssid;
    object['password'] = that.data.password;

    var json = JSON.stringify(object);//JSON.stringify()

    udp.send({
      address: '192.168.1.255',
      port: 20032,
      message: json
    })

    // receive
    udp.onListening(function(res){
      console.log('监听中...')
      console.log(res)
    })

    udp.onMessage(function(res){
      console.log(res)
      let unit8Arr = new Uint8Array(res.message.data);
      let encodedString = String.fromCharCode.apply(null, unit8Arr),
      decodedString = decodeURIComponent(escape((encodedString)));//没有这一步中文会乱码

      console.log('str===' + decodedString)
      that.setData({
        config_res: decodedString
      })

    })
  }

小程序配网页面点击配网后，会调用微信提供的UDP Socket接口进行配网。
微信官网示例如下：
  const udp = wx.createUDPSocket()
  udp.bind()
  udp.send({
    address: '192.168.193.2',
    port: 8848,
    message: 'hello, how are you'
  })

· createUDPSocket()创建udp socket
· bind()绑定本地接口，这个接口是随机的，暂时不支持设置port
· send()发送数据到20032端口，本文使用网络调试助手代替实际设备
3.下载网络调试助手
下载地址：http://soft.onlinedown.net/soft/971066.htm
三、运行
1.设置网络调试助手
打开网络调试助手，绑定20032端口，具体设置如下所示：


2.小程序配网
设置路由器名字和密码



网络助手收到小程序下发的信息后，发送{“status”:“ok”,“type”:“led”}。
四、结语
1.总结：
本节完，实际操作过程中需要注意的地方有如下几点：
(1) 电脑需要屏蔽其他网卡
2.资料获取
如您在使用过程中有任何问题，请加QQ群进一步交流。
QQ交流群：906015840 (备注：物联网项目交流)
公众号：物联网客栈，扫码关注，回复w600即可。



一叶孤沙出品：一沙一世界，一叶一菩提

wifi_link_tool esp8266通用配网库 （arduino）
库地址：点击进入GitHub
这是一个为esp8266设计的通用配网库

该库免费提供 使用请注明出处 允许毕业设计使用本库

配套视频：点击进入哔哩哔哩


普通配网流程 1.链接WiFi 2.自动弹出配网或打开浏览器访问6.6.6.6 3.输入WiFi密码
微信小程序配网 使用微信扫描二维码 打开小程序 点击通用设备配网  输入WiFi密码

关于配网操作

默认情况下 下拉gpio0(nodemcu D3可以按flash按键)5秒 重置已有配网 第一次使用该库请重置一次或用官方工具擦除flash
默认情况下 状态指示灯gpio02（nodemcu D4） 也就是12f的板载led
指示灯常亮 未链接网络 处于未配置 或 无法链接网络
指示灯闪烁 正在抹除配置
指示灯熄灭 联网正常

微信小程序配网
使用微信扫一扫进行加载小程序

小程页面



点击通用设备配网 即可弹出配网 如未弹出请检查文件系统是否上传成功！

点击设备列表可搜索局域网中可被搜索的设备
普通配网
扫描二维码直接链接或手动链接 SSID：wifi_link_tool
该二维码支持国内大部分手机相机 （例如使用miui相机）


链接成功后 会弹出配网web 如为弹出 请检查设备支持性（安卓4.4.4以上大部分支持 ios 11+）和文件系统是否上传成功！
安装库wif link tool 库
安装库本身

请保证已经安装了 arduino esp8266 sdk （已在V2.5.0测试）
在github上下载本库
打开arduino  项目—>加载库—>添加.zip库 —>选择刚才下载的zip导入 (手动库安装目录Arduino\libraries\WiFi_link_tool)

安装文件系统

下载文件系统上传工具 工具地址
导入工具参考目录 ******/tools/ESP8266FS/tool/esp8266fs.jar
重启arduino

测试库

打开测试demo 文件—>示例—>wifi_link_tool—>demo
选择串口及波特率
选择合适的flash size


点击验证 验证库是否能正常编译
检查文件系统上传工具  工具下会显示 ESP8266 sketch Data Upload 证明安装成功
上传文件系统 工具 —>ESP8266 sketch Data Upload

库基础配置及api

配置设备

在setup中配置设备io名称

    rstb=D3;  
    //重置io  
    stateled=D4;  
    //指示灯io  
    Hostname = "ESP8266";  
    //设备名称 允许中文名称 不建议太长  
    wxscan=true;  
    //是否被小程序发现设备 开启意味该设备具有后台 true开启 false关闭  

启动加载函数 必须存在
load()；//启动加载

pant函数维持系统正常运行 请保证在loop 函数的第一行 保证系统稳定性
pant()；//维持函数


link()函数 (有值发回)获取当前WiFi配置状态

注意请在load()函数之后或在loop区块中使用

返回类型 int 返回内容 0 当前未配置WiFi 1 以配置WiFi

作用 识别当前是否已经配网实现数码管或oled屏幕内容的显示与切换

示例：

if(link()){/设备以配置网络触发内容/}else{/设备未配置网络触发内容/}



局域网中获得设备名称API(用来配合网关或设备通信)

该api以集成进库中

作用 获得设备设备名称 方便设备联动

请求方法 http get 返回类型 String

地址 http://x.x.x.x/opera?opera=sb


自定义http get请求

语法：


webServer.on("/<请求地址>", <处理函数>);  

请写在setup函数中 load函数之后

处理函数请自定义一个新函数

请参考demo中get请求处理

自定义添加web

默认情况 库自动添加 config.html(配网web) index.html(设备主页)

将自定义的html 放入Data目录下（将demo另存为 在另存目录就会出现data目录）

语法：

  webServer.on("/<请求地址>", <加载函数>);  

请写在setup函数中 load函数之后

加载函数 语法
 void <加载函数>() {
	File file = SPIFFS.open("/<自定义html文件名>", "r");
	webServer.streamFile(file, "text/html");
	file.close();
}

请参考demo中加载多个web
测试环境  sdk版本：2.5.0 arduino版本1.8.8

当下各种支持WIFI模块的硬件终端越来越普遍，但要想与之进行数据交互需要先给终端连接上周边WIFI，这样才可正常通过互联网接收与发送数据，这种终端一般分为 3 类，即：可视化操作配网（窗口） 、WIFI连接配网（Socket） 和 蓝牙通讯配网（BLE）
可视化配网非常简单，终端提供触摸屏与系统手动即可完成配网（一般是基于Android系统的二次开发）。还有一种无触摸屏需要通过 WIFI 或蓝牙与终端连接，发送约定格式的十六进制数据，内含配网需要的相关数据，如：WIFI名称、密码、服务器地址、端口，等等信息，终端解析数据后连接 WIFI，本文主要讲解第 3 种方式蓝牙通讯的完整流程
整体流程分为3个步骤：搜索并选择周边 WIFI - 搜索并连接目标设备蓝牙 - 填写选中 WIFI 密码并通过蓝牙发送
完整源码，可私聊我获取。若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

搜索并选择周边 WIFI
 /**
  * 初始化Wifi模块
  */
 onStartWifi:function(){
    wx.startWifi({
      success: (res) => {
        if(res.errCode == 0){
          // 初始化成功
          that.onUserLocationScope();
        }else{
          // 初始化失败
          that.showModal(res.errMsg);
        }
      },
      fail: (res) => {
        that.showModal(res.errMsg);
      }
    })
 },

 /**
  * 获取scope.userLocation授权
  */
 onUserLocationScope:function(){
  // 获取当前已授权项列表
  wx.getSetting({
    success:(res) => {
      // 如果未获取 userLocation 授权则请求授权
      if (!res.authSetting['scope.userLocation']) {
        wx.authorize({
          scope: 'scope.userLocation',
          success: (res) => { // 同意授权
            that.onGetWifiList();
          },
          fail: (res) => { // 拒绝授权
            that.showModal("您已拒绝授权，蓝牙配网无法继续进行，点击设置可重新授权")
            wx.openSetting({})
          }
        })
      }else{ // 如果已获取则直接搜索 WIFI 列表
        that.onGetWifiList();
      }
    }
  })
 },

 /**
  * 获取Wifi列表
  */
 onGetWifiList:function(){
  wx.getWifiList({
    success: (res) => {
      // 获取 WIFI 列表成功
      if(res.errCode == 0){
        wx.onGetWifiList(function (CALLBACK) {
          // 原始的 WIFI 列表
          let wifiList = CALLBACK.wifiList;
          // 处理后 WIFI 列表（去重并且只保留名称 => SSID）
          let wifiSSID = [];
          // 去重并且只保留名称
          wifiList.forEach(wifi => {
            if(wifi.SSID == ''){
              wifiSSID.unshift("未能获取到此 WIFI 的命名")
              return;
            }
            wifiSSID.indexOf(wifi.SSID) == -1 ? wifiSSID.unshift(wifi.SSID) : '';          
          })
          // push 显示
          that.setData({
            mainData: wifiSSID
          })
        });
      }else{ // 获取 WIFI 列表失败
        that.showModal(res.errMsg)
      }
    },
    fail: (res) => {
      that.showModal(res.errMsg)
    }
  })
 },


搜索并连接目标设备蓝牙
  /**
   * 开始搜寻附近的蓝牙设备（此操作比较耗费系统资源，请在搜索并连接到设备后调用 wx.stopBluetoothDevicesDiscovery方法停止搜索）
   */
  startBluetoothDevicesDiscovery: function () {
    if(_discoveryStarted) {
      return;
    }
    _discoveryStarted = true
    wx.startBluetoothDevicesDiscovery({
      services: serviceUUID, //如果设置此参数，则只搜索广播包有对应 uuid 的主服务的蓝牙设备。
      allowDuplicatesKey: false,
      success: (res) => {
        console.log('蓝牙搜索 success :', res)
      },
      fail(res) {
        console.log('蓝牙搜索 fail :', res)
      }
    })
  },

  /**
   * 监听寻找新设备事件
   * 搜索匹配设备后，自动连接设备(filterDeviceName为自动连接的蓝牙名，模糊判断)
   */
  onBluetoothDeviceFound: function () {
    wx.onBluetoothDeviceFound((res) => {
      res.devices.forEach(device => {
        // 转换后, 得出相关数据
        var hexStr = that.ab2hex(device.advertisData);
        // 通过蓝牙名称匹配设备
        let deviceName = device.name.toUpperCase();
        // 判断是否为指定连接名称的蓝牙
        if ((deviceName.indexOf(filterDeviceName) != -1) && isnotExist) {
          // 默认匹配第一个
          isnotExist = false; 
          deviceId = device.deviceId;
          // 停止搜寻附近的蓝牙外围设备。
          that.stopBluetoothDevicesDiscovery();
          // 连接指定蓝牙
          that.createBLEConnection(deviceName);
        }
      })
    })
  },


填写选中 WIFI 密码并通过蓝牙发送
  /**
   * 蓝牙设备配网数据处理
   */
  bleConfigEvent: function () {

    // 蓝牙搜索的结果
    if (util.isEmpty(deviceId)) {
      util.toastError("请先搜索蓝牙设备");
      return;
    }

    // 即将传输的数据
    var cell = {
      "time": "xxxxxxxxxxx",
      "data": {
        "cmd": 10,
        "ssid": "WIFI 名称",
        "password": "WIFI 密码",
        "server": "服务器IP",
        "portApi": "服务器端口",
        "portMqtt": "1883",
        "ip": "",
        "subnet": "",
        "router": ""
      }
    }

    // 发送验证字符串（根据终端通讯协议规则决定是否需要）
    var signet = "signet";
    var signetBuffer = this.string2buffer(signet)
    that.sendBLEData(signetBuffer,0,false);

    // 发送正式配网数据
    var buffer = this.string2buffer(JSON.stringify(cell))
    setTimeout(function () {
      that.sendBLEData(buffer, 0, true);
    }, 1000)
  },

  /**
   * 发送数据
   * @param buffer 需要发送的数据体
   * @param close 是否为最终数据
  */
  sendBLEData: function (buffer,close) {
    wx.writeBLECharacteristicValue({
      deviceId: _deviceId,
      serviceId: _serviceId,
      characteristicId: _characteristicId,
      value: buffer,
      success: function (res) {
        if (close){
          util.toastError('配网成功');
        }
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },


完整源码，可私聊我获取。若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！