2024移动软件开发——实验二

aster young

已于 2024-08-20 18:52:52 修改

阅读量724

点赞数 26

文章标签：微信小程序

于 2024-08-20 18:51:19 首次发布

本文链接：https://blog.csdn.net/m0_73964786/article/details/141365711

版权

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

一、实验目标

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

二、实验步骤

1. 在和风天气网站注册账号并申请API

和风天气开发服务 ~ 强大、丰富的天气数据服务 (qweather.com)

点击免费注册，注册后登录账号
在这里插入图片描述

进入开发服务控制台

在这里插入图片描述

在项目管理界面创建key

在这里插入图片描述

2. 为微信小程序配置服务器域名

管理——>开发管理——>服务器域名修改

在这里插入图片描述

3. 下载和风天气矢量图标，放在项目合适位置

和风天气图标 ~ 开源、漂亮的天气图标库，支持SVG和Web Font，兼容和风天气API，适用于任何需要天气图标的项目。 (qweather.com)

在这里插入图片描述

在项目根目录创建文件夹image，将下载的图片放入。

在这里插入图片描述

4. 设计页面整体布局

我按照要求将页面分为四个区域。具体代码如下：

<view class='container'>
  <!-- 区域1：地区选择器 -->
  <picker mode='region' bindchange='regionChange'>
    <view class='region-picker'> 
      <view class='cityInfo'>{{region}}</view>
    </view>
  </picker>

  <!-- 区域2：单行天气信息 -->
  <view class='weather-info'>
    <view class="tempNumber">{{now.temp}}℃</view>
    <view class="weatherText">{{now.text}}</view>
  </view>

  <!-- 区域3：天气图标 -->
  <image src='/images/{{now.icon}}.svg' class='weather-icon'></image>

  <!-- 区域4：多行天气信息 -->
  <view class='detail'>
    <view class="bar">
      <view class='box1'>湿度</view>
      <view class='box1'>气压</view>
      <view class='box1'>能见度</view>
    </view>
    <view class="bar">
      <view class='box2'>{{now.humidity}}%</view>
      <view class='box2'>{{now.pressure}}hPa</view>
      <view class='box2'>{{now.vis}}km</view>
    </view>
    <view class="bar">
      <view class='box1'>风向</view>
      <view class='box1'>风速</view>
      <view class='box1'>风力</view>
    </view>
    <view class="bar">
      <view class='box2'>{{now.windDir}}</view>
      <view class='box2'>{{now.windSpeed}}km/h</view>
      <view class='box2'>{{now.windScale}}级</view>
    </view>
  </view>
</view>

5. 调整wxss样式细节，让小程序界面更加美观

为了确保小程序的界面美观且易于阅读，我对样式进行了精细调整。以下是具体的样式设置：

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: whitesmoke;
}

text {
  font-size: 60rpx;
  color: #0A74DA;
}

.cityInfo {
  font-size: 50rpx;
  color: black;
}
.weather-info {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.tempNumber {
  font-size: 120rpx;
  font-weight: bolder;
  color: #0A74DA;
  margin-right: 20rpx; 
}

.weatherText {
  font-size: 80rpx;
  color: #0A74DA;
}


.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image {
  width: 330rpx;
}

.detail {
  width: 100%;
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 0;
}

.box1, .box2 {
  width: 32%;
  text-align: center;
}

.box1 {
  color: #0A74DA;
  font-weight: bold;
  font-size: 40rpx;
}

.box2 {
  color: #333;
  font-size: 30rpx;
}

6. JS中接入API，实现对相应城市天气状况的更新

在JS中，我通过和风天气的API获取天气数据并更新页面。以下是实现的代码：

  data: {
    region:['安徽省','芜湖市','镜湖区'],
    id: 101271801,
    now: {
      tmp: 0,
      cond_txt:'未知',
      cond_code:'999',
      hum: 0,
      pres: 0,
      vis: 0,
      wind_dir: 0,
      wind_spd: 0,
      wind_sc: 0
    }
  },

  regionChange: function(e) {
    this.setData({region: e.detail.value})
    this.getId(this.data.region[1])
  },

  getId: function(city) {
    city = city.slice(0, -1)
    let that = this

    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?',
      data: {
        location: city,
        key: "89c39afe9e284d50aeb734802a56cbff"
      },
      success: function(res) {
        that.setData({id: res.data.location[0].id})
        that.getWeather()
      }
    })
  },

  getWeather: function() {
    console.log(this.data.id)

    let that = this
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',
      data: {
        location: that.data.id,
        key: "89c39afe9e284d50aeb734802a56cbff"
      },
      success: function(res) {
        console.log(res.data)
        that.setData({now: res.data.now})
      }
    })
  },