当前位置:   article > 正文

【云平台】小白从零开始:小程序阿里云平台控制STM32(小程序篇)_微信小程序 阿里云开发 csdn

微信小程序 阿里云开发 csdn

小白从零开始:小程序阿里云平台控制stm32(小程序篇)


前言

小白从零开始:小程序阿里云平台控制STM32(硬件篇)

【DIY】stm32f103c8t6+mqtt阿里云+小程序+n多外设

使用工具:
PCB设计: 立创EDA+嘉立创
硬件外设:STN32F103C8T6最小系统+dht11+bh1750+mq2+mq7+gps+0.96oled+蓝牙hc06+esp8266-01s
设计出来的总体是这样


提示:以下是本篇文章正文内容,下面案例可供参考

一、准备:小程序注册+开发者工具

小程序注册登录地址

小程序开发者工具下载
请添加图片描述

小程序代码下载

二、小程序开发者工具配置

在项目配置里把不校验合法域名勾上
请添加图片描述
下载源代码并载入,可以看到实时读取stm32f103c8t6单片机端的信息

请添加图片描述


三、小程序 js代码更改位置

所需读取信息函数名设置
请添加图片描述
阿里云平台三元数更改
请添加图片描述
接收stm32单片机发出的信息
请添加图片描述
从微信端下发信息到stm32单片机端
请添加图片描述

四、小程序 wxml代码更改位置

更改背景图片

<image class='myimage' src="../../images/timg.jpg" mode="aspectFill"></image>
  • 1

更改按钮属性

<button class="weui-btn" type="primary" size="mini"  bindtap="onClickOpen">开电机</button>
  • 1

更改view信息读取框属性

<view class = "B"><text>温度:{{CuTemperature}}°</text></view>
  • 1

五、小程序 wxss代码更改位置

更改控件属性

   .B{
      height: 100rpx;
      width: 500rpx;
      border: 4rpx solid #328EEB;
      border-radius: 5px;
      margin:25rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

总结

本文仅仅简单介绍了小程序方面的更改配置,评论区欢迎讨论。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/570350
推荐阅读
相关标签
  

闽ICP备14008679号