用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序wifi能力解讀與實踐

Rolan 2020-1-3 00:28

背景 小程序wifi系列接口為系統原生能力。早在2015年,微信就推出了「微信連Wi-Fi」,微信連Wi-Fi是為商家的線下場所提供一套完整和便捷的微信連Wi-Fi的方案?,F在已經是一套完整的,便捷的解決方案。顧客通過掃碼的 ...

背景

小程序wifi系列接口為系統原生能力。早在2015年,微信就推出了「微信連Wi-Fi」,微信連Wi-Fi是為商家的線下場所提供一套完整和便捷的微信連Wi-Fi的方案?,F在已經是一套完整的,便捷的解決方案。顧客通過掃碼的方式連接wifi,同時微信還可以向用戶下發消息。方案在官方文檔已經闡述得很詳細,本文就不再贅述。本文重點在于講解小程序中使用wifi能力遇到的問題和心得。

【微信連wifi】傳送門

wifi能力解讀

wifi能力簡介

在小程序中,使用wifi模塊都需要先調用wx.startWifi()來初始化wifi模塊。以下能力的使用均需要在wx.startWifisuccess回調中使用。

連接wifi

wx.connectWifi({
    SSID: 'mx 的iphone', // Wi-Fi 設備 SSID
    BSSID: '', // Wi-Fi 設備 BSSID
    password: 'xxxxxxxx',
    success(){},
    fail(){},
    complete(){}
})
復制代碼

connectWifi為我們提供了直連wifi的能力, 僅 Android 與 iOS 11 以上版本支持,需要基礎庫1.6.0以上。這個一般是我們使用wifi功能的核心API了。在ios中,會出現系統彈框,詢問用戶是否要連接wifi,只有用戶點擊確定,connectWifi才會繼續進行,否則就走fail回調了。在安卓(以小米note3為例,Anroid9)中則會出現微信連一連的toast。

獲取當前已經連接的wifi

wx.getConnectedWifi({
    success(WifiInfo){
        // WifiInfo
    }
})
復制代碼

從社區中獲取的信息得知:signalStrength表示信號強度,iOS 是系統返回的,取值 0-1,安卓經過轉換,取值 0-100。數值與信號強度為正比例關系。

獲取wifi列表

wx.getWifiList({
    success(e) {
        wx.onGetWifiList((res) {
            // res.wifiList:wifiInfo[]
        })
    }
})
復制代碼

獲取周圍的wifi列表,需要先使用getWifiList后使用onGetWifiList進行監聽。在ios中,getWifiList會跳到ios系統界面,這是由于ios系統的限制, 目前是無法避免的(其實這么做也無可厚非,wifi信息本來就是敏感的,但是對用戶體驗有一定的影響)。在安卓中,getWifiList需要獲取用戶的位置信息,因為可以利用小程序嗅探周邊Wi-Fi熱點來推斷用戶所在的位置信息。為了確保用戶的隱私不受侵犯,自微信android客戶端 7.0.4 起,需要先獲取用戶地理位置(scope.userLocation)。詳情請見wx.getWifiList接口需獲取用戶位置信息授權后使用

設置AP相關信息

wx.onGetWifiList(function(res) {
    wx.setWifiList({
      wifiList: [{
        SSID: res.wifiList[0].SSID,
        BSSID: res.wifiList[0].BSSID,
        password: '123456'
      }]
    })
})
復制代碼

這個接口也挺牛逼,ios特有的。通過設置wifiList,我們在系統頁可以直接看到已設置的wifi列表,點了就直接連上了。

其他

  • wx.stopWifi 關閉wifi模塊
  • wx.onWifiConnected(function callback)監聽連接上 Wi-Fi 的事件
  • wx.offWifiConnected 取消監聽連接上 Wi-Fi 的事件
  • wx.offGetWifiList(function callback) 取消監聽獲取到 Wi-Fi 列表數據事件。

安卓連接wifi

連接指定 Wi-Fi 接口調用時序:

Android:startWifi —> connectWifi —> onWifiConnected
復制代碼

連周邊 Wi-Fi 接口調用時序:

Android:startWifi —> getWifiList —> onGetWifiList —> connectWifi —> onWifiConnected
復制代碼

IOS連接wifi

連接指定 Wi-Fi 接口調用時序:(與安卓一致)

iOS(僅iOS 11及以上版本支持):startWifi —> connectWifi —> onWifiConnected
復制代碼

連周邊 Wi-Fi 接口調用時序:

iOS(iOS 11.0及11.1版本因系統原因暫不支持):
startWifi —> getWifiList —> onGetWifiList —> setWifiList —> onWifiConnected
復制代碼

實踐

筆者在項目中接觸到了使用小程序提供的硬件(wifi)能力的場景。利用wifi與socket的能力,我們可以為物聯網設備連接wifi。流程如下:

剛好在開發者社區找到類似的代碼片段:

wx.request/wx.connectSocket/wx.uploadFile/wx.downloadFile 的 url 參數允許為 {IP}:{PORT}/${PATH} 的格式,當且僅當 IP 與手機 IP 處在同一網段且不與本機 IP 相同(一般來說,就是同一局域網,如連接在同一個 wifi 下)時,請求/連接才會成功。 在這種情況下,不會進行安全域的校驗,不要求必須使用 https/wss,也可以使用 http/ws。

局域網通信中,不會進行安全域校驗,因此,無需在mp后臺添加安全域域名。

總結

借助小程序提供的硬件能力(wifi,藍牙,NFC),小程序有了更加廣闊的場景。比如【摩拜單車】小程序,有的車需要用戶開一下藍牙,小程序提供的操作原生系統的藍牙功能便為我們賦能。通過小程序,我們也可以實現與物聯網設備通信,通過連接設備熱點,利用http/wss/udp傳輸數據。當然,現在wifi能力還是存在著問題,比如兼容問題,可能有部分安卓手機在連接時會莫名其妙的報錯。此時需要對著官方提供的errcode查看具體的原因。

踩過的坑

  1. 安卓部分機型,已經連接wifi,使用connectWifi重新連接,即使傳錯密碼,還是能連上。
    A:這個問題目前還沒有解決的辦法。
  2. ios在getWifiList會跳到系統設置頁,在connectWifi會出現modal確認是否連接。
    A:無法避免。ios系統的限制
  3. 調試wifi功能時,無法在開發者工具中調試wifi能力。
    A: 目前開發者工具無法進行模擬。并且真機調試時,連接設備熱點后會報錯。(畢竟真機調試時需要能夠訪問網絡,一般設備熱點都不具備訪問網絡的能力)。目前可以通過 預覽+ vconsole解決,還是比較麻煩。
  4. 可以主動斷開wifi嗎?
    A: 從文檔上看,沒有提供這個能力。但是可以嘗試連接一個不存在的wifi。
  5. 來自文檔的注意事項:

Reference

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: Mekhi 來自: 掘金
梦幻单人赚钱方法