# 实战篇 2：新鲜天气小程序简介

实战部分选择制作一款天气+心情签到的小程序，命名为「新鲜天气」，目前该程序已经完成上线，大家可以通过扫描下面的二维码进行线上体验：

在实战选题上，笔者尽量做到基础并且覆盖足够多的 API 和功能，让大家可以学到更多的内容。所谓基础，并不是「简单」，而是大家自己线下方便练习和实现的意思，「新鲜天气」数据都是来自腾讯地图、和风天气这些免费的 API，任何人都可以免费使用；小程序·云开发初级配置是免费的，能够满足我们小型小程序的计算、存储和数据库功能。学完本小册，大家就可以按照小册的内容实际操作一下。另外，整个「新鲜天气」的源码笔者也放到了 GitHub 上，方便大家下载和学习：

ksky521/fresh-weather

# 新鲜天气页面组成

新鲜天气小程序由天气预报页面和心情签到页面组成：

• 天气预报页面：主要是天气数据的展现，定位接口使用腾讯地图，天气数据来自和风天气 API，其中顶部实时天气温度用的是体感温度
• 心情签到页面：使用云开发数据库存储心情，每日可签到一次，不同心情不同颜色

# 天气预报页面模块和技术栈

天气预报页面由实时天气预报、24 小时天气预报、一周天气预报和生活指数共四大模块组成，这四大模块各有各的特点：

• 实时天气预报：这块页面元素较多，页面复杂度高，其中顶部定位模块有事件绑定，右侧签到入口有「心情签到」页面入口；除此之外，在雨雪天气整个区域还会有雨雪动效，动效是使用小程序的绘图 API 实现的粒子系统
• 24小时天气：这个区域主要使用了小程序的 scrollView 模块和 flex 布局
• 一周天气预报：该区域主要是 flex 布局和 Chart.js 图表的使用
• 生活指数：该区域每个指数都绑定了 tap 事件，详细的生活指数内容是经过事件传值给浮层的
• 整个页面背景图片笔者抓取了 UC 天气背景图，可以根据不同天气更换图片
• 整个项目中用到的图标，都是由 components 下面的 icon 组件实现的

在天气预报这个页面，笔者重点介绍：

1. 小程序布局常用组件 view、text、scrollView、image、canvas 等 UI 组件的使用
2. 学会使用 wx.request 模块获取数据
3. 学会使用小程序绘图 API 实现雨雪效果的粒子系统
4. 小程序的事件绑定和处理
5. 定位 API 和选择位置组件的调用，还会讲解不同坐标系之间的区别
6. 如何实现一个 icon 的小程序组件
7. 在小程序内使用 chartjs 做报表展现
8. 深入体会和理解 wxs、rpx 等概念
9. 使用小程序云函数实现和风天气 API 的数据获取

# 心情签到页面模块和技术栈

心情签到是一个可以记录自己心情起伏的小工具，它有助于我们找到心情起伏的原因。整个心情签到页面实战部分主要包含的内容有：

1. 小程序插件的使用
2. 授权登录，获取用户信息等跟用户相关 API 的使用
3. 云开发的数据库操作
4. 使用小程序云函数获取用户 openid

# 项目目录结构

整个项目目录结构如下：

├── README.md
├── bin
│   ├── city.json
│   ├── getbg.js
│   ├── getbgimg.js
│   ├── geticon.js
├── client
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── components
│   ├── config.js
│   ├── images
│   ├── lib
│   ├── pages
│   └── project.config.json
├── server
│   ├── cloud-functions
│   ├── index.js
│   ├── inline
│   ├── logs
│   ├── package-lock.json
│   └── static
├── dist
├── node_modules
├── config.server.json
├── gulpfile.js
├── package.json
├── tcb.json
└── test
    └── functions

• server：小程序云开发环境的 mock server 和云函数的 cloud-functions
• client：小程序前端主要代码；在 client 中会有小程序的配置和工具配置等文件
• gulpfile.js： 是 Gulp 的脚本
• test：是云函数测试脚本文件夹
• dist：是项目产出的文件夹，会把 client 和 server 的cloud-functions编译进去，也是小程序开发者工具选择的项目路径
• bin：是工具脚本，比如抓取图片相关的脚本等

# 配置

因为天气页面是没有顶部导航栏的，这样整个页面更加开阔，视觉效果更好，所以小程序的 app.json 中我们定义了导航条样式是自定义：

"window": {
  "navigationStyle": "custom"
},