半天制作一台刷爆朋友圈的空调，它总在无风时出现，《行走的空调》《朋友圈空调》

最近朋友圈刷爆了的空调，这里教你半天制作完成。

可以微信搜索小程序《行走的空调》，体验，吐槽，提建议！

需要源码在文章结束有联系方式（无偿提供源码）；

先看成品：

两大模块：

空调（主机，温度，风速，冷风，热风，风向）

遥控器（开关，冷热风按钮，扫风按钮，加减温度，风速按钮）

在加上一个小功能，电源开关，一台等能耗的便携空调就做好了～

排版思路：

margin-top一个属性基本上大的排版就搞定了

margin-left搞定每一列按钮的位置，使用百分比（计算间距和距离两边的距离）

下面进入功能逻辑实现：

在电源未插上时：点击空调开关按钮，提示（未通电）

在空调未打开时：点击任意按钮，提示（空调未运行）

通电时：点击开关，空调初始化（显示风向，温度，风速，冷热风）

通电时：点击制冷或制热，空调主机显示（冷或热icon），主机下风向（显示相应的风向静态图片）

通电时：点击风速，空调主机显示（不同风速icon）

通电时：点击扫风，空调主机下风向（根据当前是热风还是冷风，切换GIF图片）

通电时：点击加减按钮，加减温度

这里列举其中一个功能实现路径（加减温度）：

1.需要数字图片0-9（命名为0.png，1.png，以此类推）；

2.定义变量十位和个位两个变量；

3.根据加减调整变量的图片路径；

最终在各个操作节点加上声音，一台行走的空调就搞定了；

页面js引入音频组建

var bgam = wx.createInnerAudioContext();

写清楚文件路径，play（）播放就完事了

bgam.src = that.data.image_http_url + “/music/kaijifeng.mp3”

bgam.play()

如果有需要可以联系我，无偿提供源码：

QQ：1047789384