天气查询-小程序网络API

 

 

1.服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中

需对域名地址https://devapi.qweather.com进行服务器配置

小程序开发者登录mp. weixin. qq. com进入管理员后台,单击“设置”按钮,切换至“开发设置”面板,在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址

将当前需要使用的接口添加到“request合法域名”中,配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了,注意目前每个月可以申请修改50次服务器域名配置。

 

开发管理->开发设置->服务器域名

 

 

2.项目创建：

1.新建项目->将app.json文件中pages属性中的“pages/logs/logs”删除，并删除上一行末尾的

2.创建一个文件夹用于存放天气图标素材

下载天气图标方式：在和风天气中的开发文档

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气"
  }
}

3.页面设计：

区域1：地址选择器区域，用户自行选择查询的省，市，区

区域2：显示当前城市的温度和天气状态的文字说明 

区域3：显示当前城市的天气图标

区域4：分多行显示其他天气信息，例如湿度，气压，能见度和风向等

注意：面板之间需要有一定的间隔距离

页面整体<view>组件

区域1：<picker>组件

区域2：<text>

区域3：<image>

区域4：<view> 并定义class='detail'

区域4内单元行：4个<view>组件，并定义class='bar'

区域4内单元格：每行3个<view>组件，并定义class='box'

3.1.整体容器设计

app.wxss

/**app.wxss**/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;/*水平方向居*/
  justify-content: space-around; 
}

区域1地区选择器

需使用<picker>组件来实现一个地区选择器，点击城市名称会从底部弹出控件，用户可以进行省，市，区的选择

index.wxml

<!-- 地区选择器 -->
<picker mode="region">
<view>北京市</view>
</picker>

区域2实现一个单行天气信息，包括当前城市的温度和天气状况

index.wxml

<!-- 单行天气信息 -->
<text>19℃ 晴</text>

index.wxss

/**index.wxss**/
/* 文本样式 */
text{
  font-size: 80rpx;
  color: #3C5F81;
}

区域3 天气图标设计

index.wxss

/* 图标样式 */
image{
  width: 220rpx;
}

index.wxml

<!-- 天气图标 -->
<image src="/images/999.png" mode="widthFix"></image>

---

多行天气信息设计

/**index.wxss**/
/* 文本样式 */
text{
  font-size: 80rpx;
  color: #3C5F81;
}
/* 图标样式 */
image{
  width: 220rpx;
}
/* 区域4 整体样式 */
.detail{
  width:100%;
  display: flex;
  flex-direction: column;
}
/* 区域4单元行样式 */
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}

/* 区域4单元格样式 */
.box{
  width: 33.3%;
  text-align: center;
}

 index.wxml

<!-- 多行天气信息 -->
<view class="detail">
  <view class="bar">
    <view class="box">湿度</view>
    <view class="box">气压</view>
    <view class="box">能见度</view>
  </view>

  <view class="bar">
    <view class="box">0 %</view>
    <view class="box">0 hPa</view>
    <view class="box">0 km</view>
  </view>

  <view class="bar">
    <view class="box">风向</view>
    <view class="box">风速</view>
    <view class="box">风力</view>
  </view>

  <view class="bar">
    <view class="box"> 0 </view>
    <view class="box"> 0 km/h</view>
    <view class="box"> 0 级</view>
  </view>

 4.逻辑实现

4.1更新省，市，区信息

首先修改<picker>组件中的"北京市"为{{region}},然后为<picker>组件追加自定义bindchange事件，用于监听选项变化

<!-- 地区选择器 -->
<picker mode="region" bindchange='regionChange'>
<view>{{region}}</view>
</picker>

由于地区选择器的返回结果为数组的形式，在JS文件中的data定义region为包含了省，市，区3个项目的数组，

 

index.wxml

<!-- 地区选择器 -->
<picker mode="region" bindchange='regionChange'>
<view>{{region}}</view>
</picker>

 index.js

/**
   * 页面的初始数据
   */
  data: {
    region:['安徽省','芜湖省','湖区']
  },
  /* 自定义函数，监听省，市，区信息 */
  regionChange:function(e){
    this.setData({region:e.detail.value});
  },

 就可以随意切换到国内任意省市区

4.2获取实况天气数据

先根据城市或地区的中文名称获取位置ID

可以直接将常用城市或地区对应的中文名和ID编号数据做成JSON格式文件放在项目中，本地查询即可

在项目中新添加一个utils文件夹，utils.js文件用来获取位置ID。

该文件内主要包括自定义变量citi_list_json用于存放国内所有城市地区数据信息和自定义函数getLocationID(location_name)用于获取城市ID，最后使用module.exports暴露函数接口给页面js文件使用。

...

然后修改index.js文件，在顶端声明对util.js文件的引用

var util = require('../../utils/util.js')
Page({
.
.
...

在JS文件中使用自定义函数getWeather进行实况天气数据的获取。

// index.js
// 获取应用实例
var util = require('../../utils/util.js')
Page({

  /**
   * 页面的初始数据
   */
  // 获取实况天气
  getWeather:function(){
    var that = this;
    //获取位置ID
    var location_name=util.getLocationID(that.data.region[1])

    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now',
      data:{
        location:location_name,
        key:'a4ae83df500b4cc4bd53c7a1214bbbcd'
      },
      success:function(res){
        //console.log(res.data)
        that.setData({now:res.data.now});
      }
    })
  },
  data: {
    region:['安徽省','芜湖省','湖区']
  },


  /* 上述函数在生命周期函数onLoad和自定义函数regionChange中分别进行调用，表示当页面加载时和切换    
     城市时均主动获取一次实况天气数据 */

  /* 自定义函数，监听省，市，区信息 */
  regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();//更新天气
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather(); //更新天气
  },
})

 

4.3更新页面天气信息

index.wxml

<!--index.wxml-->
<view class="container">
<!-- 地区选择器 -->
<picker mode="region" bindchange='regionChange'>
<view>{{region}}</view>
</picker>
<!-- 单行天气信息 -->
<text>{{now.temp}}℃{{now.cond_text}}</text>
<!-- 天气图标 -->
<image src="/images/{{now.icon}}.png" mode="widthFix"></image>
<!-- 多行天气信息 -->
<view class="detail">
  <view class="bar">
    <view class="box">湿度</view>
    <view class="box">气压</view>
    <view class="box">能见度</view>
  </view>

  <view class="bar">
    <view class="box">{{now.humidity}} %</view>
    <view class="box">{{now.pressure}} hPa</view>
    <view class="box">{{now.vis}}</view>
  </view>

  <view class="bar">
    <view class="box">风向</view>
    <view class="box">风速</view>
    <view class="box">风力</view>
  </view>

  <view class="bar">
    <view class="box"> {{now.windDir}} </view>
    <view class="box"> {{now.windSpeed}} </view>
    <view class="box"> {{now.windScale}} </view>
  </view>
</view>
</view>

index.js修改为 

data: {
    region:['安徽省','芜湖省','湖区'],
    now:{
      temp:0,
      text:'未知',
      icon:'999',
      humidity:0,
      pressure:0,
      vis:0,
      windDir:0,
      windSpeed:0,
      windScale:0
    }
  },
....