Aiden's blog Aiden's blog
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • JavaScript教程
    • JavaScript高级程序设计
    • ES6 教程
    • Vue
    • Vue3.0
    • React
    • TypeScript 从零实现 axios
    • Git
    • TypeScript
    • JS设计模式总结
    • 小程序
    • 小程序云开发
    • Echarts
    • 微前端
    • H5
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 搜索引擎
  • ES系列
  • 经典面试题
  • 知识点总结
  • uni-app
  • 算法
  • Vue3实战
  • 小程序chatgpt
  • 小程序配网流程
  • 程序WIFI配网
  • 小程序WebSocket
  • H5 WebSocket
  • H5 TTS
  • Vue3实现OSS存储
  • 大文件分片上传
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Aiden Wu

前端界的小学生
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • JavaScript教程
    • JavaScript高级程序设计
    • ES6 教程
    • Vue
    • Vue3.0
    • React
    • TypeScript 从零实现 axios
    • Git
    • TypeScript
    • JS设计模式总结
    • 小程序
    • 小程序云开发
    • Echarts
    • 微前端
    • H5
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 搜索引擎
  • ES系列
  • 经典面试题
  • 知识点总结
  • uni-app
  • 算法
  • Vue3实战
  • 小程序chatgpt
  • 小程序配网流程
  • 程序WIFI配网
  • 小程序WebSocket
  • H5 WebSocket
  • H5 TTS
  • Vue3实现OSS存储
  • 大文件分片上传
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • 搜索引擎

  • ES系列

  • 经典面试题

  • 知识点总结

  • uni-app

  • 算法

  • Vue3实战

  • 小程序chatgpt

  • 小程序WIFI配网

    • 小程序WIFI配网
      • 一键配网
      • 问题
        • uni.getWifiList报错
        • 未初始化uni.startWifi报错
  • 小程序配网流程

  • 小程序WebSocket

  • H5 WebSocket

  • H5 TTS

  • Vue3实现OSS存储

  • 大文件分片上传

  • 技术
  • 小程序WIFI配网
wushengxin
2024-08-05
目录

小程序WIFI配网

# 小程序WIFI配网

  • 打开小程序并进入配网功能。可以通过扫描二维码或者在小程序中找到相关入口
  • 在配网页面中选择WIFI配网选项,并点击进入
  • 入要连接的WIFI名称和密码。确保输入的信息准确无误
  • 点击确认按钮,小程序将开始进行WIFI连接和配网操作
  • 等待片刻,小程序会自动连接到指定的WIFI网络
  • 配网成功后,小程序将会提示配网完成,并可以开始使用相关功能

注意: 在进行WIFI配网时需要确保手机和WIFI网络的正常连接,同时输入的WIFI信息也要准确无误。如果在配网过程中遇到问题,可以尝试重启手机、检查网络连接或找到相关技术支持

# 一键配网

  • onLoad检查扫码手机是否支持一键联网功能,使用uni.getSystemInfo检查手机型号和版本是否支持,安卓系统小于6及苹果手机系统小于11.2的不支持

  • onShow初始化WIFI模板并连接当前WIFI,以及通过uni.onNetworkStatusChange实时的监听网络状态变化来进行实时更新SSID,通过uni.getConnectedWifi获取当前连接的WIFI信息

  • 当用户点击选择WIFI时,首先需要uni.getWifiList接口获取用户位置信息授权后再进行获取WIFI信息列表,连接完WIFI后回到小程序,小程序监听网络变化进行更新SSID并自动填入WIFI名称输入框中

注意:需要在onShow生命周期函数中进行监听网络状态的变化来更新SSID,因为用户切换WIFI或者断开WIFI都会执行onShow生命周期函数,在

# 问题

# uni.getWifiList报错

  • 错误描述:在初始化WIFI之后调用wx.getWifiList时,报错:getWifiList:fail:required permission desc
  • 错误原因:部分机型微信小程序须获得用户位置权限才能获取WIFI列表.博主机型为(Honor 8X) 错误解决:在微信小程序app.json中配置 permission属性(小游戏需在game.json中配置): desc字段可自定义!
// manifest.json 小程序特有相关配置
"permission": {
   "scope.userLocation": {
     "desc": "为完美使用小程序,请允许获取您的位置权限!"
   }
}

// 检查小程序是否打开了定位权限
const checkLocationAuth = () => {
  uni.getSetting({
    success: (res) => {
      console.log('定位权限', res)
      if (res.authSetting['scope.userLocation']) {
        // 用户已授权定位权限
        isLocationShow.value = false
        isAuthLocation.value = true
      } else {
        // 用户未授权定位权限
        isLocationShow.value = true
        isAuthLocation.value = false
        popAuthTipType.value = 2
      }
    },
    fail: (error) => {
      // 获取授权信息失败
      console.error('获取定位信息失败', error)
      isLocationShow.value = true
      isAuthLocation.value = false
      popAuthTipType.value = 2
    }
  })
}

// 检查手机和微信授权定位定时器
let locationTimer = ref(null)
// 检查微信和手机是否打开了定位权限
const getLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success(res) {
      console.log('res开启定位', res)
      // 用户已授权定位权限
      isLocationShow.value = false
      isAuthLocation.value = true
      popAuthTipType.value = -1
    },
    fail(error) {
      console.log('error定位失败', error)
      // 弹窗手机授权定位提示:getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF
      if (error.errCode === 2) {
        // 用户未授权定位权限
        isLocationShow.value = true
        isAuthLocation.value = false
        popAuthTipType.value = 3
        // 每一秒检查一次定位授权
        locationTimer.value = setTimeout(() => {
          clearTimeout(locationTimer.value)
          locationTimer.value = null
          getLocation()
        }, 1000)
      }

      // 弹窗微信授权定位提示
      if (error.errMsg === 'getLocation:fail:system permission denied') {
        // 用户未授权定位权限
        isLocationShow.value = true
        isAuthLocation.value = false
        popAuthTipType.value = 4
        // 每一秒检查一次定位授权
        locationTimer.value = setTimeout(() => {
          clearTimeout(locationTimer.value)
          locationTimer.value = null
          getLocation()
        }, 1000)
      }
    }
  })
}

// 附近wifi信息列表
const wifiNameList = ref([])
// 获取附近的wifi名称信息列表
const getWifiList = () => {
  checkLocationAuth()
  if (isAuthLocation.value) {
    // 有授权定位则直接获取
    uni.getWifiList({
      success: () => {
        uni.onGetWifiList((res) => {
          let filterList = res.wifiList

          // 过滤同名WiFi信号
          filterList = filterList.reduce((result, item) => {
            let index = result.findIndex((v) => {
              return v.SSID == item.SSID
            })
            if (index < 0) {
              result.push(item)
            } else if (item.signalStrength > result[index].signalStrength) {
              result[index] = item
            }
            return result
          }, [])

          // 处理wifi名称信息列表
          wifiNameList.value = filterList.map((item) => {
            return item.SSID
          })
          wifiNameList.value.forEach((item, index) => {
            if (item === '') {
              wifiNameList.value.splice(index, 1)
            }
          })
          wifiNameList.value = [wifiNameList.value]
          console.log('wifiNameList', wifiNameList.value)
          // 获取小程序系统信息
          if (!isWifiPickerShow.value) {
            isWifiPickerShow.value = true
          }
        })
      },
      fail: (error) => {
        console.log('获取WiFi列表失败:', error)
        // 检查微信和手机是否打开了定位权限
        getLocation()
      }
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

# 未初始化uni.startWifi报错

  • 确保在使用WIFI相关功能之前,必须已经正确初始化了 WIFI模块
// 初始化wifi模板
const startWifi = () => {
	uni.startWifi({
		success: (res) => {
			console.log("startWifi==>", res)
			// 初始化完成后进行使用WIFI的API
		},
		fail: (error) => {
			console.log(error)
			uni.showToast({
				title: '网络异常',
				icon: 'error'
			})
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2024/08/05, 18:11:13
小程序WebSocket打印文字兼自动滚动(chatgpt)
小程序配网流程

← 小程序WebSocket打印文字兼自动滚动(chatgpt) 小程序配网流程→

最近更新
01
大文件分片上传
08-05
02
Vue3实现OSS存储
08-05
03
H5 TTS
08-05
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Aiden Wu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×