移动软件开发lab2：天气查询小程序

2024年夏季《移动软件开发》实验报告

实验2：天气查询小程序

一、实验目标

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

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

二、实验步骤

首先需要在创建模板后删除模板中不需要的代码和文件，获得空白的模板。

1.API与服务器域名

在和风天气申请免费订阅，获取key，并在服务器域名中添加对应域名。

创建images文件夹，保存表示天气的图标，图片命名与API返回的icon值对应，方便调用。

2.导航栏与组件

在app.wxss中对导航栏的样式进行修改。

效果：

然后在index.wxml中加入组件，分别显示地区、温度、天气和详细气候信息。

在index.wxss中对温度和天气图标的样式进行设计。

效果：

其中地区使用了picker组件，可以在点击该组件后触发选择地区的界面。

然后对详细气候信息的组件的样式进行设计，信息两行三列，每一个信息需要文字标识，因此组件需要四行三列。每一行的三个组件(box)并入一个(bar)组件，四行组件再并入detail。

box按照横向排列，bar之间竖向排列，设置相应的flex布局并调整文字的显示。

效果如下：

组件以及样式的设计完成。

3.逻辑实现

接下来添加事件监听picker组件的变化，并通过调用request方法动态获取当前地区的现在天气信息。

对picker组件进行修改。

在index.js中添加region变量并实现regionChange方法。

setData对region修改并重新渲染画面，实现在picker中选择的新地区可以实时更新到画面。

接下来需要根据选择的地区调用和风天气的API查询实时天气信息。

添加weather变量，编写getWeather方法，调用request方法向API获取信息，并通过setData在weather中的同时渲染画面。

代码：

data{
	weather:{
		//包含API返回值中需要使用的关键数据
		"icon":"999",
...
	}
},
getWeather: function(){
    var that=this;
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now?',
      data:{
        key:'你的key',
        location:util.getLocationID(that.data.region[1])//此处使用了保存在util.js文件中的LocationID并调用了查询方法，
        //也可以先调用GeoAPI查询城市的LocationID再查询对应天气
      },
      success: function(res){
        that.setData({weather:res.data.now})
      }
    })
  }

在regionChange中setData之后、onLoad和onPullDownRefresh中调用该方法，即可在重新选择地区、加载小程序和下拉刷新后根据最新的region查询和显示当前天气信息了。

编译之后在appData窗口可以查看weather的值。

再在index.wxml中修改组件显示的内容实现动态显示天气信息。

小程序制作完成。

三、程序运行结果

加载后界面：

选择新地区后画面：

显示正常。

四、问题总结与体会

在小程序制作过程中通过发现因为版本更新，新版中调用API查询天气信息需要使用LocationID或者经纬度坐标，而不是能按照教程直接使用字符串参数。查询API文档后发现通过GeoAPI可以通过字符串获取ID。本次实验的材料文件中已经包含util.js文件提供查询ID的方法，并且已经将接口通过module.exports暴露，因此可以便捷的调用。

通过实验熟悉了微信小程序开发中网络API的应用和js文件模块的定义及引用。