2022夏《移动软件开发》实验二

​

姓名：*** 学号：**********

​

姓名和学号？	***，**************
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？
Github仓库地址？

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

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

1.准备工作

1.1API密钥申请

在和风官网注册账号后，通过应用管理，创建新应用，并申请一个新的API密钥。

2.项目创建

此次的项目命名为weatherDemo。

3.页面创建

(1)将app.json文件内 pages属性中的“pages/logs/logs”删除﹐并删除上一行末尾的逗号。

(2）删除utils文件夹及其内部所有内容。

(3)删除pages文件夹下的 logs目录及其内部所有内容。

(4）删除 index. wxml 和 index. wxss 中的全部代码。

(5）删除 index.js 中的全部代码,并且输入关键词page找到第二个选项按回车键让其自动补全函数(如图5-6所示)。

(6)删除app. wxss中的全部代码。

(7）删除app.js 中的全部代码,并且输人关键词app找到第一个选项按回车键让其自动补全函数(如图5-7所示)。

(8)在项目中创建一个新文件夹，将从官网下载的天气图标存放入其中。

(9)通过修改app.json文件，更换导航栏样式。

(10)再通过修改wxss、js、wxml等文件，实现容器样式的改变。

(11)通过动态数据的方式，修改组件中的地址，并通过函数获取城市ID传送到天气查询函数中，获取天气。

(12)再通过动态数据的方式，将天气表现在小程序界面上。

app.json文件的完整代码如下：

 

 

WXML文件的完整代码如下：

 

 

 

WXSS文件的完整代码如下：

 

 

 

JS文件的完整代码如下：

 

 

 

 

三、程序运行结果

 

 

四、问题总结与体会

在通过API进行天气查询的时候，发现文档中给出的API已经被和风天气淘汰，为查询天气，进入和风官网获取了新的API，同时发现，新的API不再依靠地名索引，而是要用城市ID获取天气信息，因此又在和风天气官网中，找到了geoapi，通过这个API可以查询到对应城市的ID，通过这个ID便可以获取所需城市的天气信息。

通过本次实验我熟练掌握了服务器域名配置和临时服务器部署并且掌握了 wx.request 接口的用法，可以熟练运用这个接口，通过外部网站提供的API在小程序中获取所需信息，为我日后完成个人项目打下坚实基础。