2024年夏季《移动软件开发》实验报告
一、实验目标
1、学习使用快速启动模板创建小程序的方法。
2、学习不使用模板手动创建小程序的方法。
二、实验步骤
首先需要在创建模板后删除模板中不需要的代码和文件,获得空白的模板。
1.API与服务器域名
在和风天气申请免费订阅,获取key,并在服务器域名中添加对应域名。
创建images文件夹,保存表示天气的图标,图片命名与API返回的icon值对应,方便调用。
2.导航栏与组件
在app.wxss中对导航栏的样式进行修改。
效果:
然后在index.wxml中加入组件,分别显示地区、温度、天气和详细气候信息。
在index.wxss中对温度和天气图标的样式进行设计。
效果:
其中地区使用了picker组件,可以在点击该组件后触发选择地区的界面。
然后对详细气候信息的组件的样式进行设计,信息两行三列,每一个信息需要文字标识,因此组件需要四行三列。每一行的三个组件(box)并入一个(bar)组件,四行组件再并入detail。
box按照横向排列,bar之间竖向排列,设置相应的flex布局并调整文字的显示。
效果如下:
组件以及样式的设计完成。
3.逻辑实现
接下来添加事件监听picker组件的变化,并通过调用request方法动态获取当前地区的现在天气信息。
对picker组件进行修改。
在index.js中添加region变量并实现regionChange方法。
setData对region修改并重新渲染画面,实现在picker中选择的新地区可以实时更新到画面。
接下来需要根据选择的地区调用和风天气的API查询实时天气信息。
添加weather变量,编写getWeather方法,调用request方法向API获取信息,并通过setData在weather中的同时渲染画面。
代码:
data{
weather:{
//包含API返回值中需要使用的关键数据
"icon":"999",
...
}
},
getWeather: function(){
var that=this;
wx.request({
url:'https://devapi.qweather.com/v7/weather/now?',
data:{
key:'你的key',
location:util.getLocationID(that.data.region[1])//此处使用了保存在util.js文件中的LocationID并调用了查询方法,
//也可以先调用GeoAPI查询城市的LocationID再查询对应天气
},
success: function(res){
that.setData({weather:res.data.now})
}
})
}
在regionChange中setData之后、onLoad和onPullDownRefresh中调用该方法,即可在重新选择地区、加载小程序和下拉刷新后根据最新的region查询和显示当前天气信息了。
编译之后在appData窗口可以查看weather的值。
再在index.wxml中修改组件显示的内容实现动态显示天气信息。
小程序制作完成。
三、程序运行结果
加载后界面:
选择新地区后画面:
显示正常。
四、问题总结与体会
在小程序制作过程中通过发现因为版本更新,新版中调用API查询天气信息需要使用LocationID或者经纬度坐标,而不是能按照教程直接使用字符串参数。查询API文档后发现通过GeoAPI可以通过字符串获取ID。本次实验的材料文件中已经包含util.js文件提供查询ID的方法,并且已经将接口通过module.exports暴露,因此可以便捷的调用。
通过实验熟悉了微信小程序开发中网络API的应用和js文件模块的定义及引用。