2024年夏季《移动软件开发》实验二：天气查询小程序

最新推荐文章于 2024-10-02 15:19:42 发布
最新推荐文章于 2024-10-02 15:19:42 发布
阅读量682 收藏 15
点赞数 29
文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yvmanqi/article/details/141366808
版权

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

注意事项：

1、本实验中，需要使用和风天气 API，需要注册用户，大家请自行阅读和风天气官 方文档：https://dev.qweather.com/docs/api/weather/weather-now/

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

3、因为要向和风天气发送请求，如果保持登录状态将无法发送请求，切换为游客模式即可。

一、实验目标

1、掌握服务器域名 配置和临时服务器部署；

2、掌握 wx.request 接口的用法。

二、实验步骤

1.首先新建images pages index 文件夹及app.js app.json app.wxss文件

如下图所示：

在这里插入图片描述

2.在app.json 中添加背景颜色等信息，修改界面样式

app.json代码如下：

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

结果如下：

在这里插入图片描述

3.在index.wxss 文件中添加小程序信息，包括地区名、温度、天气等，并添加恰当的wxss样式，调整页面布局大小等

地区初始化为“北京市，北京市，东城区”，N/A图片是在网上找的一张图，表示暂时没有天气信息，其他信息为0；

index.wxml代码如下：

<view class='container'>
<!-- 选择地区 -->
<picker>
  <view style='font-size:50rpx'>北京市，北京市，东城区</view>
</picker>
<!-- 文本区域 -->
<text>0℃</text>
<!-- 图片区域 -->
<image src="/images/1.svg"></image>
<!-- 多行天气信息 -->
<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'>0</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>

index.wxss代码如下：

.container{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;

}
.detail{
  width:100%;
  display:flex;
  flex-direction:column;
}
.bar{
  display:flex;
  flex-direction:row;
  margin:20rpx 0;
}
.box{
  width:33.3%;
  text-align:center;
}
text{
  font-size:80rpx;
  color:#3C5F81;
}
image{
  width:300rpx;
}

结果如下：

在这里插入图片描述

4.在app.wxss文件中调整页面布局，使信息分散一些，不凑在一起

app.wxss代码如下：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

结果如下：

在这里插入图片描述

5.在index.wxml的“选择地区”里选择picker中的region,并添加bindchange函数，写入index.js文件中

picker为从底部弹起的滚动选择器，本程序选用其中的省市区选择器；

bindchange为函数，可以更换城市信息，要自己写；

index.wxml更改的代码如下：

<!-- 选择地区 -->
<picker mode='region' bindchange='changeRegion'>
  <view style='font-size:50rpx'>北京市，北京市，东城区</view>
</picker>

index.js代码如下：

 data: {
    region:['北京市','北京市','东城区']
  },
  changeRegion:function(e){
    this.setData({
      region:e.detail.value
    })
    this.getWeater();
  },

结果如下：

在这里插入图片描述

6.进入和风天气官网->控制台->应用管理->新建应用,完成后复制key，保存起来

结果如下：
在这里插入图片描述

7.下载天气图片，并解压至images中

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

8.获取常规天气数据：和风天气->文档->开发文档->实时天气->实时天气 for API,获取URL

以北京市为例的URL：

https://devapi.qweather.com/v7/weather/now?location=101010100&key=657a0142f0f04062a57f1d515f05bae0

9.登录微信公众平台->开发管理->服务器域名，添加 https://devapi.qweather.com和https://geoapi.qweather.com为request合法域名

结果如下：

在这里插入图片描述

10.在index.wxml文件中将天气信息改为变量，并在index.js 文件中添加 getWeather 函数，获取任意地区的天气信息

index.wxml改后代码如下：

<view class='container'>
<!-- 区域1：地区选择器 -->
<picker mode='region' bindchange='changeRegion'>
  <view style='font-size:50rpx'>{{region}}</view>
</picker>
<!-- 区域2：文本区域 -->
<text>{{now.temp}}℃{{now.txt}}</text>
<!-- 区域3：图片区域 -->
<image src="/images/{{now.icon}}.svg"></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}}</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>

index.js添加完后 data getWeather和 changeRegion 函数代码如下：

data: {
    region:['北京市','北京市','东城区'],
    now:{
      temp:0,
      icon:1,
      cond_txt:'未知',
      cond_code:'999',
      humidity:0,
      pressure:0,
      vis:0,
      windDir:0,
      windSpeed:0,
      windScale:0
    }
  },
  changeRegion:function(e){
    this.setData({
      region:e.detail.value
    })
    this.getWeater();
  },
getWeater: function(){
  var that=this;//this不可以直接在wxAPI中使用
  wx.request({
    url: 'https://geoapi.qweather.com/v2/city/lookup',
    data:{
      location:that.data.region[1],
      key:'657a0142f0f04062a57f1d515f05bae0'
    },
    success:function(res){
      console.log(res.data)
      that.setData({
        Place_ID:res.data.location[0].id
      })
      wx.request({
        url:'https://devapi.qweather.com/v7/weather/now?',
        data:{
          location:that.data.Place_ID,
          key:'657a0142f0f04062a57f1d515f05bae0'
        },
        success:function(res){
          console.log(res.data.now)
          that.setData({
            now:res.data.now
          })
        }
      })
    }
  })
},

结果如下：

在这里插入图片描述

三、程序运行结果

切换城市前：
在这里插入图片描述

切换城市后：

在这里插入图片描述

四、问题总结与体会

1.描述实验过程中所遇到的问题，以及是如何解决的

和风天气API：

获取城市 id：https://geoapi.qweather.com/v2/city/lookup?

获取城市天气：https://devapi.qweather.com/v7/weather/now?

在利用 wx.request 的 API 和风天气的两个 API获取实况天气数据时，一直出错，经过在网上查找发现， 通过第一个 API 获取当前城市的 id，获取 id 成功后再将 id 和 key 作为参数通过第 二个 API 上传到和风天气服务器获取当前 id 城市的天气状况。

参考文章如下：

2023暑假小程序开发 实验2：天气查询小程序_微信小程序是如何获取天气的?-CSDN博客

2.收获和体会

学会了制作天气查询小程序的基础知识，虽然花费了很长时间，但是最终做出来了，觉得很有意义。

取天气的?-CSDN博客](https://blog.csdn.net/zhangyihuai123/article/details/132453188?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-132453188-blog-124496509.235v43pc_blog_bottom_relevance_base6&spm=1001.2101.3001.4242.1&utm_relevant_index=3)

2.收获和体会

学会了制作天气查询小程序的基础知识，虽然花费了很长时间，但是最终做出来了，觉得很有意义。

yvmanqi
关注
Android studio天气预报APP的主界面布局及初始化
m0_62482566的博客
04-16 1862
在app_src_main_res_values文件下的colors.xml主要负责颜色设置，strings.xml负责字符串设置，styles.xml负责全局样式或控件样式。在线性布局中，如果水平排列，垂直方向上只能有一个控件；在layout文件右键，新建一个Layout XML File文件，命名为sp_item_layout.xml用来编写下拉菜单的布局。textStyle：设置字体风格，三个可选值：**normal**(无效果)，**bold**(加粗)，**italic**(斜体)
基于Android平台开发，天气预报APP搜索实现（二）
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-24 530
【代码】基于Android平台开发，天气预报APP搜索实现（二）
Android Studio 实现天气预报App （简单方便展示内容超多）
热门推荐
编程乐学的博客
01-16 1万+
Android Studio 实现天气预报App （简单方便展示内容超多）在使用Android Studio开发天气预报应用程序时，首先需要考虑提供给用户的功能和用户体验。这包括设计直观友好的用户界面，与实时天气数据的交互以及用户权限管理。本文将带领读者使用Java语言和Android Studio创建一个天气预报应用程序的初步框架，并介绍如何获取实时天气数据以及在应用程序中展现这些数据的方法。通过本文，读者将学习如何创建一个功能完善的天气预报应用程序，并为用户提供实时准确的天气信息。
OUC2024年夏季《移动软件开发》_天气查询小程序
m0_73623734的博客
08-20 890
一个可以查询城市天气状况的微信小程序的制作教程与心得。
2024年夏季《移动软件开发》实验报告二
lingard_wxck的博客
08-20 967
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。问题：根据教程写getWeather函数时，console报错代码code为400，参数不全解决方法：教材中的并不是LocationID，而是需要通过调用util.js中的getLocationID函数来获取LocationID改为问题：根据教程中的URL出错解决方法：通过查询和风天气的文档，现在的免费的API Host改为https://devapi.qweather.com/v7/weather/now。
2024移动软件开发——实验二
m0_73964786的博客
08-20 749
实现一个可以查看不同城市天气的微信小程序
2024年夏季《移动软件开发》实验报告三
lingard_wxck的博客
08-26 902
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。问题：忘记领取免费图像识别额度，导致调用失败解决方法：必须自己注册完手动领取，百度官方不会自动赠送收获和体会：通过这次实验，我学会了在微信小程序中部署云函数和云数据库，来进行垃圾分类；并且学会调用百度的图像识别功能提供对垃圾分类的图像识别。这个功能能够让开发者更加注重前端的开发，大大地节省了开发时间和难度，无需关注服务器、网络和数据库等底层技术，极大的便利了开发者的开发和学生的学习。
2024年夏季《移动软件开发》实验报告 - 实验5：高校新闻网
reydelCampNou的博客
09-02 1029
my.js中的函数在返回时去除了空数据。登录问题采用实验一中的方法解决，修改基础库至2.16.1。
中国海洋大学2024年夏季《移动软件开发》实验报告一
bxcff的博客
08-19 338
本次实验中我成功完成了自己开发的第一个小程序，在这个过程中主要遇到的问题包括初始化头像时出现拼写错误，使用getUserInfo获取用户信息和头像失败，后改为getUserProfile来获取用户信息，其次是像像这样修改后需要更改调试基础库的版本才能使用getUserProfile。
2024 年 15 大软件开发趋势
iCloudEnd的博客
01-08 1014
步入 2024 年，在技术创新和不断变化的市场需求的推动下，软件开发格局继续呈指数级发展。对于企业和开发人员来说，紧跟这些趋势不仅有益，而且对于保持竞争力和成功至关重要。在本文中，我们探讨了预计将在 2024 年产生重大影响的关键软件开发趋势。
基于LangChain-Chatchat实现智能问答系统
2301_78234743的博客
05-06 1138
政务方向，直接推组长，流程推进快，有意可私信，官网可见此岗位要求：尽快入职，HC地点优先北京 ，每周。我真绷不住了，快手4/25面之后泡到现在，实在等不及了打电话去问hr，一问说是已经离职了，并且不知道。一面1、自我介绍2、项目介绍、项目亮点3、盒模型4、实现水平垂直居中5、CSS实现三角形6、JS的数。base 地都是上海，美团是到店下面的本地核心商业，做的应该是基建相关的技术，转正率不知道怎么样。又是面的稀烂的一集两个面试官拷打我的项目，话说这不是一面吗主要拷打在压测这一块，看得出来面试官对这块。
DBA | Oracle 数据库基础概述、版本选择!
WeiyiGeek 唯一极客IT知识分享
08-04 186
描述: Oracle 数据库(Oracle database,简称 Oracle) 又名是甲骨文公司的一款关系数据管理系统，也是世界上使用最广泛的关系数据库管理系统，占据着全球数据库份额的48%左右，在中国使用更是占据到57%的份额，全球五百强企业中90%都在使用Oracle，中国前100大企业也有近99个都在使用Oracle。Oracle 数据库产品为客户提供成本优化的高性能版 Oracle 数据库、全球领先的融合多模型数据库管理系统以及 In-memory、NoSQL 和 MySQL 数据库。
6G技术和应用——沙特国王大学学报
2022年1月28日收到2022年3月21日修订2022年3月21日接受2022年3月30日在线提供保留字：蜂窝通信6G驱动程序标准化6G需求研究活动无人机网络未来工厂本地化CAV网络HW-SW划分B5 G项目5G先进A B S T R A C T第五代（5G）...
助农小程序|助农扶贫系统|基于java的助农扶贫系统小程序设计与实现(源码+数据库+文档)
伟庭的博客
09-29 1105
扶贫微信小程序，可以实现目标用户群需要的功能，其中管理员管理注册农户以及注册用户的信息，统计订单，管理商品，商品评价，商品退货等信息。农户管理销售的商品，对订单商品进行发货。本次课题针对助农扶贫农户销售农产品，借助于微信小程序这样的平台，可以更加方便用户购买农户销售的商品，也让农户方便管理销售的商品，管理商品订单以及订单配送信息，该平台不仅能够帮助农户销售农产品，还能增加农户的收入。助农扶贫系统。
小程序原生-利用setData()对不同类型的数据进行增删改
一个人的江湖
09-30 716
Object.assign()将多个对象合并成一个对象，从后往前合并，以后面的为准。
基于Spring Boot+Unipp的中考体测训练小程序（协同过滤算法、图形化分析）【原创】
最新发布
paopaokaka_luck的博客
10-02 1123
🎈系统亮点：协同过滤算法、图形化分析；
Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官
Verhan_Cao的博客
09-27 758
Food Buddy，饮食陪伴官项目。这是一款专注于饮食管理的uniapp程序。 在传统饮食管理APP的基础上，融入了AI伙伴，这个全新的尝试不仅能增加饮食管理的趣味性，更重要的能增加用户解决自身问题的概率。 由湖北师范大学曹飞航、于清江、石雨轩、成达四位核心成员主导开发。
开发微信小程序：定制个人化世界时钟
开发一个时间小程序，用于解决与异国朋友交流时的时差问题，目标是创建一个简洁无广告的小程序，能显示指定城市的实时时间。 开发一个时间小程序的需求主要包括以下几点： 1. 显示加州、纽约和北京三个城市的当前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值