HTML5扫码连接WiFi

HTML5 的定位接口、二维码扫描和蓝牙通信,组合起来用在“扫一扫连 WiFi”场景里,还挺有意思的。

HTML5 的Geolocation API是个老朋友了,专门用来拿用户的地理位置。你只要用navigator.geolocation.getCurrentPosition(),就能轻松拿到经纬度,识别用户在哪儿,适配周边 WiFi 信息。

配合Web Intents API和摄像头,就可以搞“扫一扫”了。你可以让网页唤起相机,扫个二维码,把SSID和密码解析出来,搞个接口自动连上 WiFi。微信那一套其实就挺像这样运作的。

还有Web Bluetooth API,虽然它不是直接连 WiFi 的,但在智能设备那块儿,先用蓝牙配对,控制设备连 WiFi,也蛮常见。像一些智能音箱、门锁什么的,初始配置靠它搞定。

你要是做后台页面,推荐看看HTML5 Admin Template。这些模板大多响应式、功能齐全,整合了定位、扫码啥的也不少,适合快速搭建 WiFi 控制后台,挺省事的。

如果你想动手试试看,下面这些资源可以帮上忙。尤其是那个基于 HTML5 的二维码扫描方案,讲得比较清楚,结合起来用,效果还不错。

如果你是做场所 WiFi 接入的,比如酒店、咖啡厅,整一个 HTML5 页面让用户扫二维码自动连接 WiFi,体验真心好。开发也不难,维护方便,推荐一试。

rar
HTML5 Admin Template.rar 预估大小:44个文件
folder
HTML5 Admin Template 文件夹
file
index.html 12KB
folder
images 文件夹
file
btn_view_site.png 1KB
file
icn_jump_back.png 489B
file
secondary_bar.png 263B
file
icn_audio.png 643B
file
sidebar_divider.png 203B
file
icn_new_article.png 290B
file
secondary_bar_shadow.png 498B
file
icn_folder.png 309B
file
icn_add_user.png 462B
file
icn_trash.png 284B
file
icn_categories.png 251B
file
icn_tags.png 292B
file
sidebar.png 2KB
file
icn_security.png 465B
file
table_sorter_header.png 239B
file
module_footer_bg.png 233B
file
icn_alert_warning.png 418B
file
icn_settings.png 272B
file
post_message.png 1KB
file
icn_search.png 429B
file
icn_user.png 489B
file
icn_alert_error.png 386B
file
icn_alert_success.png 347B
file
breadcrumb_divider.png 210B
file
header_shadow.png 1KB
file
icn_edit.png 357B
file
icn_logout.png 443B
file
icn_edit_article.png 467B
file
icn_video.png 311B
file
icn_alert_info.png 434B
file
btn_submit.png 217B
file
icn_photo.png 336B
file
btn_submit_2.png 214B
file
sidebar_shadow.png 204B
file
icn_profile.png 485B
file
header_bg.png 3KB
file
icn_view_users.png 528B
folder
js 文件夹
file
hideshow.js 1KB
file
jquery-1.5.2.min.js 84KB
file
jquery.tablesorter.min.js 16KB
file
jquery.equalHeight.js 655B
folder
css 文件夹
file
layout.css 16KB
file
ie.css 653B
rar 文件大小:63.45KB