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

姓名？	王建享
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？	2024年夏季《移动软件开发》实验报告-CSDN博客
Gitee仓库地址？	miniWeatherAPP

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

订阅和风天气API

配置服务器域名

创建项目文件

在微信开发者平台创建JS项目

删除原有代码，导入图片文件及utils.js

导入程序所需的天气图片以及查找城市id所需的utils.js文件

页面设计

index.wxml

<view class="container">
    
  <picker mode="region" bind:change="regionChange">
    <view>
      {{region}}
    </view>
  </picker>
    
    
  <text>
    {{weather.temp}}℃ {{weather.text}}
  </text>
    
  <image src="/images/weather_icon/{{weather.icon}}.png" mode="widthFix"/>
    
  <view class="detail">
      
    <view class="bar">
      <text class="box">湿度</text>
      <text class="box">气压</text>
      <text class="box">能见度</text>
    </view>
      
    <view class="bar">
      <text class="box">{{weather.humidity}}</text>
      <text class="box">{{weather.pressure}}</text>
      <text class="box">{{weather.vis}}</text>
    </view>
      
    <view class="bar">
      <text class="box">风向</text>
      <text class="box">风速</text>
      <text class="box">风力</text>
    </view>
      
    <view class="bar">
      <text class="box">{{weather.windDir}}</text>
      <text class="box">{{weather.windSpeed}}</text>
      <text class="box">{{weather.windScale}}</text>
    </view>
      
  </view>
    
</view>

index.wxss

.detail {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.bar {
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.box {
  width: 33.3%;
  text-align: center;
}

app.wxss

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
} 
text {
  font-size: 40rpx;
  color: #3C5F81;
}
image {
  width: 220rpx;
}

交互逻辑设计

const { getLocationID } = require("../../utils/util");
​
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    region:['山东省','青岛市','黄岛区'],
    weather:{
      humidity:0,
      pressure:0,
      vis:0,
      windDir:'西风',
      windScale:0,
      windSpeed:0,
      icon:'999',
    },
  },
  getWeather() {
    let region = this.data.region[1];
    let location = getLocationID(region);//调用utils.js中的函数将地址转换为id
    console.log(location);
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',
      data:{
        location:location,
        key:'e3ffb25cd75246f983ae369ae3a97a1a'//申请的和风天气apikey
      },
      success:(res)=>{
        this.setData({
          weather:res.data.now,
        })
      }
    })
  },
  regionChange(e) {
    this.setData({
      region:e.detail.value,//将data中region的值修改为picker选择的值
    })
    console.log(this.data.region);
    this.getWeather();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },
​
})

过程中遇到的问题及解决方法

调试过程中下方出现“页面渲染错误”的提示，但页面并没有出错。

原因及解决方法：data中的icon数据初始化为999，为数字类型，不能直接与地址拼接，但是页面加载后获取了icon数据，将初始化的icon覆盖，成功与地址拼接，故下方出现报错提示但页面并未有问题，解决方法就是将icon:999改为icon:'999'，即将其初始化为字符串类型。

调试过程中API无法正确获取数据，返回code为403

原因及解决方法:查询和风天气官方文档知，该返回值意为没有访问权限，再次查询官方文档，发现免费版订阅的API Host与其他订阅的有所不同，将域名修改为devapi.qweather.com，并在域名配置中添加后即可正常获得天气数据

三、程序运行结果

四、问题总结与体会

本次实验开发了一个简易的实时天气小程序。通过本次实验，我了解了微信小程序中request接口以及picker这一组件的使用方法，同时也学会了微信小程序配置域名的方法。可以说，本节课的学习对于移动软件的开发是相当重要的，原因很简单，现在几乎所有的程序都不可能完全脱离网络而存在，就算是一些功能上不需要联网的程序，也会有检查更新的需求，所以对于获取网络数据的学习是十分重要的。可以说，如果课程缺少了这一节，那么对于移动软件的开发就会寸步难行，最后的成品也会缺乏动态和灵活性。