ffeature：优化设备列表、选择模式界面的UI、流程

app.js

@@ -25,6 +25,8 @@ App({
     isIOS: false,
     isAndroid: false,
     isHuaWei: false,
+    // 当前设备
+    device: {},
     // 设备列表，跟app同步字段
     classifyProducts: [],
     //MQTT连接的配置

app.json

@@ -15,7 +15,9 @@
     "pages/aboutInfo/aboutInfo",
     "pages/deviceList/devices",
     "pages/deviceConMode/index",
-    "pages/connectBle/connectBle"
+    "pages/connectBle/connectBle",
+    "pages/deviceDetail/detail",
+    "pages/piano/wallpaper/wallpaper"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -8,6 +8,12 @@
   background-color: #A4D099;
 }
 
+.main_color {
+  background-color: #6546A3;
+}
+
+
+
 .main_black {
   color: #333333;
 }

devices/bt_helper.js

@@ -53,11 +53,14 @@ class BtHelper {
         // BtHelper._isConnecting = connect;
     }
 
-    async search(mqttFilterList) {
+    async search(stopCall) {
         let res = await bleManager.startScan()
         this.timer = null;
         this.timer = setTimeout(() => {
-            bleManager.stopScan();
+            this.stopSearch();
+            if (stopCall) {
+                stopCall()
+            }
         }, 10000);
         // console.log(res);
         // return await this._helper.search();
@@ -69,7 +72,7 @@ class BtHelper {
     }
 
     async stopSearch() {
-        bleManager.stopScan();
+        await bleManager.stopScan();
     }
 
     async _connectSuccess() {
@@ -172,19 +175,30 @@ class BtHelper {
     //   }
 
     async initBluetooth(callback) {
-        try {
-            let adpter = await bleManager.initBluetoothAdapter((res) => { });
-            // console.log(res)
-
-            bleManager.checkBluetoothPermission(function (per) {
-                if (callback) {
-                    callback(adpter, per)
-                }
-            });
-            // console.log(per)
-        } catch (error) {
-            console.error(error);
+        let adpter = await bleManager.initBluetoothAdapter((res) => { });
+        // console.log(res)
+        if (!adpter) {
+            wx.showToast({
+                title: '请开启蓝牙功能',
+                icon: 'none'
+            })
+            if (callback) {
+                callback(false, false)
+            }
+            return
         }
+
+        bleManager.checkBluetoothPermission(function (per) {
+            if (!per) {
+                wx.showToast({
+                    title: '没有蓝牙权限',
+                    icon: 'none'
+                })
+            }
+            if (callback) {
+                callback(adpter, per)
+            }
+        });
     }
 
     closeBle() {

pages/connectBle/connectBle.js

@@ -19,79 +19,158 @@ Page({
         })
       }
     },
-    searchTips: "正在搜索设备，请保持设备开机状态",
+    connectStatus: 0,
+    searchTips: "正在搜索设备，请保持开机状态…",
+    subTips: "确认手机蓝牙已打开",
     buttonTips: "正在搜索设备"
+
   },
-  async connectDeviceTap() {
+  setStatus(bleType) {
+    var searchTips = ""
+    var subTips = ""
+    var buttonTips = ""
+    let name = this.data.connectDevice.name;
+    console.log("搜索状态", bleType)
+    switch (bleType) {
+      case 0:
+        // 搜索中
+        searchTips = "正在搜索设备，请保持开机状态…"
+        subTips = "确认手机蓝牙已打开"
+        buttonTips = "正在搜索设备"
+
+        break;
+      case 1:
+        // 搜索失败
+        searchTips = "未搜索到" + name
+        subTips = "请检查设备是否被其他手机连接，或在手机蓝牙忽略掉原来的蓝牙连接重新连接。"
+        buttonTips = "重新搜索"
+
+        break;
+      case 2:
+        // 搜索到
+        searchTips = "搜索到" + name
+        subTips = ""
+        buttonTips = "连接"
+        break;
+      case 3:
+        // 连接成功
+        searchTips = "搜索到" + name
+        subTips = ""
+        buttonTips = "连接成功"
+        break;
+      case 4:
+        // 连接失败
+        searchTips = "未连接到" + name
+        subTips = "请检查设备是否被其他手机连接，或在手机蓝牙忽略掉原来的蓝牙连接重新连接。"
+        buttonTips = "重新搜索"
+        break;
+
+    }
+
     this.setData({
-      searchTips: "正在搜索设备，请保持设备开机状态",
-      buttonTips: "正在搜索设备"
+      searchTips: searchTips,
+      subTips: subTips,
+      buttonTips: buttonTips,
+      connectStatus: bleType
+    })
+  },
+  async connectDeviceTap() {
+    let _this = this
+    console.log("点击搜索状态", this.data.connectStatus)
+
+    switch (this.data.connectStatus) {
+      case 0:
+        // 搜索中
+        break;
+      case 1:
+      case 4:
+        // 搜索失败，点击重新搜索
+        _this.startSearch()
+        break;
+      case 2:
+        //  搜索到
+        btHelper.connect(element, function (data) {
+          // console.log("连接成功", data)
+          toastUtil.show("开始连接设备")
+
+          _this.setStatus(data ? 3 : 4)
+          // 蓝牙模式
+          _this.data.connectDevice.connectType = 1
+          getApp().globalData.device = _this.data.connectDevice
+          setTimeout(() => {
+            wx.reLaunch({
+              url: '/pages/index/index', // 替换为首页的路径
+            });
+          }, 500);
+        })
+        break;
+      case 3:
+        // 连接成功
+        break;
+    }
+  }, getConnectedDevices: async function () {
+    let _this = this
+    const connectedDevices = await btHelper.getConnectedDevices()
+    console.log("全部设备", connectedDevices)
+    if (connectedDevices.length > 0) {
+      connectedDevices.forEach(element => {
+        console.log('已连接的蓝牙设备:', element);
+        _this.setStatus(3)
+      });
+    } else {
+    }
+    return connectedDevices;
+  }, async startSearch() {
+    this.setStatus(0)
+    let _this = this
+    btHelper.search(async function () {
+      const connectedDevices = await _this.getConnectedDevices()
+      if (connectedDevices.length == 0) {
+        _this.setStatus(1)
+      }
     })
-    await btHelper.search()
-    await this.getConnectedDevices()
+
+  },
+
+  didFindDevice() {
     let _this = this
     btHelper.findDevices(function (devices) {
       devices.forEach(element => {
         console.log('发现设备:', element.deviceId, element.uuid, element.mac);
 
         let deviceId = element.deviceId ?? ""
+        // todo 
         if (deviceId.includes("D8:24:07:89:31") ||
           element.deviceId.includes("F5:A5:43:70:C8:F1") ||
           element.deviceId.includes("D1:4D:DA:76:42:50")
         ) {
-          toastUtil.show("开始连接设备")
           btHelper.stopSearch()
-          _this.setData({
-            searchTips: "正在连接设备，请保持设备开机状态",
-            buttonTips: "正在连接设备"
-          })
-          btHelper.connect(element, function (data) {
-            // console.log("连接成功", data)
-            _this.setData({
-              searchTips: data ? "连接成功" : "连接失败",
-              buttonTips: data ? "连接成功" : "连接失败"
-            })
-          })
-          return
+          _this.setStatus(2)
         }
       });
     })
-  }, getConnectedDevices: async function () {
-    try {
-      const connectedDevices = await btHelper.getConnectedDevices()
-      console.log("全部设备", connectedDevices)
-      if (connectedDevices) {
-        connectedDevices.forEach(element => {
-          console.log('已连接的蓝牙设备:', element);
-  
-          // if (element.deviceId.includes("D8:24:07:89:31") ||
-          //   element.deviceId.includes("F5:A5:43:70:C8:F1") ||
-          //   element.deviceId.includes("D1:4D:DA:76:42:50")
-  
-          // ) {
-          //   toastUtil.show("开始连接设备")
-          //   btHelper.stopSearch()
-          //   btHelper.connect(element, function (data) {
-          //     // console.log("连接成功", data)
-          //   })
-          // }
-          return;
-        });
-      }
-      
-      // console.log('已连接的蓝牙设备:', connectedDevices);
-    } catch (error) {
-      console.error(error);
-    }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    btHelper.initBluetooth()
+    let _this = this
+    btHelper.initBluetooth(function (adapterState, hasPermission) {
+      console.log("蓝牙状态", adapterState, hasPermission)
+      if (adapterState && hasPermission) {
+        _this.setStatus(0)
+        _this.startSearch()
+      } else {
+        _this.setStatus(1)
+      }
+    })
+
+    _this.didFindDevice()
 
-    let device = options.param;
+    let json = JSON.parse(options.param)
+    console.log(json)
+    let device = json
     this.setData({
       connectDevice: device
     })

pages/connectBle/connectBle.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "nav-bar": "./../components/navbar/navbar"
+  }
 }

pages/connectBle/connectBle.wxml

@@ -2,7 +2,9 @@
 <view class="container">
 				<nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'></nav-bar>
 				<image class="device_pic" src="{{connectDevice.img}}" mode="aspectFill" />
-				<view class="top_tips">{{searchTips}}</view>
-				<view style="font-size: 14rpx; color: #666666;">拨动设备-开机</view>
-				<view class="main_bg_green connect_button" bind:tap="connectDeviceTap">{{buttonTips}}</view>
+				<view class="top_tips main_black">{{searchTips}}</view>
+				<view style="font-size: 28rpx; color: #666666; margin-top: 32rpx; display: flex; justify-content: center; align-items: center;">
+								{{subTips}}
+				</view>
+				<view class="main_color connect_button" bind:tap="connectDeviceTap">{{buttonTips}}</view>
 </view>

pages/connectBle/connectBle.wxss

@@ -5,29 +5,35 @@
 }
 
 .device_pic {
-	top: 200rpx;
-	height: 200rpx;
-	margin-inline: 100rpx;
+	margin-top: 128rpx;
+	margin-left: 140rpx;
+	margin-right: 140rpx;
+	/* width: 470rpx; */
+	height: 432rpx;
+	background: #F2F5F7;
+	border-radius: 24rpx;
 }
 
 .top_tips {
-	top: 100rpx;
+	margin-top: 128rpx;
 	margin-inline: 20rpx;
-	color: white;
 	font-size: 28rpx;
 	text-align: center;
+	justify-content: center;
+	align-items: center;
+
 }
 
 .connect_button {
-	position: fixed;
-	bottom: 100rpx;
-	left: 60rpx;
-	right: 60rpx;
-	/* margin-inline: 60rpx; */
+	margin-top: 456rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-inline: 64rpx;
+	font-size: 32rpx;
+	font-weight: Medium;
 	color: white;
 	text-align: center;
-	padding: 10px 0;
-	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-	border-radius: 16rpx;
-	/* 添加阴影效果 */
+	border-radius: 44rpx;
+	height: 88rpx;
 }

pages/deviceConMode/index.js

@@ -53,8 +53,9 @@ Page({
     let type = device.type ?? 0;
     console.log("选择模式", type)
     if (type == 1) {
-      let device = e.currentTarget.dataset.data
-      routeUtil.jumpParam(route_constant.connectBle, this.data.connectDevice)
+      // let device = e.currentTarget.dataset.data
+      let json = JSON.stringify(this.data.connectDevice)
+      routeUtil.jumpParam(route_constant.connectBle, json)
     } else if (type == 2) {
       wx.navigateTo({
         url: './../deviceConnect0/deviceConnect0',

pages/deviceConMode/index.wxml

@@ -19,5 +19,5 @@
     </view>
   </view>
   <view class="setDeviceModelTips">开启后点击“下一步”</view>
-  <view class="main_bg_green connect_button" bind:tap="nextTap">连接设备</view>
+  <view class="main_color connect_button" bind:tap="nextTap">连接设备</view>
 </view>

pages/deviceConMode/index.wxss

@@ -106,14 +106,16 @@
 
 .connect_button {
 	position: fixed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	bottom: 100rpx;
 	left: 60rpx;
 	right: 60rpx;
-	/* margin-inline: 60rpx; */
+	font-size: 32rpx;
+	font-weight: Medium;
 	color: white;
 	text-align: center;
-	padding: 10px 0;
-	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-	border-radius: 16rpx;
-	/* 添加阴影效果 */
+	border-radius: 44rpx;
+	height: 88rpx;
 }