2022年夏季《移动软件开发》实验报告
| 姓名和学号？ | 张俊博，20020007100 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |
| 实验名称？ | 实验2：天气查询小程序 |
| 博客地址？ | (https://blog.csdn.net/Texas_old_ox?type=download) |
| Github仓库地址？ | Upload files · CBCYDDSWSW/weather (github.com) |
一、实验目标
1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
一.前期准备
1.申请API密钥
进入和风天气网站注册账户，找到控制台，在应用管理中创建应用，生成个人key。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJGu4y1N-1661300645287)(C:\Users\dell\Desktop\屏幕截图 2022-08-18 130314.png)]
2.服务器域名配置
登录微信公众平台在开发设置中找到”服务器域名“选项，进行配置：
https://devapi.qweather.com
https://geoapi.qweather.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bvq831gB-1661300645288)(C:\Users\dell\Desktop\屏幕截图 2022-08-18 130722.png)]
二.项目创建（方法如实验一，仍旧选择JavaScript语言）
三.页面配置
2.创建其他文件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-isoBaqfN-1661300645289)(C:\Users\dell\Desktop\屏幕截图 2022-08-18 131230.png)]
四.视图设计
1.导航栏设计
{
“pages”:[
“pages/index/index”
],
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#3883FA”,
“navigationBarTitleText”: “今日天气”,
“navigationBarTextStyle”:“black”
},
“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}
效果如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fnFEkweX-1661300645289)(C:\Users\dell\Desktop\屏幕截图 2022-08-18 131654.png)]
2.页面设计
.container{
height: 100vh;
display:flex;
flex-direction:column;
align-items: center;
justify-content: space-around;
}
3.添加天气图标
使用组件,修改WXML文件如下:
<image src='/images/weather_icon_s1_color/{{Now.icon}}.png’mode =‘widthFix’>
4.天气信息设计:
湿度 气压 能见度 {{Now.dew}}% {{Now.pressure}} hPa {{Now.vis}}km 风向 风速 风力 {{Now.windDir}} {{Now.windSpeed}}km/h {{Now.windScale}}级.detail{
width: 100%;
display:flex;
flex-direction:column;
}
.bar{
display: flex;
flex-direction: row;
margin: 20rpx 0;
}
.Box{
width:33.3%;
text-align:center;
}
五.逻辑实现:
1.更新省.市.区信息
<picker mode = "region"bindchange = ‘regionChange’>
{{region}}
regionChange:function(e){
this.setData({region:e.detail.value});
this.getWeather();
},
效果如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVCdKLWa-1661300645290)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 164448.png)]
5.获取实况天气
getWeather:function(){
var that = this;
wx.request({
url: ‘https://geoapi.qweather.com/v2/city/lookup’,
data:{
location:that.data.regionId[1],
key:‘b3dbe99359b04a75a87ccead63443aab’
},
success:function(res){
that.setData({regionId:res.data.location[0].id});
console.log(that.data.regionId);
}
})
wx.request({
url: ‘https://devapi.qweather.com/v7/weather/Now’,
data:{
location:that.data.regionId,
key:‘b3dbe99359b04a75a87ccead63443aab’
},
success:function(res){
that.setData({Now:res.data.Now});
console.log(66);
}
})
},
onLoad(options){
this.getWeather();
}
(先调出城市地址ID,再用城市ID去获取城市天气信息.)
6.更新页面天气信息
将WXML所有临时数据替换如下:
湿度 气压 能见度 {{Now.dew}}% {{Now.pressure}} hPa {{Now.vis}}km 风向 风速 风力 {{Now.windDir}} {{Now.windSpeed}}km/h {{Now.windScale}}级7.规定初始数据
Now:{
tmp:0,
cond_txt:‘未知’,
cond_code:‘999’,
hum:0,
pres:0,
vis:0,
wind_dir:0,
wind_spd:0,
wind_sc:0
}
三、程序运行结果
最终呈现结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cImdqqSU-1661300645290)(C:\Users\dell\Desktop\屏幕截图 2022-08-18 134312.png)]
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
实验过程中,天气信息未能显示,通过修改天气信息获取函数以及weather接口参数最终正确显示.
pres:0,
vis:0,
wind_dir:0,
wind_spd:0,
wind_sc:0
}
三、程序运行结果
最终呈现结果:
[外链图片转存中…(img-cImdqqSU-1661300645290)]
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
实验过程中,天气信息未能显示,通过修改天气信息获取函数以及weather接口参数最终正确显示.
收获与体会:做实验还是要自己多多思考,要有自己的想法.
原文地址：https://www.jb51.cc/wenti/3286498.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
