![5e7f032d72bb72485110c3e4731a78a6.gif](https://i-blog.csdnimg.cn/blog_migrate/4b49b8c8a28a21a6fcccd41578340599.gif)
前言
⛅轻松天气
这次的项目是一个微信小程序:轻松天气
![a5299bd09ab017106115b5278f08d2aa.png](https://i-blog.csdnimg.cn/blog_migrate/5d1f27b2c34bfc5f14621942abac7fcd.jpeg)
这是我 2017 年还在学校时自己做的一个小程序,也是我做的第一个微信小程序。
虽然这个小玩具挣不了钱,也没什么特别之处,但是对我来说意义重大,想了许久还是决定开源,可以给有需要的人作为参考。
这个小程序的基本特点:
- 简洁风的界面
- 城市天气查询
- 今日天气信息
- 未来 6 天天气
- 今日出行建议
- 分享当前天气
?截图
目前这个小程序也还在运营(其实就是偶尔更新下)。
在微信搜一搜里搜索“「轻松天气」”,出现的第一个小程序就是了:
![78ff3958a9251bc42c8eb726fa46e71b.png](https://i-blog.csdnimg.cn/blog_migrate/b79dd4497ec77cfed8178c14b8742e0b.jpeg)
界面长这样:
![c15ce17a31e76c05dfc0a30778c3aa61.png](https://i-blog.csdnimg.cn/blog_migrate/efd2d9db64b25318db27210aad00a85b.png)
正文
?项目地址
Gitee:https://gitee.com/ifaswind/miniprogram-easyweather
Github:https://github.com/ifaswind/miniprogram-easyweather
⭐点个 Star 好嘛~
?开发工具
我目前编辑这个项目用的是:
- 微信开发者工具 Stable 1.03.2006090
但是理论上无论啥版本都可以正常打开运行。
?使用说明
?AppID
首次导入项目需要设置 AppID,没有的话可以直接使用测试号~
![ea482bfc22186337230b99c6dbf9b092.png](https://i-blog.csdnimg.cn/blog_migrate/bd714cfc81a58e1294402551b38ba61b.png)
?天气数据
本小程序里使用的天气数据来源于第三方提供的 API。
使用易源数据
我用的是阿里云云市场里面的「易源数据-全国天气预报查询」(这个 API 是有免费试用套餐的):
![4730e48c3b6662d93c0e3c5ba481abd6.png](https://i-blog.csdnimg.cn/blog_migrate/3cf8c894d7466d7fddc6743ed053f1f3.png)
传送门:https://market.aliyun.com/products/57096001/cmapi010812.html
- 购买成功后在「管理控制台」页面获取到你的 「AppCode」:
![9c0addfa1a19e231a9dd25c56f20140d.png](https://i-blog.csdnimg.cn/blog_migrate/10fedf9f62c8b224b74d1f1d5531395c.png)
- 然后将你的 「AppCode」 填到项目目录下 [ config/config.js ] 里的
request.header
中:
![4cb59ae1a67d240221f9b5ac76a42ab3.png](https://i-blog.csdnimg.cn/blog_migrate/39e59e9f0c4ad3ee7ec5e98235e52857.png)
- 另外还需要注意将 API 的域名添加到项目配置里的 「request 合法域名」 中,否则没有办法请求数据:
![8891c1f3fda189f2ae04a665a5c99c97.png](https://i-blog.csdnimg.cn/blog_migrate/b292f61920d3fec43aa3e215370c7603.png)
或者可以勾选 [ 本地设置 ] 下的 「不校验合法域名...」 选项来进行本地测试:
![e6c5b396b0b141979ac25bec900c4fe8.png](https://i-blog.csdnimg.cn/blog_migrate/3c33dee3ad6ad7dca9b6d6de1b169f5a.png)
其他数据来源
如果想要使用其他的 API 来获取天气数据也是可以的,只不过需要自行修改代码中的数据结构,问题不大~
更多分享
《为什么选择使用 TypeScript ?》
《高斯模糊 Shader》
《一文看懂 YAML》
《Cocos Creator 性能优化:DrawCall》
《互联网运营术语扫盲》
《在 Cocos Creator 里画个炫酷的雷达图》
公众号
?菜鸟小栈
?我是陈皮皮,这是我的个人公众号,专注但不仅限于游戏开发、前端和后端技术记录与分享。
?每一篇原创都非常用心,你的关注就是我原创的动力!
Input and output.
![8a4a5cd7fbae8711ca40ca4e1d2c7733.png](https://i-blog.csdnimg.cn/blog_migrate/7902a54b8d897cd3f40c990381c9fbea.png)