天气可视化 是一个基于uni-app构建的微信小程序。该微信小程序为用户提供了实时的天气查询，生活指数和空气质量的可视化，并且对未来2小时内降雨进行了预测。
文档和项目中均有很多不完善和不正确的地方，请读者批评指正。
小程序 天气可视化 的整体架构如下：
- 获取用户的地理位置（或者由用户指定要查询的位置）
- 通过
和风天气API获取对应位置的天气数据（气温、降雨、空气质量、生活指数…）- 对获取到的数据进行处理
- 将处理好的数据通过
Echarts展现出来，完成可视化- 整个流程基于
uni-app框架开发- 测试、预览和体验
- 最后发布上线
为了快速使用本仓库的代码，推荐HBuilderX:
git clone https://github.com/YoungErm/WeatherVisualization
cd WeatherVisualization # 通过HBuilder打开
# HBuilder可以快速下载框架下所需插件、减少学习成本：
# 1. scss/sass:https://ext.dcloud.net.cn/plugin?id=2046
# 2. echarts:https://ext.dcloud.net.cn/plugin?id=4899点击运行—运行到小程序模拟器—微信开发者工具
效果展示：
封面—>首页（24小时天气预报—2小时降水预报—生活指数—空气指数）—>选择城市
天气可视化 现已上线微信客户端，用户可扫描下面二维码进行体验：
- uni-app官网文档
- LimeUi - 多端uniapp组件库 (Echarts块)
- Vue.js官网文档
- 单文件组件规范 | Vue Loader (vuejs.org)
- 微信小程序官网文档
- ECharts官网文档
- 天气APP参考项目
- 和风API开发文档
- 封面Echarts图
- 24小时天气预报图
- 未来2小时降水预测图
- 生活指数（南丁格尔玫瑰图）
- 当前空气质量指数图
- 小程序图标
首先简单介绍一下uni-app模板的目录结构：
首先，我们需要在mainifest.json中配置我们小程序的ID，本次只针对微信小程序进行开发，除了AppID之外还需要额外配置一下位置权限即可：
其次，我们要将我们的小程序的页面路径添加进pages.json文件中，由于使用HBuilderXIDE在创建页面文件时，IDE会自动帮我们添加进去。
到这里，准备工作就完成了。我们就在pages/XXX/XXX.vue就可以写我们的代码了。（其他的文件目录作为了解即可不需要立马完全弄明白，这里不做详细介绍）
下面是.vue文件的样例：
<template>
// 注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
<view class="example">{{ msg }}</view>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>- 每个
.vue文件最多包含一个<template>块。- 这块内容专注于做视图UI的处理
<template>下有且仅有一个根<view>组件- 以前
html中的div、p标签，现在都用<view>组件
- 以前
-
每个
.vue文件最多包含一个<script>块。 -
以往我们修改某个 DOM 元素的显示内容，我们给它设定
id，然后通过js中的选择器document.getElementById来获取DOM元素，以此来修改DOM元素的属性或值-
现在是vue的绑定模式，给这个 DOM 元素绑定一个js变量，在
<script>中修改js变量的值，DOM 会自动变化，页面会自动更新渲染。<view> <text>{{textvalue}}</text> 这里通过{{}}绑定了textvalue组件的值 </view>
我们只需要在
<script>中修改textvalue的值，那么页面中就会对应修改:<script> export default { data() { return { textvalue:"123", //初始值为123 }; }, methods: { changetextvalue() { this.textvalue="789" //我们在这里修改textvalue的值，当我们调用这个方法的时候，页面就会自动刷新为789 } } } </script>
-
- 一个
.vue文件可以包含多个<style>标签。 - 可以简单理解为传统中的
.css文件
下面我们以未来24小时天气预报为例，讲解一下整个项目的思路：
首先我们在根组件<view>中创建一个子组件，并且在<style>中创建我们的样式
<template>
<view">
<view class="forecast-box">
// 这里相当于一个容器，我们在容器中存放我们要展示的文字、图像等内容
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
.forecast-box {
min-height: calc(100% + 1px);
width: 690rpx;
margin: 0 40rpx 40rpx 30rpx;
border-radius: 40rpx;
border-bottom-left-radius: 40rpx;
border-bottom-right-radius: 40rpx;
background-color: #FFFFFF;
color: #333333;
font-size: 28rpx;
position: relative;
}
</style>这个作为我们的一个放未来24小时天气预报的‘容器’:
首先，我们在这个‘容器’中，再创建一个子组件<view>写上我们的标题未来24小时天气预报（配置一下样式）：
<template>
<view">
<view class="forecast-box">
// 这里相当于一个容器，我们在容器中存放我们要展示的文字、图像等内容
<view class='forecast-box-title'>未来24小时天气预报</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
.forecast-box {
min-height: calc(100% + 1px);
width: 690rpx;
margin: 0 40rpx 40rpx 30rpx;
border-radius: 40rpx;
border-bottom-left-radius: 40rpx;
border-bottom-right-radius: 40rpx;
background-color: #FFFFFF;
color: #333333;
font-size: 28rpx;
position: relative;
}
.forecast-box-title {
width: 630rpx;
padding: 0 30rpx;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #eee;
}
</style>这样我们就得到了我们的一个小标题：
然后我们接着创建一个子组件<view>存放我们的24小时天气走势图：
- 这个子组件
<view>中引入Echarts组件（我这里用的是大佬在移动端封装好的Echarts组件） - 并且指定子组件注册引用信息
ref="chart1"，这里相当于传统中，我们给DOM容器指定id="chart1"，方便下面使用this.$ref.chart1来获取l-echart实例 - 我们在
<script>中通过this.$refs.chart1.init来获取实例，并且获取到数据过后，配置Echarts对应的option来生成我们想要的图表- 这里假设方法
get24hoursData()可以获取到我们想要的数据，并且对数据进行了处理
- 这里假设方法
<template>
<view">
<view class="forecast-box">
// 这里相当于一个容器，我们在容器中存放我们要展示的文字、图像等内容
<view class='forecast-box-title'>未来24小时天气预报</view>
<view style="height: 900rpx;border-radius: 40rpx;">
<l-echart ref="chart1"></l-echart>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
// 存放我们一些公用的变量，例如用户的位置信息等
return {
}
},
onShow(){
// 页面每次出现在屏幕上会触发onShow()
this.showCharts1();
},
methods:{
// methods可以定义我们公用的方法
async showCharts1() {
// 假设这里我们通过get24hoursData()方法拿回了数据
const data24Hour = await this.get24hoursData();
// 然后我们通过`refs`来找到chart1对应的组件
this.$refs.chart1.init(config => {
const {canvas} = config;
// 实例化chart对象
const chart = echarts.init(canvas, null, config);
// 在这里利用上面的数据data24Hour来配置我们的Ehcarts的option
var option = {};
// 使配置项生效
chart.setOption(option);
// 最后通过返回我们的chart，将图像映射到<l-echart>组件中
return chart; // 从而网页上显示我们的图表
})
}, //showCharts1() end
} //methods end
}
</script>
<style>
.forecast-box {
min-height: calc(100% + 1px);
width: 690rpx;
margin: 0 40rpx 40rpx 30rpx;
border-radius: 40rpx;
border-bottom-left-radius: 40rpx;
border-bottom-right-radius: 40rpx;
background-color: #FFFFFF;
color: #333333;
font-size: 28rpx;
position: relative;
}
.forecast-box-title {
width: 630rpx;
padding: 0 30rpx;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #eee;
}
</style>到这里未来24小时天气预报就做好了，剩下的同理即可。
关于页面的生命周期，这里引用微信开放文档 中的图进行说明：
