基于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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！