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

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

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

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

一、实验目标

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

二、实验步骤

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

注册账号

https://dev.qweather.com/

之后得到了$key$

api调用方法

https://devapi.qweather.com/v7/weather/3d?location=101010100&key=这里替换成你的key

小程序配置服务器域名

在开发管理中找到并配置好$request$合法域名

下载和风天气的图标

https://dev.qweather.com/docs/resource/icons/

并放到项目中

选择器

mode=region就可以直接显示地区信息

完成静态页面

添加逻辑函数

但是，此时通过picker只能得到选择的城市文字内容，需要转成locationID才可以使用，所以在微信公众平台添加域名https://geoapi.qweather.com

getLocationId() {
    return new Promise((resolve, reject) => {
      let that = this;
      wx.request({
        url: 'https://geoapi.qweather.com/v2/city/lookup?',
        data: {
          location: that.data.region[1],
          adm: that.data.region[0],
          key: 'e21f318045b848e29f6b1b1634dbe163'
        },
        success: (res) => {
          console.log("getLocationId", res.data);
          that.setData({
            locationId: res.data.location[0].id
          });
          resolve(); // 解析 Promise
        },
        fail: (error) => {
          reject(error); // 拒绝 Promise 并传递错误
        }
      });
    });
  }

完成locationId的编写，需要封装成promise对象，才能在使用.then()方法

三、程序运行结果

默认情况

选择完地区之后

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

四、问题总结与体会

1. getWeather()和getLocationId()有异步问题，并且使用then()解决不了：将getLocationId()封装成$promise$对象

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