2023年夏季《移动软件开发》实验报告
姓名和学号? | |
---|---|
本实验属于哪门课程? | 中国海洋大学22夏《移动软件开发》 |
实验名称? | 实验2:天气查询小程序 |
博客地址? | |
Github仓库地址? |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、掌握服务器域名配置和临时服务器部署;2、掌握 wx.request 接口的用法。
二、实验步骤
1.前置工作
要想使用和风天气API,必须得注册一个账号实时天气 for API | 和风天气开发服务 (qweather.com)
注册好账号之后,就可以新建一个项目来获取key了,这里选择的是免费的额度
根据官网的API使用说明,这里使用https://devapi.qweather.com/v7/weather/now?location=101010100&key=YOUR_KEY
这个接口来获取数据,
如果要在小程序里使用API接口,需要将该接口的域名添加到白名单,需要登录微信公众平台的小程序后台添加:
添加https://free-api.heweather.com
2.创建小程序
按照上一个实验的步骤创建项目:
然后把老师提供的天气图标放入images文件夹中备用
3.视图设计
导航栏默认黑底白字,所以要修改一下app.json
中标题的背景色
页面上主要包含4个区域,具体内容解释如下:
-
区域1:地区选择器,用户可以自行选择查询的省,市,区;
-
区域2:显示当前城市的温度和天气状态的文字说明;
-
区域3:显示当前城市的天气图标;
-
区域4:分多行显示其他天气信息,例如湿度、气压、能见度和风向等。
计划使用如下组件:
-
页面整体:< view >组件,并定义 class='container'
-
区域 1:< picker >组件;
-
区域 2:< text >组件;
-
区域 3:<image >组件;
-
区域 4:< view >组件,并定义 class='detail';
-
区域4 内单元行:4 个< view >组件,并定义 class=bar';
-
区城 4 内单元格:每行 3 个< iew >组件,并定义 class='box'
我们先开始进行区域1的设计:
使用picker写一个区域选择器
然后添加单行显示天气:
再添加天气的图标显示
接下来写多行的天气信息,这里写6个天气的信息
使用不同的类名区分,然后再写样式,整体效果如下:
基本的外观写好后,接下来改写具体实现的逻辑了,首先我们需要给picker组件绑定一个函数来监听:
然后使用region变量来代替城市名,具体函数如下:
选择器改变后,修改region的值,可以切换到国内任意省市区
最后一个获取天气数据的函数的编写,这是比较复杂的,因为需要使用wx.request函数,这里使用get请求,data作为请求的参数,然后成功后实行一个函数打印结果
经过一点小修改,可以获取到天气信息
然后添加一个设置函数
再把页面上的变量全部替换成now里面的变量,这样就能自动刷新了
三、程序运行结果
四、问题总结与体会
在程序运行过程中会遇到
地址访问不了的情况,这是因为API接口不支持中文的查询,需要转换成ID,这时候需要使用util.js来转换
导入js得手动填写相对路径
同时由于接口的更新,我需要重新获取定义的变量,这也是比较麻烦的,但是成品做出来之后还是很有颜值的,对于小程序开发的喜爱提升了