【HarmonyOS HiSpark Wi-Fi IoT 套件试用连载】放大招啦,卸载你的配网app,wifiiot弹出式配网了解一下

本文来源电子发烧友社区，作者：cszzlsw， 帖子地址：https://bbs.elecfans.com/jishu_2037265_1_1.html


1.前情提要
继上次重磅发布对接腾讯云的帖子之后,地址在这:https://bbs.elecfans.com/jishu_2032877_1_1.html
有一个问题没有解决,那就是wifi联网问题,本期就来介绍一下不要任何app,直接用系统原生的功能实现配网,快来连接一下吧

2.初衷
传统的配网方式一般是搭配一个专用的app,操作比较繁琐,用户体验不太好,弹出式配网就是为了解决这个问题开发的,而且有种很酷炫的感觉而且学会了原理,把网页文件一换,换成一个创意动画神马的哄女朋友开心也是不错的

3.原理
其实弹出式配网的原理并不复杂,整体的原理是先创建一个热点让手机连接到热点,然后开启dns劫持,利用web服务器将访问地址跳转,然后把预先准备好的网页文件发送到连接热点的设备上,在网页上提供按钮点击操作读取wifi列表,然后输入密码,发送到板子去连接,保存,连接的设备可以是手机,电脑等等,连接完成之后就可以重启开发板执行真正的任务了.

4.实现
1).参考了润和仓库里的demo代码很快就创建好了热点:
https://gitee.com/hihopeorg/HarmonyOS-IoT-Application-Development/tree/master/04_wifi
创建热点之后测试一下手机能连接热点第一步就成功了
2).参考润和仓库的udp和tcp的代码demo也比较快的就搞好了dns劫持和web服务器:
https://gitee.com/hihopeorg/HarmonyOS-IoT-Application-Development/tree/master/05_network,这一步做好之后就可以出现弹窗了
3).弹窗出现之后下一步就是下发网页文件到手机,这一步着实花费了一些时间,倒不是网页的发送,而是网页文件的存储,整整花了我5,6个小时之久,到处问人也没问到,查阅了海量的官方文档,最后还是误打误撞(串口抓包研究固件下载流程发现的)找到了方法,具体是什么大家在视频中也可以看到
4).后面就是用户点击手机上的网页来搜索网络和配网了,板子接收到手机发过来的用户名和密码就尝试连接对应的wifi,如果连接成功就保存起来,然后重启板子就行了,这里还有一个问题就是配网的ssid和密码的保存和读取,这里有两种方法,一种是利用鸿蒙自带的kv系统来实现,第二种就是直接读写flash,这里我采用的是kv系统,之前参考了连老师的帖子:https://zhuanlan.zhihu.com/p/274411574
发现不行,根本没有存储到flash中去,后面我自己在代码里找,终于找到了真正的接口,见图片:

在代码中是这样:
 
如果是直接用官方的flash存储是长这样:

5).到这里我们的弹出式配网就已经完成了,后面就是添加板子启动的时候读取kv系统里面有没有保存账号密码,如果没有就启动热点模式让用户配网,如果有就直接用sta模式连接对应的wifi,然后该干啥干啥就行了
6).如果想重新配网就搞一个按钮长按恢复出厂就行,这个不用我来说了吧,大家应该都会.

怎么样,是不是挺简单的,具体的细节我就不过多码字了,这里我就直接把视频放出来,大家感受一下最终的效果就行.

5.来谈谈弹出式配网的小缺点:
1.跟手机兼容性有关,可能有的手机不会自动弹出配网界面,而是在系统通知栏出现一个通知,然后手机点击通知才能跳转到对应的网页,关于手机的兼容报告还有待大家共同测试,毕竟个人力量有限
2.需要占用比较大的flash空间,因为弹出式配网有一个网页要存储在芯片上,然后这个网页因为渲染和js脚本会占用比较多的字节,对于flash吃紧的设备不是那么友好

6.最后
有感兴趣想了解的同学可以跟我或者版主绿波电龙联系,视大家的意愿再公开源码,以免被yxh盗用