基于Vue框架微信小程序物联网项目之设计笔记记录（1）--简单的界面显示实现
基于Vue框架微信小程序物联网项目之设计笔记记录
Vue
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网地址 https://cn.vuejs.org/
软件配置(具体配置最好看视频配置或者后面重新写博客)
VScode（管理员版本）
Nodejs
微信开发者工具 （稳定版）
创建工程（视频教程）
工程
简单代码实现一些静态显示
主要页面显示效果
<template>
<div class="wrapper">
<div class="header-wrapper">
<div class="header-title">
<span>空气质量-良好</span>
<span>安庆市</span>
</div>
<div class="header-text">
<span>55</span>
<span>阴天</span>
</div>
<div class="weather-advice">空气质量良好，健康人群外出无需刻意防护</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/wendu.png" />
<div class="data-text">
<div class="data-title">温度</div>
<div class="data-value">30℃</div>
</div>
</div>
<div class="data">
<img class="data-logo" src="/static/images/shidu.png" />
<div class="data-text">
<div class="data-title">湿度</div>
<div class="data-value">86%</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/guangzhaodu.png" />
<div class="data-text">
<div class="data-title">光照度</div>
<div class="data-value">1234Lx</div>
</div>
</div>
<div class="data">
<img class="data-logo" src="/static/images/led.png" />
<div class="data-text">
<div class="data-title">客厅灯</div>
<div class="data-value">
<switch color="#3d7ef9" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/beep.png" />
<div class="data-text">
<div class="data-title">报警器</div>
<div class="data-value">
<switch color="#FF0033" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
主要格式框架
<style lang="scss" scoped>
.wrapper {
padding: 15px;
.header-wrapper {
background-color: #3d7ef9;
border-radius: 20px;
color: #fff;
box-shadow: #d6d6d6 0px 0px 5px;
padding: 15px 30px;
.header-title {
display: flex;
justify-content: space-between;
}
.header-text {
font-size: 32px;
font-weight: 400;
display: flex;
justify-content: space-between;
}
.weather-advice {
margin-top: 20px;
font-size: 12px;
}
}
.data-wrapper {
margin-top: 20px;
display: flex;
justify-content: space-between;
.data {
background-color: #fff;
width: 150px;
height: 80px;
border-radius: 20px;
display: flex;
justify-content: space-around;
padding: 0 8px;
box-shadow: #d6d6d6 0px 0px 5px;
.data-logo {
height: 36px;
width: 36px;
margin-top: 15px;
}
.data-text {
margin-top: 15px;
color: #7f7f7f;
.data-title {
text-align: right;
}
.data-value {
font-size: 26px;
}
}
}
}
}
</style>
完整代码
<!--
* @Author: dele
* @Date: 2020-06-227 20:00:48
* @LastEditTime: 2020-06-27 20:37:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \APP\src\pages\index\index.vue
-->
<template>
<div class="wrapper">
<div class="header-wrapper">
<div class="header-title">
<span>空气质量-良好</span>
<span>安庆市</span>
</div>
<div class="header-text">
<span>55</span>
<span>阴天</span>
</div>
<div class="weather-advice">空气质量良好，健康人群外出无需刻意防护</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/wendu.png" />
<div class="data-text">
<div class="data-title">温度</div>
<div class="data-value">30℃</div>
</div>
</div>
<div class="data">
<img class="data-logo" src="/static/images/shidu.png" />
<div class="data-text">
<div class="data-title">湿度</div>
<div class="data-value">86%</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/guangzhaodu.png" />
<div class="data-text">
<div class="data-title">光照度</div>
<div class="data-value">1234Lx</div>
</div>
</div>
<div class="data">
<img class="data-logo" src="/static/images/led.png" />
<div class="data-text">
<div class="data-title">客厅灯</div>
<div class="data-value">
<switch color="#3d7ef9" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-wrapper">
<div class="body">
<div class="data-wrapper">
<div class="data">
<img class="data-logo" src="/static/images/beep.png" />
<div class="data-text">
<div class="data-title">报警器</div>
<div class="data-value">
<switch color="#FF0033" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
},
methods: {
},
created () {
// let app = getApp()
}
}
</script>
<style lang="scss" scoped>
.wrapper {
padding: 15px;
.header-wrapper {
background-color: #3d7ef9;
border-radius: 20px;
color: #fff;
box-shadow: #d6d6d6 0px 0px 5px;
padding: 15px 30px;
.header-title {
display: flex;
justify-content: space-between;
}
.header-text {
font-size: 32px;
font-weight: 400;
display: flex;
justify-content: space-between;
}
.weather-advice {
margin-top: 20px;
font-size: 12px;
}
}
.data-wrapper {
margin-top: 20px;
display: flex;
justify-content: space-between;
.data {
background-color: #fff;
width: 150px;
height: 80px;
border-radius: 20px;
display: flex;
justify-content: space-around;
padding: 0 8px;
box-shadow: #d6d6d6 0px 0px 5px;
.data-logo {
height: 36px;
width: 36px;
margin-top: 15px;
}
.data-text {
margin-top: 15px;
color: #7f7f7f;
.data-title {
text-align: right;
}
.data-value {
font-size: 26px;
}
}
}
}
}
</style>
效果
参考资料
萝卜师兄 挽救小白STM32+8266+小程序智能家居毕设实战教程
（非常的详细，从STM32简单入门到微信小程序开发全部手把手教学，非常感谢大佬的教程，可以完成一个简单的物联网项目）
https://www.bilibili.com/video/BV1ae411W7yD
