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设置中连接网络

使用方法:

相关推荐
郑州光合科技余经理1 小时前
本地生活系统:多业务订单字段怎么分账本导出
java·开发语言·前端·数据库·uni-app·php·ai编程
盟道科技11 小时前
消息队列消费端幂等性实战:订单场景下重复消息不重复扣款的完整方案
小程序
2601_9499506315 小时前
个人在线刷题的工具
学习·考研·小程序·刷题·小程序推荐
QQ_21696290961 天前
基于微服务架构的店铺管理系统的设计与实现
大数据·spring boot·后端·spring·微服务·小程序·架构
EatFan2 天前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
bug总结3 天前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
大佐不会说日语~3 天前
Android 16 下 uni-app APP 提示“网络连接失败”的排障与修复
android·uni-app
m0_587383003 天前
折扣卡CPS系统源码的技术架构与实战开发指南
人工智能·小程序·数据挖掘·系统架构·需求分析
2501_915106323 天前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
白远山3 天前
家政服务派单平台搭建实战指南:从需求分析到系统设计全流程解析
java·开发语言·架构·uni-app·需求分析