Show HN: 扫描文本快速连接 WiFi，无需手动输入

Wify

一个 React Native 应用，它通过扫描 WiFi 文本提取 WiFi 凭据，将其与附近的网络匹配，并连接到这些网络。

功能特性

• 文本识别 (OCR)：从图像中的文本中提取 WiFi 凭据。
• 图像选择器：从相册中选择图像以提取 WiFi 凭据。
• WiFi 网络扫描：扫描附近的 WiFi 网络。
• 模糊匹配：使用 Fuse.js 将提取的 WiFi 名称与可用的网络进行匹配。
• WiFi 连接：使用 react-native-wifi-reborn 连接到匹配的 WiFi 网络。
• 权限处理：正确处理摄像头和位置权限，并提供用户友好的提示。
• 多语言支持：支持拉丁语、中文、日语和韩语脚本的 OCR 识别。

技术栈

• 框架：基于 Expo 的 React Native
• 路由：Expo Router
• WiFi 管理：react-native-wifi-reborn
• 摄像头：expo-camera
• 文本识别：@react-native-ml-kit/text-recognition
• 图像选择器：expo-image-picker
• 位置服务：expo-location
• 模糊搜索：Fuse.js
• 图标：@expo/vector-icons

安装

1. 克隆仓库：

git clone https://github.com/yourusername/wify.git
cd wify

2. 安装依赖：

npm install

3. 运行应用：

npm start

4. 在物理设备上进行开发：

# For Android
npm run android
# For iOS
npm run ios

使用方法

1. 启动应用并授予所需的权限（摄像头和位置）。
2. 将摄像头对准包含 WiFi 凭据的 WiFi 文本。
3. 或者，点击图库图标选择包含 WiFi 信息的图像。
4. 应用将扫描附近的 WiFi 网络，并将它们与提取的凭据进行匹配。
5. 如果多个网络匹配，您可以从列表中选择正确的网络。
6. 确认连接并在需要时编辑密码。
7. 连接到 WiFi 网络。

权限

该应用需要以下权限：

• 摄像头：用于扫描 WiFi 文本。
• 位置：WiFi 扫描功能需要此权限来发现附近的无线网络。
• 照片图库：用于访问图像以提取 WiFi 凭据。

项目结构

• app/: 使用 Expo Router 的主要应用程序代码
  • index.tsx: 主要的应用程序组件
  • _layout.tsx: 应用程序布局配置
• components/: React 组件
  • WiFiScanner.tsx: 用于摄像头和 WiFi 文本扫描的主要组件
  • WiFiConnectionModal.tsx: 用于连接到 WiFi 网络的 Modal
  • PermissionsModal.tsx: 用于处理权限请求的 Modal
• utils/: 实用函数
  • wifi.ts: WiFi 操作，包括扫描、连接和解析
  • textRecognition.ts: 用于从图像中提取 WiFi 凭据的 OCR 功能
  • permissions.ts: 权限处理实用程序
• assets/: 图像和其他静态资源

关键功能实现

• 文本识别：使用 ML Kit 识别多种语言的文本并提取 WiFi 凭据。
• 模糊匹配：使用 Fuse.js 将提取的 WiFi 名称与可用的网络进行匹配，即使存在细微差异。
• 权限处理：优雅地处理权限请求，并在权限被拒绝时提供指导。
• 后台应用状态：当应用从后台返回时，重新检查权限。

演示

demo.mp4

许可证

MIT