本文共 2685 字，大约阅读时间需要 8 分钟。
前言
本文研究如何使用微信小程序对模块进行配网，采用业界公认配网率最高，几乎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文件中配置来决定的
· 微信小程序组件开发
组件开发请参考微信官方介绍：
二、使用实例
1.程序分析
1.1 配网界面
以上代码具体效果如下：
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.下载网络调试助手
下载地址：
三、运行
1.设置网络调试助手
打开网络调试助手，绑定20032端口，具体设置如下所示：
2.小程序配网
设置路由器名字和密码
网络助手收到小程序下发的信息后，发送{“status”:“ok”,“type”:“led”}。 四、结语
1.总结：
本节完，实际操作过程中需要注意的地方有如下几点：
(1) 电脑需要屏蔽其他网卡
2.资料获取
如您在使用过程中有任何问题，请加QQ群进一步交流。
QQ交流群：906015840 (备注：物联网项目交流)
公众号：物联网客栈，扫码关注，回复w600即可。
一叶孤沙出品：一沙一世界，一叶一菩提 转载地址：http://bahtz.baihongyu.com/