城市天气 CityWeather，一个简约风格的世界主要城市的天气查询小程序，是微信讨论组中分享天气的极佳途径，下面来看看这款小程序的开发过程吧～

城市天气 CityWeather 是我开始学习微信小程序开发的第一款 Mini Program，选择从一个简单的天气小程序入手。你也可以从 Udacity 上学习次小程序：点击查看

天气程序需要什么样的功能？

市面上的天气应用或小程序很多很多，但随着应用/小程序不断更新，这些天气应用变得就比较臃肿了，比如一些天气应用/小程序还添加了广告、应用推荐、打赏、账号登录等七七八八但功能，完全脱离了应用/小程序本身。一个好的应用/小程序，就应该在它该出现的时候出现，不需要的时候就不出现。

城市天气 CityWeather 就是这么一款简单的天气小程序，专注于天气本身，一款插画风格的可爱天气小程序，给你每个季节、每个天气应有的“温度”。

社么样的天气显示最直观呢？

整体UI设计，当然是插画风格啦！简约、可爱的天气插画背景，让你直接看图片就能直观的看到当天的天气。

因为天气情况很多，最基础的天气就是譬如 晴、多云、阴、小雨、中雪 等常规天气，还有 微风、和风、大风 等刮风天气，当然还有一些极端天气 沙尘暴、浮沉，甚至是代号为999的，只有会在世界末日中才会出现的 未知天气。目前的部分天气素材来自于Udacity以及网络。

小程序如何内容布局？

第一页UI采用上下两栏设计，上部将近60%的区域用来显示当前天气以及最具特色的天气背景插画；第二页UI采用列表样式布局，显示未来7天天气预报。

当然，未来可能会在增加一个页面用来显示当前天气的风速、日出日落时间、空气质量、紫外线强度等内容。

如何设计好的图标？

应用/小程序 的图标可谓第一脸面，用户最先看到的必然是小图标，所以一个好的图标对于应用/小程序的推广有着举足轻重的作用。如何在众多天气应用/小程序图标中脱颖而出？

当然是在明确主题的同时，美观、简约、有特点，这样能让人第一眼留有印象。

小程序开发

这一步骤是坑最多的，尤其是微信小程序开发工具的bug也非常多，经常代码是正常的，但是模拟器卡死或没有应用的效果，macOS原生中文输入法有时也会出问题，输不进入字符等一系列问题。

我也非常建议学习小程序开发的你，去Udacity上跟着一起制作：开始学习

还有一些历史问题，一些淘汰的函数和接口也得自己排查，比如跳转页面的 wx.openSetting 接口：

小程序推广与分享

城市天气 Weather City 的官方页面：点击进入

城市天气 Weather City Github 项目：点击进入

未来也会新增其他主题的天气背景，增加一个当日详细信息页面，用于查看 空气质量、风速、紫外线强度、日出日落时间等；再或者，加入一个夜间模式也说不定哦，白天打开时显示白天的天气插画，夜晚打开时夜晚的天气插画，当然这都是未来需要做的事情啦。

使用手机 QQ / 微信扫描下方小程序码也可以观看哦~