WIFI模块开发教程之W600网络篇7：微信小程序AP配网①

前言

本文研究如何使用微信小程序对模块进行配网，采用业界公认配网率最高，几乎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即可。

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