参照米家APP布局和样式,编写的一款智能家居小程序（附源码）

smart-home-master是一款根据米家APP布局和样式编写的智能家居小程序。它帮助用户更便捷地管理和控制自己的智能家居设备。该小程序提供了直观的界面设计和用户友好的操作方式，使得用户可以轻松实现对家中设备的远程控制和日常管理。

通过smart-home-master，用户可以快速查看家中不同设备的状态，包括智能灯具、智能插座、智能门锁等。此外，该小程序还支持设备的定时开关功能，用户可以根据自己的需求设置定时任务，实现智能化的管理。

效果预览

部分源码

<template>
  <div class="home-container">

    <div class="header-content">
      <div class="weather_info">
        <div offset="1" span="5" class="weather_info_1">
          <span class="weather_temp">24</span>
          <span class="weather_temp_unit"> ℃</span>
        </div>
        <div span="6" class="weather_info_2">
          <div class="address">北京·朝阳</div>
          <div class="weather_info_text">多云</div>
        </div>
      </div>
      <div class="weather_info">
        <span class="weather_info_text_2">室外空气 良 | 周边水质 不可直饮 | 环境湿度 潮湿</span>
      </div>
    </div>

    <div class="main-content">
      <div class="room-list">
        <i-tab-bar :current="currentInfo" color="#00BC9C" @change="handleChange">
          <i-tab-bar-item key="common" icon="collection" current-icon="collection_fill" title="常用"></i-tab-bar-item>
          <i-tab-bar-item key="bedroom" icon="clock" current-icon="clock_fill" title="卧室"></i-tab-bar-item>
          <i-tab-bar-item key="living" icon="homepage" current-icon="homepage_fill" title="客厅"></i-tab-bar-item>
          <i-tab-bar-item key="kitchen" icon="task" current-icon="task_fill" title="厨房"></i-tab-bar-item>
          <i-tab-bar-item key="nearby" icon="share" current-icon="share_fill" title="附近"></i-tab-bar-item>
          <i-tab-bar-item key="setting" icon="setup" current-icon="setup_fill" title="设置"></i-tab-bar-item>
        </i-tab-bar>
      </div>
      <div class="room-device">
        <div style="border: 0 solid #e9eaec; border-bottom-width: 1px;">
          <view
            style="padding-left:12px;padding-top:12px;padding-bottom:12px;font-size: 16px;color: #666666;display: inline-block">
            <span>{{currentRoom}}</span>
          </view>
          <view style="font-size: 10px;margin-left: 5px;color: #999999;display: inline-block">
            <span>{{deviceList.length}}个设备</span>
          </view>
        </div>

        <i-cell v-for="(item, index) in deviceList" :key="item.value" :title="item.title" :label="item.label" :image="item.image">
          <i-switch v-if="item.isSwitch"  :value="item.value" @change="handleChangeDevice(item)" slot="footer">
            <i-icon type="right"></i-icon>
            <i-icon type="close"></i-icon>
          </i-switch>
        </i-cell>

      </div>
    </div>

    <i-message id="message" />
  </div>
</template>

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()
export default {
  config: {
    'usingComponents': {
      'i-button': '../../static/iview/button/index',
      'i-tabs': '../../static/iview/tabs/index',
      'i-message': '../../static/iview/message/index',
      'i-tab-bar': '../../static/iview/tab-bar/index',
      'i-tab-bar-item': '../../static/iview/tab-bar-item/index',
      'i-row': '../../static/iview/row/index',
      'i-col': '../../static/iview/col/index',
      'i-grid': '../../static/iview/grid/index',
      'i-grid-item': '../../static/iview/grid-item/index',
      'i-grid-icon': '../../static/iview/grid-icon/index',
      'i-grid-label': '../../static/iview/grid-label/index',
      'i-avatar': '../../static/iview/avatar/index',
      'i-cell-group': '../../static/iview/cell-group/index',
      'i-cell': '../../static/iview/cell/index',
      'i-panel': '../../static/iview/panel/index',
      'i-toast': '../../static/iview/toast/index',
      'i-switch': '../../static/iview/switch/index',
      'i-icon': '../../static/iview/icon/index'
    },
    navigationBarTitleText: '码农园区'
  }
}

总的来说，smart-home-master是一款注重用户体验和安全性的智能家居小程序。它将米家APP的布局和样式融入其中，提供了方便实用的功能，帮助用户更好地管理家中的智能设备。

源码截图：

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】