使用uniapp实现小步伐获取wifi并毗连

Wi-Fi功能模块
App平台由 uni ext api 实现，需下载插件：uni-WiFi 链接：https://ext.dcloud.net.cn/plugin?id=10337
uni ext api 需 HBuilderX 3.6.8+
iOS平台获取Wi-Fi信息需要开启“Access WiFi information”能力登录苹果开发者网站，在“Certificates, Identifiers & Profiles”页面选择“Identifiers”中选择对应的App ID，确保开启“Access WiFi information”，生存后重新生成profile文件。
iOS平台iOS13及以上系统，获取当前毗连的Wi-Fi信息需要先获取系统定位权限，因此在iOS13及以上系统使用此接口时，会触发定位权限申请的弹窗。
uni.startWifi(OBJECT)
初始化Wi-Fi模块

uni.stopWifi(OBJECT)
关闭 Wi-Fi 模块
OBJECT 参数说明

uni.getConnectedWifi(OBJECT)
获取已毗连的 Wi-Fi 信息
OBJECT 参数说明

1. <template>
2.   <view class="page">
3.     <view class="gc-box">
4.       <button @click="getConnectedWifi">获取当前连接wifi</button>
5.     </view>
6.     <view class="gc-box">
7.       <button @click="getWifiList">获取周围 WiFi</button>
8.     </view>
10.     <view class="gc-box">已连接：{{ connectedWifi.SSID }} </view>
12.     <view class="gc-box">默认连接密码：<input v-model="password" /> </view>
14.     <view class="gc-box">
15.       <view v-for="item in wifiList" :key="item.BSSID" class="item">
16.         <text class="title">{{ item.SSID }}</text>
17.         <button class="btn" @click="connectWifi(item)">连接</button>
18.       </view>
19.     </view>
20.   </view>
21. </template>
23. <script>
24. export default {
25.   data() {
26.     return {
27.       wifiList: [], // 存储WiFi列表
28.       connectedWifi: { SSID: '' }, // 存储当前已连接wifi
29.       password: '', // 密码
30.     }
31.   },
33.   onLoad() {
34.     this.onWifiConnected()
35.     this.onGetWifiList()
36.   },
38.   methods: {
39.     /** 启动wifi */
40.     startWifi() {
41.       return new Promise((resolve, reject) => {
42.         uni.startWifi({
43.           success: (res) => {
44.             console.log('启动wifi 成功', res)
45.             resolve(true)
46.           },
47.           fail: (err) => {
48.             console.error('启动wifi 失败', err)
49.             uni.showModal({ content: err.errMsg, showCancel: false })
50.             reject(new Error(err))
51.           },
52.         })
53.       })
54.     },
56.     /** 获取wifi列表， ios和android 各不相同，具体看顶部资料 */
57.     async getWifiList() {
58.       const hasStart = await this.startWifi()
59.       if (hasStart !== true) return
60.       uni.getWifiList({
61.         success: (res1) => {
62.           console.log('获取wifi列表命令发送 成功', res1)
63.         },
64.         fail: (err) => {
65.           console.error('获取wifi列表 失败', err)
66.           uni.showModal({ content: err.errMsg, showCancel: false })
67.         },
68.       })
69.     },
71.     /** 监听获取wifi列表 */
72.     onGetWifiList() {
73.       uni.onGetWifiList((res) => {
74.         console.log('监听获取wifi列表', res)
75.         const { wifiList } = res
76.         // 过滤同名WiFi信号
77.         const filterList = wifiList.reduce((result, item) => {
78.           const index = result.findIndex((v) => {
79.             return v.SSID === item.SSID
80.           })
81.           if (index < 0) {
82.             result.push(item)
83.           } else if (item.signalStrength > result[index].signalStrength) {
84.             result[index] = item
85.           }
86.           return result
87.         }, [])
88.         console.log('过滤同名后', filterList)
89.         this.wifiList = filterList
90.       })
91.     },
93.     /** 连接某个 Wi-Fi */
94.     connectWifi(wifi) {
95.       console.log('选中的wifi:', wifi)
96.       this.connectedWifi = { SSID: '' }
97.       uni.connectWifi({
98.         SSID: wifi.SSID,
99.         password: this.password,
100.         success: (res) => {
101.           console.log('wifi连接命令发送 成功:', res)
102.         },
103.         fail: (err) => {
104.           console.error('wifi连接 失败:', err)
105.           uni.showModal({ content: err.errMsg, showCancel: false })
106.         },
107.       })
108.     },
110.     /**  监听wifi连接状态 */
111.     onWifiConnected() {
112.       uni.onWifiConnected((res) => {
113.         console.log('监听wifi连接状态', res)
114.         this.connectedWifi = res.wifi
115.       })
116.     },
118.     /** 获取当前连接的wifi */
119.     async getConnectedWifi() {
120.       this.connectedWifi = { SSID: '' }
121.       const hasStart = await this.startWifi()
122.       if (hasStart !== true) return
123.       uni.getConnectedWifi({
124.         success: (res) => {
125.           console.log('获取当前连接的wifi 成功', res)
126.           this.connectedWifi = res.wifi // 当前连接的wifi的信息
127.           // this.connectedWifiSSID = res.wifi.SSID
128.         },
129.         fail: (err) => {
130.           console.error('获取当前连接的wifi 失败:', err)
131.           uni.showModal({ content: err.errMsg, showCancel: false })
132.         },
133.       })
134.     },
135.   },
136. }
137. </script>
139. <style>
140. .item {
141.   display: flex;
142.   flex-direction: row;
143.   align-items: center;
144.   justify-content: space-between;
145.   border-bottom: 2rpx solid #ddd;
146.   padding: 16rpx 0;
147. }
148. .item .title {
149.   flex: 1;
150. }
151. input {
152.   border-bottom: 2rpx solid #ddd;
153. }
154. </style>

复制代码

作者介绍
一个热爱编程，无背景最底层的步伐员。没人领路遇到过很多坑，希望能分享一下经验，让后续的小同伴们少走弯路！希望大家可以多多支持关注！您的肯定是我最大的动力。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。