Switch usage (wechat applet)

switch It can be understood as the use of switches , Is to open and close .switch Open is true, Closed yes false, You can also bind functions , Get whether the current state is on or off in the binding function , Then write code according to your own logic .
wxxml

<view class="section">
    <view class="section-title"> The lamp </view>
      <view class="section-form">
        <view class="form-group">
          <label> Light control </label>
          <!--checked The default is true bindchange You can bind functions -->
          <switch   color="#007aff" checked bindchange="light"  ></switch>
        </view>
      </view>      
</view>

js
Corresponding to the above light function , adopt e.detail.value The current status is true still false Then write the logic code , This is the control light （ Raspberry pie ）

  // The lamp   26  high1 low1
  light(e){
  		// Get the status 
       var status=e.detail.value
        Do judgment 
       if(status==true){
            console.log(" turn on the light ")
            // Send a request to the background 
            wx.request({
               url: 'http://localhost:8080/lg/sshlinuxController/jqcontrol',
               data: {
                 com: "python high1.py"
               }
             })
       }else{
          console.log(" Turn off the lights ")
          wx.request({
               url: 'http://localhost:8080/lg/sshlinuxController/jqcontrol',
               data: {
                 com: "python low1.py"
               }
             })
       }
  },

wxcss
I want to use the code here css And share it with you

/* pages/scan/scan.wxss */

page {
     background-color: #fafafa;
   }
   
   
   
   
   .name {
     margin-top: 20rpx; 
     margin-bottom: 40rpx;
   line-height: 32px;
   font-size: 17.25pt;
   color: #000000;
   }
   
   .time-section {
     margin-top: 110rpx;
   
   }
   
   .time {
     display: flex;
     flex-direction: row;
     justify-content: center;
   }
   
   .hourminuts {
     line-height: 154rpx;
     font-size: 41.25pt;
     color: rgba(0, 0, 0, 0.87);
   
   }
   
   .seconds {
     line-height: 72rpx;
     font-size: 18.75pt;
     color: #f5a623;
     margin: auto 0rpx 20rpx 0rpx;
   }
   
   .date {
     margin-top: 12rpx;
     text-align: center;
     font-weight: 500;
     line-height: 22px;
     font-size: 12pt;
     color: rgba(0, 0, 0, 0.54);
     margin-bottom: 60rpx; 
   }
   
   .footer {
     /*display: flex;
     flex-direction: column;
     justify-content: center;*/
     /*align-items: center;*/
     margin: 0 auto;
     width: 80%;
   }
   
   .to-clock {
     background-color: #22a1e0;
     color: #ffffff;
     margin-bottom: 40rpx; 
   }
   
   .hover-to-clock {
     opacity: 0.7;
   }
   
   .to-list {
     color: rgba(0, 0, 0, 0.54);
     margin-bottom: 40rpx;
   }
   
   .hover-to-list {
     opacity: 0.7;
   }
   .main-body {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
   }
   .section {
     width: 100%;
     padding: 20rpx;
   }
   .section-title {
     font-size: 35rpx;
     width: 300rpx;
     height: 80rpx;
     line-height: 80rpx;
     padding-left: 20rpx;
     border-bottom: 4rpx solid #000;
   }
   .section-form {
     display: flex;
     flex-direction: column;
     padding: 10rpx 20rpx;
   }
   .form-group {
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 80rpx;
     line-height: 80rpx;
     font-size: 32rpx;
   }
   .form-group label {
     width: 75%;  
   }
   .form-group input,
   .form-group switch {
     height: 80rpx;  
     width: 60rpx;
     line-height: 80rpx;
     text-align: center;
   }
   .form-group input {
     border-bottom: 2rpx solid #000;
     height: 60rpx;
     line-height: 60rpx;
   }