24夏季移动软件开发-实验二

reallywind

已于 2024-08-20 19:43:38 修改

阅读量1.7k

点赞数 44

CC 4.0 BY-SA版权

文章标签：小程序

于 2024-08-20 19:04:23 首次发布

本文链接：https://blog.youkuaiyun.com/reallywind/article/details/141365992

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

姓名和学号？
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？
Gitee仓库地址？	https://gitee.com/CenFongDusty/miniprogram

一、实验目标

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

二、实验步骤

准备阶段

注册和风天气开发者账号注册完成后,可以在控制台中创建项目和key,订阅类型可以直接选择免费订阅.key适用平台选择WebAPI.
在这里插入图片描述

天气查询API

https://devapi.qweather.com/v7/weather/now

查询对应城市天气,要指定参数location和key
例如 https://devapi.qweather.com/v7/weather/now?location=101120206&key=4bf7xxxxxxxxxxxxxx, location是对应城市的编号可以通过geoapi查询(如下)key就是之前创建项目产生的key

https://geoapi.qweather.com/v2/city/lookup 查询对应城市的编号使用方法类似,location可以接受中文城市名称

配置服务器

微信小程序在访问服务器之前需要在开发管理中进行配置,否则不能访问
在这里插入图片描述

创建项目

不使用模板创建一个空项目像实验一同样处理各个文件.
新建文件夹images在其下新建文件夹weather_icon
在这里插入图片描述

从 https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip 下载相应的图标资源
在这里插入图片描述

视图设计

给导航栏指定自己喜欢的样式,同实验一,这里不再赘述.
使用到了各种组件

picker
text
image
view
在index.wxml中

<view class='container'>
  <!--区域1:地区选择器-->
  <picker mode ='region' bindchange='regionChange'>
    <view>{{region}}</view>
  </picker>
  <!--区域2:单行天气信息-->
  <text>{{now.temp}}℃{{now.text}}</text>
  <!--区域3:天气图标-->
  <image src='/images/weather_icon/{{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.windScale}}km/h</view>
      <view class='box'>{{now.windSpeed}}级</view>
    </view>
  </view>
</view>

其中双花括号的内容是动态更新的,在我们实现逻辑之前可以用其他的文字占位来预览显示效果.实现逻辑之后就可以让这些容根据逻辑进行更新.
主要的逻辑部分是在picker中绑定的函数regionChange来具体实现
在index.wxss中

/*文本样式*/
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;
}

两个文件中分别指定了视图的组件和具体大小等格式要求
最终呈现的效果类似于
在这里插入图片描述

逻辑实现

实现在index.js中

// index.js
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    region:['安徽省','芜湖市','镜湖区'],
    idlocation:'101010100',
    now:{icon:999}
  },

  regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getLocationId();
    this.getWeather();
  },

  getWeather:function(){
    var that = this;
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now',
      data:{
        location:that.data.idlocation,
        key:'4bf7*********************'
      },
      success:function(res){
        that.setData({now:res.data.now})
        console.log(that.data.now);
      }
    })
  },

  getLocationId:function(){
    var that = this;
    wx.request({
      url:'https://geoapi.qweather.com/v2/city/lookup',
      data:{
        location:that.data.region[2],
        key:'4bf7************************'
      },
      success:function(res){
        that.setData({idlocation:res.data.location[0].id});
        //console.log(that.data.region[2]);

        //console.log(that.data.idlocation);

      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //this.getWeather();
    //this.setData({now:{icon:999}});
    this.getLocationId();
    this.getWeather();

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})