2023年夏季《移动软件开发》实验报告之实验二

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

一.配置接口，获取key

注册和风天气账户，选择免费web API订阅，获取密钥

二.域名配置

将和风天气的天气域名和地理域名接入小程序管理的白名单，从而小程序可以访问并接受返回信息

三.项目创建和文件准备

创建新模板并下载图标文件放入根目录

四.界面设计

首先设计容器样式

效果如图

接着设计四个部分的界面，分别是地区信息，单行天气信息，天气图标，多行天气信息

1.地区信息：

2.单行天气信息

接收端口返回的温度和文本数据

界面设计

3.天气图标

接收端口返回的天气图标编号，对应到文件夹中的图片并显示在小程序上

图片同一大小为220rpx

4.多行天气信息

设置文本和接收各项信息展示

视图设计

五，逻辑实现

1.获取地区信息

绑定按钮事件获取region，并设计初始数据防止未联网状态无信息，将地区返回的数组整理并传入getWeather函数获取天气信息

2.获取实时天气信息

自定义getWeather函数来获取天气信息

使用request函数，选择devapi端口

注意！获取location时需要额外设置变量从和风天气端口接收相关信息，故编写getloc函数来获取信息

此时端口变为geoapi

故逻辑为先处理地区信息，再获取天气信息·

3.更新页面天气信息

运行查看返回数据，确定各项数据变量名，填入显示界面

now中显示了变量名以及各个数据，我们将其加入到显示界面中

至此逻辑部分结束

三、程序运行结果

列出程序的最终运行结果及截图。

默认地区为山东省青岛市黄岛区

选择地区功能如下：

更新地区后的天气信息如下：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

我遇到的最大问题是在逻辑部分中获取天气时无法成功，教程给的方法是错误的，在查询官方文档和与同学交流后我知道了需要额外添加函数处理信息，然后成功解决问题。第二个问题是变量名有很大变化，教程是过时的，需要实时查看返回变量名来确认信息。

通过这次实验我进一步学习了小程序的界面设计和逻辑编写，了解了端口接入的方法。