首页更改,增加灯光控制页面

app.json

@@ -2,6 +2,7 @@
   "pages":[
     "pages/index/index",
     "pages/old/index",
+    "pages/light/light",
     "pages/tools/tools"
   ],
   "tabBar": {
@@ -17,9 +18,9 @@
           "selectedIconPath": "icons/png/cam-active.png"
         },
         {
-          "pagePath": "pages/tools/tools",
-          "iconPath": "icons/png/ble.png",
-          "selectedIconPath": "icons/png/ble-active.png"
+          "pagePath": "pages/light/light",
+          "iconPath": "icons/png/lamp.png",
+          "selectedIconPath": "icons/png/lamp-active.png"
         }
     ]
 },

app.wxss

@@ -7,6 +7,7 @@
   justify-content: space-between;
   /* padding: 200rpx 0; */
   box-sizing: border-box;
+  overflow: scroll;
 } 
 
 .custom-info-btn{
@@ -24,76 +25,6 @@
   box-shadow: 1px 1px 5px black;
 }
 
-/* 方块组件 */
-.rounded-chunk{
-  width: 100%;
-  height: auto;
-  /* display: flex; */
-  padding: 5px;
-  box-sizing: border-box;
-}
-.rounded-chunk > .chunk{
-  width: 100%;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: #f5f5f5;
-  border-radius: 3px;
-  box-shadow: 1px 1px 5px black;
-}
-.chunk-title{
-  width: 100%;
-  font-size: large;
-  height: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  box-sizing: border-box;
-  background-color: #f5f5f5;
-  box-shadow: 1px 1px 5px black;
-}
-
-.c-content{
-  width: 100%;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  box-sizing: border-box;
-  background-color: #f5f5f5;
-  box-shadow: 1px 1px 5px black;
-}
-
-.line{
-  width: 100%;
-  height: 35px;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  background-color: #f5f5f5;
-  padding:  5px;
-}
-.line > .info{
-  width: 70%;
-  height: 100%;
-  display: flex;
-  /* justify-content: center; */
-  align-items: center;
-  box-sizing: border-box;
-  border-right: 1px solid #d9d9d9;
-}
-.line > .select{
-  width: 30%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 
 .align-left{
   text-align: left;
@@ -205,3 +136,23 @@
 .rounded{
   border-radius: 3px;
 }
+
+
+.btn{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 3px;
+  background-color: #00a790;
+  color: white;
+  padding: 5px 25px;
+  width: auto;
+  height: auto;
+  box-shadow: 1px 1px 5px rgb(119, 119, 119);
+}
+
+.btn:active{
+  background-color: #00a790;
+  box-shadow: 1px 1px 3px black;
+}

components/stateLed/stateLed.wxss

@@ -1,5 +1,5 @@
 /* components/led..wxss */
 .led{
   border-radius: 50%;
-  border: 1px solid black;
+  border: 1px solid rgb(223, 223, 223);
 }

pages/index/index.js

@@ -31,7 +31,7 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
-
+    
   },
 
   /**

pages/index/index.wxml

@@ -1,20 +1,24 @@
 <!-- 导航栏,索尼蓝牙遥控与蓝牙调试器工具 -->
 <view class="rounded-chunk">
+   <!-- 灯光控制器 -->
     <view class="chunk">
         <!-- change log -->
-        <view class="chunk-title rounded-t">蓝牙控制器</view>
+        <view class="chunk-title rounded-t">灯光控制器</view>
         <view class="c-content rounded-b">
-            <!-- info -->
-            本工具用于调试蓝牙设备，包括蓝牙设备的搜索、连接、断开、发送数据、接收数据等功能。
+            <text class="sm-text">本工具用于控制专属led</text>
+        </view>
+        <view class="c-btn">
+            <view class="btn">立即使用</view>
         </view>
     </view>
 
+    <!-- 索尼遥控 -->
     <view class="chunk mt">
         <!-- change log -->
         <view class="chunk-title rounded-t">索尼遥控</view>
         <view class="c-content">
-            <!-- info -->
-            本工具用于控制索尼相机,拍照
+            <text class="sm-text">本工具用于控制索尼相机,拍照</text>
+            
         </view>
         <view class="c-content rounded-b">
             
@@ -27,9 +31,27 @@
                 <view class="select {{idx === (sonyItems.length - 1) ? '':'bool-font'}}">
                     <fnState state="{{item.state}}"></fnState>
                 </view>
-                
             </view>
 
+<!-- 居中路由按钮. 实现立即跳转至对应页面-->
+        <view class="c-btn" >
+            <view class="btn">立即使用</view>
+        </view>
+        </view>
+    </view>
+
+    <!-- 蓝牙命令控制器 -->
+    <view class="chunk mt">
+        <!-- change log -->
+        <view class="chunk-title rounded-t">蓝牙控制器</view>
+        <view class="c-content rounded-b">
+            <!-- info -->
+            <text class="sm-text">本工具用于调试蓝牙设备，包括蓝牙设备的搜索、连接、断开、发送数据、接收数据等功能。
+            </text>
+        </view>
+        <view class="c-btn">
+            <view class="btn">立即使用</view>
         </view>
     </view>
+
 </view>

pages/index/index.wxss

@@ -0,0 +1,95 @@
+/**index.wxss**/
+
+/* 方块组件 */
+.rounded-chunk{
+    width: 100%;
+    height: 100vh;
+    /* display: flex; */
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: scroll;
+  }
+  .rounded-chunk > .chunk{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f5f5;
+    border-radius: 3px;
+    box-shadow: 1px 1px 5px black;
+  }
+  .chunk-title{
+    width: 100%;
+    height: 45px;
+    font-size: large;
+    height: auto;
+    display: flex;
+    /* justify-content: center; */
+    align-items: center;
+    padding: 5px;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
+    color: black;
+    font-size: large;
+    font-weight: bold;
+    /* 字间距 */
+    letter-spacing: 0.5em;
+  }
+  
+  .c-content{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    /* justify-content: center; */
+    /* align-items: center; */
+    padding: 5px;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
+    
+  }
+
+  /* 小号-正文-样式 */
+  .sm-text{
+    font-size: small;
+    /* 首行缩进 */
+    text-indent: 2em;
+  }
+  
+  .line{
+    width: 100%;
+    height: 35px;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    background-color: #fff;
+    padding:  5px;
+  }
+  .line > .info{
+    width: 70%;
+    height: 100%;
+    display: flex;
+    /* justify-content: center; */
+    align-items: center;
+    box-sizing: border-box;
+    border-right: 1px solid #d9d9d9;
+  }
+  .line > .select{
+    width: 30%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .c-btn{
+    width: 100%;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }

pages/light/light.js

@@ -0,0 +1,69 @@
+// pages/light/light.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+  
+    },
+  
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+  
+    },
+  
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+  
+    },
+  
+    /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    // 配置导航栏
+    wx.setNavigationBarTitle({
+      title: '灯光控制'
+    })
+  },
+  
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+  
+    },
+  
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+  
+    },
+  
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+  
+    },
+  
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+  
+    },
+  
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+  
+    }
+  })

pages/light/light.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {
+        "fnState": "/components/fnState/fnState"
+    },
+    "disableScroll":true
+}

pages/light/light.wxml

@@ -0,0 +1,10 @@
+<!--pages/light/light.wxml-->
+<view class="lamp" hover-class="none" hover-stop-propagation="false">
+    <viwe class="handle">
+        
+    </viwe>
+    <!-- 设备扫描操作框 -->
+    <view class="ble-scan-box">
+
+    </view>
+</view>

pages/old/index.js

@@ -1,7 +1,7 @@
 // index.js
 // 获取应用实例
 const getBle =  require("../../utils/ble");
-const handle = require("../../utils/handle");
+import { handle } from '../../utils/handle.js';
 const sleep = require("../../utils/sleep");
 const TimeClock = require('../../utils/timer');
 const app = getApp();
@@ -119,16 +119,20 @@ Page({
     
     try {
       console.log("init ble");
-      await ble.initBle();
+      console.log(handle);
+      console.log(handle);
+      console.log(handle);
+      console.log(handle);
+      console.log(handle);
+      let [err,res] = await handle(ble.initBle());
+      if(err){throw err}
       ble.onSearch = this.onSearchHandle;
       this.setData({
         ble: {...this.data.ble,init: true},
       })
     } catch (error) {
       console.log(error);
-      this.setData({
-        ble: {...this.data.ble,init: false},
-      })
+      
       wx.showModal({
         title: '初始化蓝牙失败',
         content: error.errMsg,
@@ -140,6 +144,9 @@ Page({
           }
         }
       })
+      this.setData({
+        ble: {...this.data.ble,init: false},
+      })
     }
   },
   async holdFoucus(){

pages/tools/tools.wxss

@@ -1 +1,2 @@
-/* pages/tools/tools.wxss */
+/* pages/tools/tools.wxss */
+

utils/handle.js

@@ -20,3 +20,4 @@ export function handle(promise) {
   })
 }
 
+