微信小程序連接WiFi

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

需求說明

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

代碼及說明

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

1. 系統(tǒng)判斷

說明： 因?yàn)楂@取wifi列表根據(jù)官方文檔所示ios將跳轉(zhuǎn)到系統(tǒng)設(shè)置界面，因?yàn)榻缑娌僮鞑唤y(tǒng)一，所以這次先不對(duì)ios設(shè)備進(jìn)行適配，所以就要對(duì)設(shè)備系統(tǒng)進(jìn)行判斷并給出提示

代碼：

	wx.getSystemInfo({
       success: (res) => {
         let system = res.system.split(' ')[0]
         console.log('system', system)
         if(system === 'iOS'){
          wx.showToast({
            title: '不支持IOS設(shè)備',
            icon: 'none',
            duration: 1000
          })
          setTimeout(function () {
            wx.switchTab({
              url: '..', // 需要返回的頁面路徑
            })
          }, 1000)
         } else {
           this.authorize() // 開始權(quán)限判斷及申請(qǐng)
         }
       }
     })

2. 權(quán)限判斷及申請(qǐng)

說明： 獲取wifil列表等api使用前需要用戶同意使用地理位置，即授權(quán)操作。首先要先獲取用戶目前的權(quán)限，如果沒有授權(quán)需要發(fā)起授權(quán)請(qǐng)求。并且考慮當(dāng)用戶不小心點(diǎn)擊了不同意的時(shí)候，需要在沒有授權(quán)的時(shí)候有按鈕，點(diǎn)擊時(shí)提示用戶打開使用地理位置的權(quán)限。

代碼：

// 獲取用戶授權(quán)設(shè)置
authorize() {
    let that = this
    wx.getSetting({
      success(res) {
        console.log('setting', res)
        if (!res.authSetting['scope.userLocation']) {
		  // 申請(qǐng)獲取地理位置權(quán)限
          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)同意授權(quán)，則不會(huì)出現(xiàn)彈窗，直接返回成功。在用戶的關(guān)閉了地理位置的權(quán)限時(shí)也不會(huì)有彈窗，所以需要在沒有該授權(quán)的時(shí)候引導(dǎo)用戶打開地理位置權(quán)限。

代碼：

<view wx:if="{{!have_authorize}}" class="tips search_tips">當(dāng)前沒有權(quán)限獲取您的位置用于連接wif，<text class="text_btn" bindtap="openSetting">請(qǐng)點(diǎn)擊打開地理位置權(quán)限</text></view>

  // 提示用戶打開設(shè)置頁，打開
  openSetting() {
    wx.openSetting({
      success: (res => {
      	// res也會(huì)返回用戶設(shè)置的權(quán)限，可以把權(quán)限判斷部分的代碼單獨(dú)抽出來
        this.authorize() // 獲取用戶授權(quán)設(shè)置
      })
    })
  },

3. 搜索wifi列表并連接

說明： wx.startWifi 初始化 Wi-Fi 模塊，wx.getWifiList 獲取 Wi-Fi 列表。查看官方文檔進(jìn)行失誤提示，這里沒有詳細(xì)寫明。

代碼：

// 獲取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) {
                // 可以對(duì)獲取的wifi列表進(jìn)行數(shù)據(jù)處理或者篩選
                // 根據(jù)項(xiàng)目要求展示wifi列表界面
              }else{
                wx.showToast({
                  title: '暫無可連接wifi,請(qǐng)重試',
                  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: '設(shè)備wifi連接失敗',
          icon: 'none'
        })
      }
    })
  },

4. 切換不同wifi時(shí)進(jìn)行提示

代碼：

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

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

        wx.getConnectedWifi({
          success: (result) => {
            console.log('getConnectedWifi', result)
            // 對(duì)不同連接進(jìn)行提示
          },
          fail: (e) => {
            console.log('getConnectedWifi fail', e)
          }
        })

      }
    })