物联网设备不需要安装APP,只需要有微信就能在小程序里控制插座,随心控制没有压力。
开发营很短,只有一次轻风拂面般地培训直播,估计很多疑问要靠自己谷歌摸索。一开始就考虑简单粗暴完成作业,大奖是给有实力的大佬准备的。
所以只设计一个页面,把功能堆在同一页面里实现。定时,报表以及开关控制。
工作很忙,开发拖延症发作。最后把设计图里的定时功能取消了。扣点分吧。作业能完成就是好孩子。
想要快速起飞,谷歌不可少。谷歌一下微信小程序sketch模板,找到后下载,打开,然后开画。
还是谷歌,找到一个 在线低多边型生成工具 (https://www.shejidaren.com/examples/tools/low-poly/),生成背景图,使用特别有科技感的蓝色做主色调。
徒手拖放形状就可以画出面无表情的“插座关”和满脸微笑的“插座开”
谷歌物联网控制SVG,找到一堆免费图标,选了几个好看的用上。
直接帖上,SVG放大缩中不会失真。合适大小,加字。
徒手画出一个图表的样子,希望可以用代码画得出来。后来发现使用wxchart组件后,要画成这样很容易。
最后没能实现,但是设计图的时候随手就画上了。打开延时会在关闭动作后30秒钟才发生真实关闭。定时面板配置好定时,会在主面板显示离现在最近的定时计划。
写程序是最无法用语言描述的事情了,大家还是请直接看代码吧。代码很简单,涂鸦工程创建好之后就会自动生成一个小程序模板。
把设计图里的画好的素材一个个导出,wxml就是html,wxss就是css,用标签把素材一个个添上去,设置属性样式,UI只需要 分分钟。
到开发者QQ群里交流一番,知道已经有大佬分享了经验。从布马的工程中抄到控制开关插座的部分,从小涛大佬的工程里抄到wxchart的使用案例。
最后自己调试几下小程序就能工作了。
相对而言,编辑这个文档页面和拍视频更令人搔头啊。
完成后的小程序图是这样的: