“微信小程序：前后端通信（自建后台）”的版本间的差异

2022年8月5日 (五) 06:22的版本

前端获取后端数据

原始版

在这个版本中，前端所有的数据 都来自前端本身，

未从后端读取数据。

WXML

<!-- 顶部 -->
<view class="box1">
<image bindtap="scanCodeEvent" src="../../img/扫码.png" >{{scanCode}}</image>
<input type="text" name="" id="" placeholder="请输入主控端"/>
</view>
<!-- 导航栏 -->
<view class="box2">
<view class="box2-1">
<view>运行中</view>
<view>维护中</view>
</view>
<!-- 下方 -->
<view class="box2-2"wx:for="{{listBox}}" wx:key="id">
<view class="square" >{{item.title}}</view>
<view class="hou">
<view class="on">
<view>设备({{item.total_num}})</view>
<view>开机({{item.running_num}})</view> 
 <view>关机({{item.close_num}})</view>
</view>
<view class="under">
<button class="btn1" style="width: 230rpx; height: 74rpx;" >一键关机</button>
<button class="btn2" style="width: 230rpx; height: 74rpx;">一键重启</button>
</view>
</view>
</view>
</view>
<!-- 添加设备 -->
<button class="box3" style="width: 350rpx; height: 100rpx;">添加我的设备</button>

WXSS

.box1 image{
width: 100rpx;
height: 100rpx;

}
.box1 input{
width: 80%;
height: 80rpx;
border: 1rpx #808080 solid;
border-radius: 40rpx;
padding-left: 40rpx;
margin-top: 10rpx;
}
.box1{
    display: flex;
    margin: 20rpx;
}
/* 第二 */
.box2-1{
display: flex;
}
.box2-1 view{
width: 50%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
}
/* 下部 */
.box2-2{
    margin: 20rpx;
    width: 95%;
    height: 150rpx;
    border: 1rpx #2A82E4 solid;
    border-radius: 20rpx;display: flex;
}
.square{
width: 150rpx;
height: 150rpx;
background-color: #2A82E4;
border-radius: 20rpx;
color: white;
line-height: 150rpx;
text-align: center;
text-decoration:underline; 
}
.hou{
width: 80%;
    height: 150rpx;
}
.on{
display: flex;
width: 100%;
height: 50rpx;margin: 10rpx;
}
.on view{
width: 33%;
height: 50rpx;
text-align: center;
font-size: smaller;
}

.btn1{
padding: 0;
font-size: smaller;
border-radius: 37rpx;
padding: 10rpx;
background-color: #A2D4FC;
color: white;
font-weight: 400;
}
.btn2{
padding: 0;
border-radius: 37rpx;
padding: 10rpx;
background-color: #F28585;
color: white;
font-size: small;
font-weight: 400;
}
.under{
display: flex;
margin-left: 20rpx;
}
/* 底部 */
.box3{padding: 0;
    display: block;
position: absolute;
top:950rpx;
left: 200rpx;
background: -webkit-linear-gradient(left,#0876FC, #403CC7);
line-height: 100rpx;
border-radius: 50rpx;
color: white;
}

JS

// pages/switch/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scanCode: '../../img/扫码.png',
    listBox: [{
      title: "机房306",
      id:'306',
      total_num:30,
      running_num:20,
      close_num:10
    }, {
      title: "机房307",
      id:'307',
      total_num:35,
      running_num:20,
      close_num:10
    }, {
      title: "机房308",
      id:'308',
      total_num:33,
      running_num:25,
      close_num:8
    }, {
      title: "机房309",
      id:'309',
      total_num:36,
      running_num:33,
      close_num:3
    }]
  },

...

})