《移动软件开发》实验2

《移动软件开发》实验2

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

2.1准备工作

2.1.1 API密钥申请

本小节主要介绍如何申请获得开源API的密钥。这里选择了可以提供全球气象数据服务接口的和风天气API,其官方网址为“https://id.qweather.com”。

用户使用邮箱进行注册并激活后可以获取三天之内全球各地区的实时天气,免费接口调用的数据基本上可以满足读者的开发学习需求。注册完毕且登录后，页面会进入和风天气控制台，如下图所示。

现在，开发者需要一个个人认证key,该信息在小程序发出网络请求时会作为身份识别的标识一并发送给和风天气的第三方服务器，进而调用API获取气象数据。

2.1.1.1创建应用和key

进入控制台后，在左侧导航菜单中选择“应用管理”

选择应用类型，应用类型包括：开发版、商业版和高性能版。我们在这里以创建一个商业版应用为例。（学生或者开发者建议选择开发板。）

填写应用名称创建应用，创建一个全新的应用后需要添加一个数据KEY。首先要选择数据KEY的类型：

• Web API：使用API获取天气数据
• iOS SDK：使用iOS SDK获取天气数据
• Android SDK：使用Android SDK获取天气数据

然后，设置KEY的相关信息，包括填写名称和绑定应用包名。完成后，你就已经完成了应用和KEY的创建了。（可以对你创建的应用进行更多操作，包括更改名称、删除、添加新的KEY等等。）

具体操作可查看和风天气的官方开发文档：“https://dev.qweather.com/docs/resource/get-key/”

2.1.2 API调用方法

目前免费用户可以调用的最新版接口地址为"https://devapi.qweather.com/v7/”,其服务器节点在中国境内。该接口地址后面追加不同,的关键词将获取不同种类的气象数据信息,例如alarm为天气自然灾害预警。

本示例将选用关键词weather进行实况天气数据的获取。实况天气即为当前时间点的天气状况以及温/湿/风/压等气象指数,具体包含体感温度、实测温度、天气状况、风力、风速、风向、相对湿度、大气压强、降水量、能见度等。目前该接口允许查询的城市覆盖范围为全球任意一个城市。
基于关键词weather的接口具有两个必填参数和两个可选参数,分别是location(必选)、key(必选)、lang(可选)和unit(可选)。

• location：支持数字签名方式进行认证。需要查询地区的LocationID或以英文逗号分隔的经度,纬度坐标（十进制，最多支持小数点后两位），LocationID可通过城市搜索服务获取。
• key：用户认证key，请参考如何获取你的KEY。
• lang：多语言设置，默认中文，当数据不匹配你设置的语言时，将返回英文或其本地语言结果。
• unit：度量衡单位参数选择，例如温度选摄氏度或华氏度、公里或英里。默认公制单位

免费用户调用接口的常见语法格式如下：

https://devapi.qweather.com/v7/weather/now?location=地区的LocationID或经纬度坐标&key=你的KEY

用户可以在输入对应参数后，直接将这段地址输入到浏览器的地址栏中测试数据返回结果。

由结果可知,指定城市的天气数据返回结果是JSON数据格式的文本内容,其中包含的数据是以“名称:值”的形式存放。因此，用户可以根据指定的名称找到对应的数据值，并进行相应的操作。

具体操作可查看和风天气的官方开发文档：“https://dev.qweather.com/docs/api/weather/weather-now/”

5.1.3服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中,因此本示例需要对域名地址"https://devapi.qweather.com"进行服务器配置，此外还要对域名地址“https://geoapi.qweather.com”进行配置，以用来获取地区的LocationID信息。

小程序开发者登录微信公众平台（mp. weixin. qq. com）进人管理员后台,在左侧菜单栏中点击开发管理，然后切换至“开发设置”面板,在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址，如下图所示。

将当前需要使用的接口添加到"request合法域名”中,配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了。

2.2项目创建

创建一个JavaScript的模板项目。

然后手动更改页面配置文件。

2.3页面配置

2.3.1创建页面文件

项目创建完毕后,在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面;其他页面名称可以自定义。本次只需要保留首页(index)即可。
具体操作如下:
(1)、将app. json文件内pages属性中的"pages/logs/logs"删除,并删除上一行末尾的
逗号。
(2)、按快捷键Ctrl+S保存当前修改。

2.3.2删除和修改文件

具体操作如下:
(1)删除utils文件夹及其内部所有内容。
(2)删除pages文件夹下的logs目录及其内部所有内容。
(3)删除index. wxml 和index. wxss中的全部代码。
(4)删除index. js中的全部代码,并且输入关键词"page”找到第二个选项按回车键让其自动补全函数。(5)删除app. wxss中的全部代码。
(6)删除app.js中的全部代码,并且输入关键词“app"找到第一个选项按回车键让其自动补全函数。

2.3.3创建其他文件

本项目用到的图标素材共计75个,均来源于和风天气官网。相关天气图片、utils.js下载地址为：“https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip”。其中图标文件名为对应的天气代码,扩展名均为.png。需要注意的是,部分图标文件名带有字母n,表示夜间天气图标,例如100n. png。

接下来创建其他自定义文件,本项目还需要一个文件夹用于存放天气图标素材。文件夹名称由开发者自定义(例如images),单击目录结构旁边的文件夹条件按钮创建文件夹并命名为images。

右击目录结构中的images文件夹,选择“在资源管理器中显示”。

在images文件夹中新建二级目录weather_icon。

然后将图标文件全部复制、粘贴进去。

之后，开发平台就会显示出相关信息。

2.4视图设计

2.4.1导航栏设计

小程序默认导航栏是黑底白字的效果,因此需要在app. json中自定义导航栏标题和背景颜色。更改后的app. json文件代码如下:

（上述代码可以更改所有页面的导航栏标题文本为“今日天气”、背景颜色为蓝色(#3883FA)）

2.4.2页面设计

页面上主要包含4个区域,具体内容解释如下。

• 区域1:地区选择器,用户可以自行选择查询的省、市、区;
• 区域2:显示当前城市的温度和天气状态的文字说明;
• 区域3:显示当前城市的天气图标;
• 区域4:分多行显示其他天气信息,例如湿度、气压、能见度和风向等。

注意,面板之间需要有一定的间隔距离。同时计划使用以下组件。

• 页面整体: < view >组件,并定义class=‘container’;
• 区域1: < picker >组件;
• 区域2:< text >组件;
• 区域3: < image >组件;
• 区域4:< view >组件,并定义class=‘detail’;
• 区域4内单元行: 4个< view >组件,并定义class= ‘bar’;
• 区域4内单元格:每行3个< view >组件,并定义class=‘box’。

1.整体容器设计

首先定义页面容器(< view >)，index.wxml代码片段如下:

在app. wxss中设置容器样式,代码片段如下:

2.区域1（地区选择器）设计

区域1需要使用< picker >组件来实现一个地区选择器,用户点击可切换选择其他城市。
index. wxml代码片段修改如下:

< picker >组件内部是开发者任意填写的一个城市名称,点击城市名称时会从底部弹出控件,用户可以进行省、市、区的选择。

3.区域2（文本）设计

区域2需要使用< text >组件实现一个单行天气信息,包括当前城市的温度和天气状况。
index. wxml代码片段修改如下:

index.wxss代码片段如下：

4.区域3（天气图标）设计

区域3需使用< image >组件展示当前城市的天气图标。

index.wxml代码片段修改如下：

index.wxss代码片段如下：

当前效果图如图所示。

5.区域4（多行天气信息）设计

区域4需使用< view >组件来展示多行天气信息。

index.wxml代码片段修改如下：

index.wxss代码片段如下：

当前效果图如图所示。

2.5逻辑实现

2.5.1更新省、市区信息

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

index.wxml代码片段修改如下：

由于地区选择器的返回结果是数组的形式，所以在index.js文件的data中定义region为包含了省、市、区3个项目的数组。

index.js代码片段修改如下：

2.5.2更新页面天气信息

将index.wxml页面是所有临时数据都替换为{{属性}}的形式，比如温度是{{tmp}}。

index.wxml代码片段修改如下:

另外，在网速受限的情况下也许不能立刻获取数据，因此可以在index.js文件的data中为相关属性规定初始数据，这样便可以在获取实际数据前临时显示这些信息。

index.js代码片段修改如下：

2.5.3获取实况天气数据

在index.js文件中使用自定义函数getWeather进行实况天气数据的获取。（由于非直辖市无法查询到具体地区，所以后续的天气以城市作为查询依据）

index.js代码片段修改如下：

同时在index.js文件中继续自定义函数getLocationID进行获取接口的另一个参数LocationID。

index.js代码片段修改如下：

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

index.js代码片段修改如下:

然后在联网状态下编译运行后，可以在Console控制台得到第三方服务器发回的json数据。如图所示：

三、程序运行结果

初始显示效果：

选择需查询天气的城市地区：

天气查询结果：

至此实验2便结束了。