uniapp 小程序获取WiFi列表

javascript 复制代码
<template>
  <view >
    <button @click="getWifiList">获取WiFi列表</button>
    <scroll-view
      :scroll-top="scrollTop"
      scroll-y
      class="content-pop"
    >
      <view
        class="itemInfo"
        v-for="(item, index) in wifiList"
        :key="index"
      >
        <text>{{ item.SSID }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wifiList: [],
      };
    },
    methods: {
      getWifiList() {
        // 获取手机型号
        const sys = uni.getSystemInfoSync();
        if (sys.platform == "android" && sys.parseInt(sys.system.substr(8) < 6) {
          this.$tip.error("手机版本不支持");
          return;
        }
        if (sys.platform == "ios" && sys.parseInt(sys.system.substr(4)) < 11.2) {
          this.$tip.error("手机版本不支持");
          return;
        }
        //初始wifi模块
        this.start_wifi();
      },
      start_wifi() {
        uni.startWifi({
          success: (res) => {
              this.getWifi();
          },
          fail: (err) => {
            this.$tip.toast("WIFI启动失败");
          },
        });
      },
      getWifi() {
        let that = this;
        uni.getWifiList({
          //成功后,就可以获取列表了
          success(res) {
            //列表获取成功后,要到事件里提取
            uni.onGetWifiList((res) => {
              that.onGetWifiListFun(res);
            });
          },
          fail(err) {
            console.log(err, "err");
          },
        });
      },
      // 监听获取到的WiFi列表函数 进行处理
      onGetWifiListFun(info) {
        this.wifiList = [];
        let wifiList = [];
        // 过滤掉没有SSID的 还有我个人对信号的处理,用来渲染对应的样式的
        wifiList = info.wifiList.filter((item) => {
          if (item.signalStrength >= -55) {
            item["signalDefine"] = [true, true, true];
          } else if (item.signalStrength >= -66) {
            item["signalDefine"] = [false, true, true];
          } else if (item.signalStrength >= -88) {
            item["signalDefine"] = [false, false, true];
          } else if (item.signalStrength >= -100) {
            item["signalDefine"] = [false, false, false];
          }
          return item.SSID;
        });
        // 按信号强度排序
        wifiList = wifiList.sort((a, b) => {
          return b.signalStrength - a.signalStrength;
        });
        // 取当前连接的WiFi的信号
        const connectResIndex = wifiList.findIndex(
          (item) => item.SSID === this.connectWifi
        );
        const connectRes = wifiList[connectResIndex];
        if (connectRes) {
          this.connectWifiSignal = connectRes["signalDefine"];
          this.connectRes = connectRes;
        }
        wifiList.splice(connectResIndex, 1);

        this.wifiList = this.uniqueByField(wifiList, "SSID");
        this.$tip.loaded();
      },
      uniqueByField(list, field) {
        const seen = new Set();
        const result = [];

        for (let item of list) {
          const value = item[field];
          if (!seen.has(value)) {
            seen.add(value);
            result.push(item);
          }
        }

        return result;
      },
    },
  };
</script>

<style scoped>
  .itemInfo {
    height: 96rpx;
    line-height: 96rpx;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f4f4f4;
    text-align: left;
  } 
  .content-pop {
    width: 100vw;
    max-height: 55vh;
    padding: 0 30rpx;
  }
</style>

提示:iphone刷新会跳转至手机wifi设置中连接网络

使用方法:

相关推荐
dreams_dream14 小时前
微信小程序:页面事件-上拉触底
微信小程序·小程序
头发还在的女程序员1 天前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
wafrdggh2 天前
2026电商快递批量查询怎么用?固乔助手模板设置评测
大数据·数据库·小程序
wafrdggh2 天前
2026 商城小程序平台哪个价格合理?把跨境附加成本这个坑算透
大数据·小程序
Dumbness3 天前
订阅消息弹窗必须在用户点击里调:联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
码间留白4 天前
uni-app 鸿蒙离线打包:一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
恩创软件开发4 天前
自助KTV系统管理员续单功能
经验分享·小程序
多客:duokelijie5 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白5 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
AI源码6 天前
在线考试小程序
小程序·notepad++