微信小程序连接WiFi

• 需求说明
• 代码及说明
• • 1. 系统判断
  • 2. 权限判断及申请
  • 3. 搜索wifi列表并连接
  • 4. 切换不同wifi时进行提示

需求说明

1. 小程序搜索附近能连接的wifi并出现列表
2. 点击wifi进行连接
3. 切换不同wifi时进行提示

代码及说明

对于需求只贴上js部分代码，用于记录小程序连接wifi接口使用及遇到的问题。具体API查看微信官方文档。微信官方文档

1. 系统判断

说明： 因为获取wifi列表根据官方文档所示ios将跳转到系统设置界面，因为界面操作不统一，所以这次先不对ios设备进行适配，所以就要对设备系统进行判断并给出提示

代码：

	wx.getSystemInfo({
       success: (res) => {
         let system = res.system.split(' ')[0]
         console.log('system', system)
         if(system === 'iOS'){
          wx.showToast({
            title: '不支持IOS设备',
            icon: 'none',
            duration: 1000
          })
          setTimeout(function () {
            wx.switchTab({
              url: '..', // 需要返回的页面路径
            })
          }, 1000)
         } else {
           this.authorize() // 开始权限判断及申请
         }
       }
     })

2. 权限判断及申请

说明： 获取wifil列表等api使用前需要用户同意使用地理位置，即授权操作。首先要先获取用户目前的权限，如果没有授权需要发起授权请求。并且考虑当用户不小心点击了不同意的时候，需要在没有授权的时候有按钮，点击时提示用户打开使用地理位置的权限。

代码：

// 获取用户授权设置
authorize() {
    let that = this
    wx.getSetting({
      success(res) {
        console.log('setting', res)
        if (!res.authSetting['scope.userLocation']) {
		  // 申请获取地理位置权限
          wx.authorize({
            scope: 'scope.userLocation',
            success: (res) => {
              console.log('authorize succ', res)
              
            },
            fail: (e) => {
              console.log('authorize fail', e)
            }
          })
        }else{
          // 开始wifi模块使用
        }
      }
    })
  },

说明： wx.authorize 如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。在用户的关闭了地理位置的权限时也不会有弹窗，所以需要在没有该授权的时候引导用户打开地理位置权限。

代码：

<view wx:if="{{!have_authorize}}" class="tips search_tips">当前没有权限获取您的位置用于连接wif，<text class="text_btn" bindtap="openSetting">请点击打开地理位置权限</text></view>

  // 提示用户打开设置页，打开
  openSetting() {
    wx.openSetting({
      success: (res => {
      	// res也会返回用户设置的权限，可以把权限判断部分的代码单独抽出来
        this.authorize() // 获取用户授权设置
      })
    })
  },

3. 搜索wifi列表并连接

说明： wx.startWifi 初始化 Wi-Fi 模块，wx.getWifiList 获取 Wi-Fi 列表。查看官方文档进行失误提示，这里没有详细写明。

代码：

// 获取wifi列表
  startWifi() {
    wx.showLoading({
      title: '正在搜索可连接wifi',
    })

    wx.startWifi({
      success: (res) => {
        console.log('startWifi', res)
    
        wx.getWifiList({
          success: (res) => {
            console.log('getWifiList', res)
            wx.onGetWifiList(res => {
              console.log(res)
              if(res.wifiList.length !== 0) {
                // 可以对获取的wifi列表进行数据处理或者筛选
                // 根据项目要求展示wifi列表界面
              }else{
                wx.showToast({
                  title: '暂无可连接wifi,请重试',
                  icon: 'none'
                })
              }
            })
          },  
          fail: (e) => {
            console.log('获取wifi列表失败', e)
            wx.hideLoading({})
          }
        })
      },
      fail: (e) => {
        console.log('wifi连接失败', e)
        wx.hideLoading({})
      },
    })
  },
  
  // 选择wifi连接
  onChangeWifi(e) {
    let that = this
    let item = e.detail.data
    wx.connectWifi({
      SSID: item.SSID,
      BSSID: item.BSSID,
      password: '',
      success: function (res) {
        console.log('connectWifi suc', res)
      },
      fail: function (e) {
        console.log('connectWifi fail',e)
        wx.showToast({
          title: '设备wifi连接失败',
          icon: 'none'
        })
      }
    })
  },

4. 切换不同wifi时进行提示

代码：

  wx.onNetworkStatusChange(function (res) {
      console.log('NetworkStatusChange', res)

      if(res.networkType === 'wifi') {

        wx.getConnectedWifi({
          success: (result) => {
            console.log('getConnectedWifi', result)
            // 对不同连接进行提示
          },
          fail: (e) => {
            console.log('getConnectedWifi fail', e)
          }
        })

      }
    })