小白從零開始：小程序阿里云平臺控制stm32（小程序篇）

文章目錄

• 前言
• 一、準備：小程序注冊+開發者工具
• 二、小程序開發者工具配置
• 三、小程序 js代碼更改位置
• 四、小程序 wxml代碼更改位置
• 五、小程序 wxss代碼更改位置
• 六、獲取資料方式
• 總結

---

前言

小白從零開始：小程序阿里云平臺控制stm32（硬件篇）

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

使用工具：
PCB設計: 立創EDA+嘉立創
硬件外設：stm32f103c8t6最小系統+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>

更改按鈕屬性

<button class="weui-btn" type="primary" size="mini" bindtap="onClickOpen">開電機</button>

更改view信息讀取框屬性

<view class = "B"><text>溫度：{{CuTemperature}}°</text></view>

五、小程序 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.公眾號：萬物匯連，關鍵詞回復：PCB。
2.CSDN：點擊這里：代碼資源
3.關注B站：Kisorge
UID：29599216

總結

本文僅僅簡單介紹了小程序方面的更改配置，評論區歡迎討論。

總結

以上是生活随笔為你收集整理的小白从零开始：小程序阿里云平台控制stm32（小程序篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。