微信小程序連接WiFi

• 需求說明
• 代碼及說明
• • 1. 系統(tǒng)判斷
  • 2. 權限判斷及申請
  • 3. 搜索wifi列表并連接
  • 4. 切換不同wifi時進行提示

需求說明

1. 小程序搜索附近能連接的wifi并出現(xiàn)列表
2. 點擊wifi進行連接
3. 切換不同wifi時進行提示

代碼及說明

對于需求只貼上js部分代碼，用于記錄小程序連接wifi接口使用及遇到的問題。具體API查看微信官方文檔。微信官方文檔

1. 系統(tǒng)判斷

說明： 因為獲取wifi列表根據(jù)官方文檔所示ios將跳轉到系統(tǒng)設置界面，因為界面操作不統(tǒng)一，所以這次先不對ios設備進行適配，所以就要對設備系統(tǒng)進行判斷并給出提示

代碼：

	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使用前需要用戶同意使用地理位置，即授權操作。首先要先獲取用戶目前的權限，如果沒有授權需要發(fā)起授權請求。并且考慮當用戶不小心點擊了不同意的時候，需要在沒有授權的時候有按鈕，點擊時提示用戶打開使用地理位置的權限。

代碼：

// 獲取用戶授權設置
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 如果用戶之前已經(jīng)同意授權，則不會出現(xiàn)彈窗，直接返回成功。在用戶的關閉了地理位置的權限時也不會有彈窗，所以需要在沒有該授權的時候引導用戶打開地理位置權限。

代碼：

<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列表進行數(shù)據(jù)處理或者篩選
                // 根據(jù)項目要求展示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)
          }
        })

      }
    })