My Second Miniprogram~

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1、申请和风天气API密钥

在和风天气开发者平台中通过注册申请账号，进行项目创建并选择web API生成专属key进行后续链接。

2、在微信公众平台配置服务器

登录微信公众平台账号，在服务器域名处进行发送请求的https://devapi.qweather.com服务器域名配置。

配置完成后在微信开发者工具详情处观看是否显示域名信息，若有，则成功。

在后续实验进行中，由于和风天气开发系统更新，仅利用获取实时天气API缺乏locationID，其对于文字输入的地址无法进行识别。因此，继续在微信公众平台上配置另一请求域名https://geoapi.gweather.com，用于获取精确地址并利用GEOAPI将其转化为相对应的locationID，再利用locationID进行实时天气的获取。

3、配置和风天气官方资源

和风天气开源过程中，为开发者提供了根据实时天气对应天气图标编码的工具。在我们利用和风天气API获取某地实时天气时，会同时显示此天气对应图标编码，便于开发者直接使用。但是，和风天气版本更新后只在官方提供svg形式图片，因此我到gitee进行官方天气图标png格式的下载。各个图片命名编码为官方指定编码，不可更改。如下。

（gitee开源提供了多版图标，但是自认为这版图标更好看，故选！）

4、代码编写与解析

以上准备工作做足后，即可进行今日天气小程序的实现。接下来仍然根据不同文件进行代码解析。

---

/*index.wxml*/
<view class='container'>
  <picker mode="region" bindchange="RegionChange">
  <view class='area'>{{region}}</view>
  </picker>
​
  <text>{{now.temp}}℃ {{now.text}}</text>
​
  <image src="/image/{{now.icon}}.png"></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}}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'>{{now.windDir}}</view>
    <view class='box'>{{now.windSpeed}}Km/h</view>
    <view class='box'>{{now.windScale}}级</view>
  </view>
  </view>
</view>

以上wxml文件实现了页面组件的定义，共分为四部分。

• 第一部分：区域选择器。用于为用户提供选择目的城市进行天气查看的功能。

• 第二部分：气温显示。直接显示当地气温及天气状况。

• 第三部分：天气图标。利用官方提供的天气图标可以实现利用实时信息中包含的icon编码直接显示对应天气图标的功能。

• 第四部分：其他天气数据。实时显示包括湿度、气压、能见度、风向、风速及风力在内的天气数据。

对于{{}}中的动态数据，我们利用now存储所有的实时天气数据。

---

/*index.wxss*/
.container{
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.bar{
  display: flex;
  flex-direction: row;
  margin:20rpx 0;/*设置外边距*/
}
.box{
  width:33.3%;
  text-align: center;
}
text{
  font-size:80rpx;
  color:#3C5F81;
}
image{
  width:500rpx;
  height:500rpx;
}
.area{
  font-size: 40rpx;
  color: #01060c;
}

以上代码对各类、各组件进行了格式规定。

• container作为全局容器，利用flex-direction设定为column、justify-content设定为space-around实现页面中的纵向均匀分布、利用align-items设定为center设定横向居中对齐。

• bar类中的margin用于设置外边距。

---

/*index.js*/
data: {
    region:['北京市','北京市','东城区'],
    now:''
  },
  RegionChange:function(e){
    this.setData({
      region:e.detail.value
    })
    this.getMessage();
  },
  getMessage:function() {
    var that=this; 
    wx.request({ //寻找城市ID
    url: 'https://geoapi.qweather.com/v2/city/lookup?',
    data:{
    location:that.data.region[2],
    key:'63c721dac714431082585047d7afdf70'
    },
    success:function(res){ 
    that.setData({Place_ID:res.data.location[0].id}) 
    wx.request({ 
    url: 'https://devapi.qweather.com/v7/weather/now?',
    data: {
    location:that.data.Place_ID,
    key:'63c721dac714431082585047d7afdf70'
    },
    success:function(res){ 
    //  console.log(res.data)
    that.setData({now:res.data.now}) 
    
}
})
}
})
},
    
 /*生命周期函数--页面加载*/
  onLoad(options) {
    this.getMessage();
  },
​

• data中的内容是动态变量的初始设定值，即在页面初加载时显示的地区location为“北京市,北京市,东城区”，now为对应得到的location的实时天气。

• RegionChange函数中，首先获取用户选择的地区信息，之后调用getMessage函数并传入region信息。

• getMessage函数中，首先向GEOAPI接口发送请求，查询用户选定region对应的locationID；之后将locationID发送到实时天气API接口并获取该地区的实时天气数据，将实时天气数据存储到now中。此时，在wxml文件中显示{{now.}}处将更新当地数据。

• 特别强调wx.request板块，其url为对应的API接口，key为开发者随机生成的密钥。由于this无法在微信请求函数下使用，因此在发送请求前，需要将that赋值为this传入使用。

• onLoad(options)是生命周期函数，用于监听页面加载，能够在初始登陆页面时直接读取页面中的默认数据进行实时天气显示。

---

/*app.json*/
{
  "pages":[
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3883fa",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "今日天气",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true
  }
}

此部分用于设置标题栏，命名为今日天气，设定颜色为蓝色（#3883fa），其他部分为系统默认。

三、程序运行结果

随机选择几个地区显示天气页面如下：

初始加载页面：[北京市，北京市，东城区]

用户选择地区展示

[山西省，太原市，小店区]

[青海省，西宁市，城东区]

[福建省，福州市，鼓楼区]

同时，查询[福建省，福州市，鼓楼区]处天气时，可以在调试器中看到所获得当地locationID及所有天气数据。

（上述有一个存在问题是由于引用图片时的格式为拼接格式，即/image/{{icon}}.png，导致网络渲染层错误，代码不存在问题，程序可正常执行。）

四、问题总结与体会

此次实验遇到的第一大问题是由于和风天气开发系统的更新，导致教程中直接调用实时天气API获取当地天气数据的步骤无法执行。更新后的和风天气开发系统不接受文字位置输入，只接受locationID输入获得当地天气实时数据。因此，我额外接入了GEOAPI，在用户选择文字位置后利用此接口发送请求获取当地的locationID，之后再将locationID传入到实时天气API中以获取当地实时天气数据。

此次实验遇到的第二问题是和风天气官方图标不再提供png、jpg格式，只提供svg格式。因此我前往gitee搜索和风天气图标的开源png格式图标，并选择最美观的图标下载插入。

此次实验，我学习了如何调用API接口：首先搜索提供API的官方申请API、前往微信公众平台进行服务器域名配置、在微信开发者工具--详情中检查是否成功配置、在代码中使用wx.request配置url及key发送请求、获取数据。

总的来说，这是我进行小程序编写的第二次尝试，对于利用API实时获取全国各地天气数据的小程序成功展示运行的时刻，感到非常的欣慰，也鼓励我怀揣更深的热情继续学习移动软件开发课程！