IoT小能手的微信小程序快速入门教程

小能手的技能栈终于要拓展到微信小程序啦，这真是一件令人高兴的事。

“IoT小能手，你一个搞 IoT 的为啥要学小程序”

“物联网是个筐，啥都能够往里装。小程序作为端侧经典应用，当然也得把它收入囊中。”

关于学习路线和学习资源

在一开始的学习过程中，小能手是围绕小程序-微信官方文档来学习，通过结合热心网友文章凑合着实现了一个 MQTT 小程序，用来和我们 LoRa 核心网进行通信。虽然做出来了一个 DEMO，简历上是可以写“熟练掌握”了，但实际绝逼拿不出手。

最近参加了腾讯云主办的0基础10天小程序开发夏令营，发现这套教程干货满满，尤其是在学习路线上帮我这个初学者做了纠正：微信官方文档更适合做工具书，初学者只需花一点时间了解下大致的文档结构即可。腾讯云云开发团队设计了一套循序渐进的教程，UI -> API -> 云开发，并且每一部分都设计了实战 DEMO，帮助初学者在实战中掌握小程序。

所以在学习路线上，小能手尤为推荐腾讯云云开发的这套教程(链接我后面补上，听说会把这套教程放到官网上)，循序渐进实现 3 个 DEMO。同时整个过程中可以结合 小程序-微信官方文档 对感兴趣的知识点进行深入和扩展。

这个系列笔记，IoT小能手将会按照 UI、API、云开发 三个部分，结合教程的 3 个示例系统性地学习小程序的开发，最后运用前面所学知识，实现一个物联网小程序“花花草草守护仪”。

1 UI 页面入门 - Hello World 小程序

1.1 小程序开发入门

这节搭建了基础的开发环境，熟悉了小程序的框架基础，对开发框架做了初步尝试：先是全局性地配置了窗口表现、页面、底部 tab 栏，接着对具体页面做了配置。

1.2 WXML 和 WXSS

这节开始学习小程序的视图层，WXML 和 WXSS 就像网页开发的 HTML 和 CSS，一个负责页面结构，一个负责页面样式，即美化页面。本节尝试使用了 WXML 的 view 组件，同时增加了选择器；通过选择器给相应组件增加了字体文本属性和盒模型属性。

1.3 链接与图片

这节学习了 navigator 组件用于页面跳转，还学习了最常见的图片组件以丰富我们小程序展示，同时还介绍了外链图片、图片裁剪缩放模式、背景图片、美化边框、图片点击跳转等操作。

API 开发入门 - 天气小程序

云开发入门 - 新闻小程序

我的小程序 - 花花草草守护仪

END