2023 Summer "Mobile Software Development" Experiment Report 2

2023 Summer "Mobile Software Development" Experiment Report

Name and student number?
Which course does this experiment belong to?	Ocean University of China 23rd Summer "Mobile Software Development"
Experiment name?	Experiment 2: Weather query applet
blog address?	XXXXXX
Github warehouse address?	XXXXXX

(Note: Publishing the experiment report on the blog and publishing the code to github is a bonus but not mandatory)

1. Experimental goals

1. Master the server domain name configuration and temporary server deployment; 2. Master the usage of the wx.request interface.

2. Experimental steps

List the key steps of the experiment, code analysis, and screenshots.

Register an account

https://dev.qweather.com/

$[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-YJkh8hqY-1692668870946) (C:\Users\Li Zexiang\AppData\Roaming\Typora\typora-user-images\ image-20230821155401186.png)]$

got it after $k ey$

api call method

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

Mini program configures server domain name

Find and configure in development management $re q u es t$ legal domain name

Download Japanese weather icons

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

and put it in the project

Selector

Insert image description here
mode=regionYou can directly display regional information

Complete static page

Insert image description here

Add logical function

Insert image description here

However, at this time, only the selected city text content can be obtained through picker, which needs to be converted into location ID before it can be used, so add the domain name on the WeChat public platformhttps://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 并传递错误
        }
      });
    });
  }

Complete writinglocationId needs to be encapsulated into a promise object before it can be used.then()method

3. Program running results

Insert image description here

Default
Insert image description here

After selecting the region

List the final running results of the program and screenshots.

4. Problem summary and experience

getWeather() and getLocationId() have asynchronous problems, which cannot be solved using then(): encapsulate getLocationId() into $p ro mi se$ photo

Describe the problems encountered during the experiment and how they were solved. What are your gains and experiences, and what suggestions do you have for course arrangements?