空调,它总在无风时出现,《行走的空调》《朋友圈空调》"/>
半天制作一台刷爆朋友圈的空调,它总在无风时出现,《行走的空调》《朋友圈空调》
最近朋友圈刷爆了的空调,这里教你半天制作完成。
可以微信搜索小程序《行走的空调》,体验,吐槽,提建议!
需要源码在文章结束有联系方式(无偿提供源码);
先看成品:
两大模块:
空调(主机,温度,风速,冷风,热风,风向)
遥控器(开关,冷热风按钮,扫风按钮,加减温度,风速按钮)
在加上一个小功能,电源开关,一台等能耗的便携空调就做好了~
排版思路:
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
更多推荐
半天制作一台刷爆朋友圈的空调,它总在无风时出现,《行走的空调》《朋友圈空调》
发布评论