中国海洋大学2023年夏季《移动软件开发》实验报告2

中国海洋大学2023年夏季《移动软件开发》实验报告2

Info: 韩翔 21020007023
Date: 2023-08-23

天气API申请

通过登录和风天气官网（https://www.qweather.com/），根据指引完成天气API的申请。

单击右上角的“天气API”，跳转至以下界面：

单击“免费注册”后，进入注册界面，填写相关信息：（此处为注册成功的样式）

打开和风天气的用户中心，补充好个人信息。

把在和风天气中申请到的域名填入到小程序-开发管理-开发设置-服务器域名中。

• https://devapi.qweather.com
• https://geoapi.qweather.com
  

创建项目

选取基于JavaScript的模板进入开发。

进入主页面后，需要对原有模板进行以下处理：

• 删除utils文件夹及其内部所有内容

• 删除pages文件夹下的logs目录及其内部所有内容

• 删除index.wxml和index.wxss中的全部代码

• 删除index.js中的全部代码，并且输入关键词page生成模板（可借助自动补齐）

• 删除app.wxss中的全部代码

• 删除app.js中的全部代码，并且输入关键词app生成模板（可借助自动补齐）

下载图标

实验中需要的天气图片、utils.js下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

下载完成后保存至文件夹中，如图：

导航栏设计

在app.json中自定义导航栏标题和背景颜色。更改后的代码如下：

{
	"pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarBackgroundColor": "#3883FA",
        "navigationBarTitleText": "今日天气"
    }
}

页面设计

页面上主要包含4个区域：

• 地区选择器，用户可以自行选择查询的省、市、区
• 显示当前城市的温度和天气状态的文字说明
• 显示当前城市的天气图标
• 分多行显示其他天气信息，例如湿度、气压、能见度和风向等

对于页面容器的定义如下：（wxml文件）

<view class='container'>
</view>

在app.wxss中设置容器样式，代码片段如下：

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

对于地区选择器，需要使用<picker>组件来实现：

WXML:

<view class='container'>
	<picker mode='region'>
    	<view>北京市</view>
    </picker>
</view>

单行天气信息需使用<text>组件实现。

WXML:

<view class = 'container'>
	...
    
    <text>19℃ 晴</text>
</view>

WXSS:

text {
    font-size: 80rpx;
    color: #3C5F81;
}

天气图标需要使用<image>组件显示。

WXML:

<view class='container'>
	...
	...
    <image src='/images/wather_icon/999.png' mode='widthFix'></image>
</view>

WXSS:

image {
    width: 220rpx;
}

此外，要补充多行天气信息的内容：

WXML:（完整版）

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

  <!-- 区域2：单行天气信息 -->
  <text> {{now.temp}}℃ {{now.text}}</text>

  <!-- 区域3：天气图标 -->
  <image src='/icons/{{now.icon}}.png' mode='widthFix'></image>

  <!-- 区域4：多行天气信息 -->
  <view class='detail'>
    <view class="bar">
      <view class='box'>湿度</view>
      <view class='box'>气压</view>
      <view class='box'>能见度</view>
    </view>
    <view class="bar">
      <view class='box'>0%</view>
      <view class='box'>0hPa</view>
      <view class='box'>0km</view>
    </view>
    <view class="bar">
      <view class='box'>风向</view>
      <view class='box'>风速</view>
      <view class='box'>风力</view>
    </view>
    <view class="bar">
      <view class='box'>0</view>
      <view class='box'>0km/h</view>
      <view class='box'>0级</view>
    </view>
  </view>
</view>

WXSS:（完整版）

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

text {
  font-size: 80rpx;
  color: #3C5F81;
}

image {
  width: 220rpx;
}

.detail {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bar {
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}

.box {
  width: 33.3%;
  text-align: center;
}

逻辑实现

通过修改WXML和JS文件中的代码，实现相应的逻辑。

WXML:

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

  <!-- 区域2：单行天气信息 -->
  <text> {{now.temp}}℃ {{now.text}}</text>

  <!-- 区域3：天气图标 -->
  <image src='/icons/{{now.icon}}.png' mode='widthFix'></image>

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

JS:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    region:['安徽省','芜湖市','镜湖区'],
    id: 101220301,
    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: "b9349bf3c2a14b51b7bb17febe5b27d2"
      },
      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: "b9349bf3c2a14b51b7bb17febe5b27d2"
      },
      success: function(res) {
        console.log(res.data)
        that.setData({now: res.data.now})
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getId(this.data.region[1])
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }

  
})

效果如图：

至此，天气小程序的制作就完成啦！😀