uni-app 微信小程序端-AirKiss一鍵配網

發(fā)現(xiàn)網上很多關于微信小程序配網的文章都是微信小程序原生開發(fā)，uni-app少之又少。這篇文章就介紹一下怎么在HBuilder X使用airkiss配網插件。

一.AirKiss介紹

? AirKiss是微信硬件平臺為Wi-Fi設備提供的微信配網、局域網發(fā)現(xiàn)和局域網通訊的技術。開發(fā)者若要實現(xiàn)通過微信客戶端對Wi-Fi設備配網、通過微信客戶端在局域網發(fā)現(xiàn)Wi-Fi設備，或者把微信客戶端內的音樂、圖片、文件等消息通過局域網發(fā)送至Wi-Fi設備。

? 設備進入 Wi-Fi 混雜模式（promiscuous mode）以監(jiān)聽捕獲周圍的 Wi-Fi 報文。由于設備暫未聯(lián)網，且 Wi-Fi 網絡的數(shù)據幀已通過加密，設備無法獲取 payload 的內容，但可以獲取報文的某些特征數(shù)據，例如每個報文的長度，同時對于某些數(shù)據幀；例如 UDP 的廣播包或多播包，其報文的幀頭結構比較固定，較容易識別。

? 此時在手機 App 或者小程序側，即可通過發(fā)送 UDP 的廣播包或多播包，并利用報文的特征，例如長度變化進行編碼。

? 將目標 Wi-Fi 路由器的 SSID/PSW 字符以約定的編碼方式發(fā)送出去，設備端在捕獲到 UDP 報文后，按約定的方式進行解碼，即可得到目標 Wi-Fi 路由器的相關信息并進行聯(lián)網。

二.對項目進行配置

在微信開發(fā)者工具中需要使用到配網功能時??

新建項目之后，在app.js文件中添加下面代碼

  "plugins": {
    "airkiss": {
      "version": "1.1.0",
      "provider": "wx610ea582556c983e"
    }
  }

? 而在uni-app開發(fā)中，如果我們在微信開發(fā)者工具中進行了配置，那本次配置的內容會在HBuilder X重新編譯之后消失。

? 所以我們需要在HBuilder X中進行相關配置。

? 在進入項目之后，打開項目的manifest.json文件，在小程序特有相關中添加下面代碼

  "plugins": {
    "airkiss": {
      "version": "1.1.0",
      "provider": "wx610ea582556c983e"
    }
  }

在運行到微信開發(fā)者工具后，在控制臺會提示你添加插件，然后按提示添加即可。

進行配網的代碼就很簡單，建議在小程序的條件編譯中編寫代碼

三.配網頁面代碼常規(guī)流程

有關WIFI功能都需要用戶打開GPS??

? 注意：請自行處理是否為2.4G頻段路由器

1. 打開WIFI模塊

   			// #ifdef MP-WEIXIN
   			wx.startWifi({
   				success(res) {
   					console.log(res)
   				},
   				fail(res) {
   					console.log(res)
   					uni.showToast({
   						title: '請打開WIFI',
   						icon: 'none',
   						duration: 1000
   					});
   
   				},
   			})
   			// #endif
   

2. 進入頁面,獲取當前所連接的WIFI

   				// #ifdef MP-WEIXIN
   				var that = this
   				wx.getConnectedWifi({
   					success(res) {
   						console.log(res)
   						that.BSSID = res.wifi.BSSID
   						that.WIFIName = res.wifi.SSID
   					},
   					fail(res) {
   						console.log(res)
   						//報錯的相關處理
   					},
   				})
   				// #endif
   

3. 點擊某個按鈕獲取WIFI列表

   				// #ifdef MP-WEIXIN
   				var that = this
   				wx.getWifiList({
   					success(res) {
   						console.log(res)
   						wx.onGetWifiList(function(res) {
   							console.log("獲取wifi列表");
   							console.log(res.wifiList); //在這里提取列表數(shù)據
                               //通過遍歷將WIFI名字存入集合，以便下卡框等組件使用
   							for (var i = 0; i < res.wifiList.length; i++) {
   								that.wifiList.push(res.wifiList[i].SSID)
   							}
   						})
   					},
   					fail(res) {
   						console.log(res)
   						//報錯的相關處理
   					},
   				})
   				// #endif
   

4. 開始配網，將WIFI名字和WIFI密碼傳輸給硬件

   				// #ifdef MP-WEIXIN
   				const airkiss = requirePlugin('airkiss');
   				if (this.wifiList.length == 0) {
   					this.SSID = this.WIFIName
   				} else {
   					this.SSID = this.wifiList[this.value]
   				}
   				if (this.SSID != '' && this.password != '') {
   					console.log(airkiss)
   					uni.showLoading({
   						title: '配網中請稍后..'
   					});
   					airkiss.startAirkiss(this.SSID, this.password, function(res) {
   						console.log(res)
   						switch (res.code) {
   							case 0:
   								uni.hideLoading();
   								uni.showModal({
   									title: '初始化失敗',
   									content: res.result,
   									showCancel: false,
   									confirmText: '收到',
   								})
   								break;
   							case 1:
   								uni.hideLoading();
   								uni.showModal({
   									title: '配網成功',
   									content: '設備IP：' + res.ip + '\r\n 設備Mac：' + res.bssid,
   									showCancel: false,
   									confirmText: '好的',
   								})
   								break;
   							case 2:
   								uni.hideLoading();
   								uni.showModal({
   									title: '配網失敗',
   									content: '請檢查密碼是否正確',
   									showCancel: false,
   									confirmText: '收到',
   								})
   								break;
   
   							default:
   								uni.hideLoading();
   								break;
   						}
   
   					})
   				} else {
   					uni.showToast({
   						title: '請選擇WIFI并輸入密碼',
   						icon: 'none',
   						duration: 1000
   					});
   				}
   				// #endif
   

   ??大功告成

   偷偷地說：有問題都是硬件開發(fā)的問題，哈哈哈文章來源地址http://www.zghlxwxcb.cn/news/detail-478052.html

到了這里，關于uni-app 微信小程序端-AirKiss一鍵配網的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！