小白入门第二个微信小程序：天气查询

已于 2024-08-20 15:58:41 修改
阅读量279 收藏 9
点赞数 4
文章标签： 微信小程序 java 服务器
于 2024-08-20 15:57:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iahsjs/article/details/141360439
版权

小白入门第二个微信小程序：天气查询

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。
1.注册和风天气账户，申请API
在这里插入图片描述

在这里插入图片描述

2.前往微信小程序平台后台配置服务器 ，包括两个域名：https://geoapi.qweather.com/v2/city/lookup；https://devapi.qweather.com/v7/weather/now
在这里插入图片描述

3.创建项目，删除模板自带的多余的文件
在这里插入图片描述

4.下载图片，链接：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip
在项目中添加文件夹images和子文件夹waeather_icon，存放一组天气图标即可

5.导航栏设计，在app.json中

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

在这里插入图片描述

6.页面设计，在index.wxss中设计布局参数：

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

在index.wxml中设计布局，先设计地区选择：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
    </picker>
    <text>19度 晴</text>
  </view>

在wxss中再一次添加：

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

在这里插入图片描述

继续迭代设计布局，在wxml中设计天气和天气图标：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
    </picker>
     <!--区域2：单行天气-->
    <text>19度 晴</text>
     <!--区域3：天气图标-->
     <image src='/images/weather_icon/999.png'mode='widthFix'></image>
  </view>

在wxss中：

image{
  width:220rpx;
}

编译运行：
在这里插入图片描述

最后在下方添加多行天气信息：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
    </picker>
     <!--区域2：单行天气-->
    <text>19度 晴</text>
     <!--区域3：天气图标-->
     <image src='/images/weather_icon/999.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'>0 hpa</view>
        <view class='box'>0 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'>0</view>
        <view class='box'>0 km/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;
}

最终效果：
在这里插入图片描述

OK，实现完基本布局，现在来实现逻辑
7.更新省市区信息：
在wxml中：

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

在js中：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    region:['安徽省','芜湖市','镜湖区']
  },
regionChange:function(e){
  this.setDate({region:e.detail.value});
},

效果实现：
在这里插入图片描述

8.获取实况天气：
原理：客户端选择地理位置后，首先通过https://geoapi.qweather.com/v2/city/lookup向服务端拉取地理位置的城市编号，在通过城市编号向服务端拉取天气信息。
在js中：

Page({
  getWeather: function() {
    var that = this;

    // 第一步：通过地理位置搜索 API 获取城市编号
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data: {
        location: that.data.region[2], // 使用城市名称（例如：芜湖市）
        key: '8ed2b89756654fafb7f53598b88936df'
      },
      success: function(res) {
        if (res.data && res.data.code === "200") {
          var cityId = res.data.location[0].id; // 获取第一个匹配的城市编号

          // 第二步：使用获取的城市编号获取天气信息
          wx.request({
            url: 'https://devapi.qweather.com/v7/weather/now',
            data: {
              location: cityId, // 使用城市编号
              key: '8ed2b89756654fafb7f53598b88936df'
            },
            success: function(res) {
              console.log(res.data);
              that.setData({ now: res.data.now });
            },
            fail: function(error) {
              console.error("获取天气信息失败：", error);
            }
          });
        } else {
          console.error("城市编号获取失败：", res.data.code);
        }
      },
      fail: function(error) {
        console.error("地理位置搜索失败：", error);
      }
    });
  },

  /**
   * 页面的初始数据
   */
  data: {
    region: ['安徽省', '芜湖市', '镜湖区'],
    now: {
      temp: 0,
      text: '未知',
      icon: '999',
      humidity: 0,
      pressure: 0,
      vis: 0,
      windDir: 0,
      windSpeed: 0,
      windScale: 0
    }
  },

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

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

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

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

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

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

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

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

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

9.将数据改为动态数据，以便更新天气信息：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'bindchange='regionChange'>
    <view>{{region}}</view>
    </picker>
     <!--区域2：单行天气-->
    <text>{{now.temp}}°C{{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.windSpeed}} km/h</view>
        <view class='box'>{{now.windScale}} 级</view>
      </view>
    </view>
  </view>

ok全部完成

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

在本次实验中，出现了多个问题亟待解决：
1.无法通过城市名称来拉取天气信息，因为参数必须是城市编号，故此需要添加一个间接层来解决这个问题，即先通过城市名称来获取城市编号。

2.编译器下方一直提示网络层渲染错误，反复修改后发现是data的默认变量的变量名与now中传来的数据并不匹配，修改后便消失了。

04年码农
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值