创建一个可以查询城市天气的微信小程序

最新推荐文章于 2024-08-20 14:36:57 发布

帅气小王八

最新推荐文章于 2024-08-20 14:36:57 发布

阅读量822

点赞数 27

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/m0_74031588/article/details/141356418

版权

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

1.创建项目

依次输入项目名称、选择目录、APPID等，注意选择不使用云服务。

2.修改与删除文件（及恢复文件初始化）

删除logs文件夹、utils文件夹，清空index.js、index.json、index.wxss、app.wxss文件中的内容，删除app.json文件中page属性里的"pages/logs/logs"，以及上一行的逗号。

3.编写文件

（1）编译导航栏

通过对window属性中内容进行修改，可以达到修改导航栏的作用。例如将原本白底黑字修改为蓝底白字，并修改文字内容。

（2）编译主页面

在index.wxml中编写代码，包含view，image，text，picker。

<view class='container'>

view 是小程序中的一个基础组件，用于创建布局和容器。
class='container' 表示该 view 使用特定的 CSS 类来进行样式控制。

<picker mode='region' bindchange='regionChange'>
<view>{{region}}</view>
</picker>

<picker> 组件用于提供一个选择器，mode='region' 指定该选择器的模式是地区选择。
bindchange='regionChange' 表示在选择地区后，会触发一个名为 regionChange 的事件处理函数。
{{region}} 是一个插值表达式，用于绑定数据，将当前选择的地区显示在选择器内。

<text>{{now.temp}}℃ {{now.text}}</text>

<text> 组件用于展示文本内容。
{{now.temp}} 和 {{now.text}} 是数据绑定，用于显示当前温度和天气状态。now 是一个对象，包含当前天气的信息，例如温度和描述（如“晴天”）。

<image src='/image/{{now.icon}}.svg' mode='widthFix'></image>

<image> 组件用于展示图片，src 属性设置为当前天气图标的路径。
{{now.icon}} 是数据绑定，用于动态加载与当前天气对应的图标文件。
mode='widthFix' 指定图片显示模式，表示图片宽度固定，按照图片比例调整高度。

<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</view>
<view class='box'>{{now.windScale}} 级</view>
</view>
</view>

<view class='detail'> 是一个用于展示详细天气信息的容器。
<view class='bar'> 是一个子容器，包含多个 <view class='box'>，用于列出不同的天气信息标签和相应的值。
对于每一组数据，如湿度、气压、能见度、风向、风速和风力，使用双大括号表示的数据绑定，动态显示当前天气的相关数据。

（3）对主页面元素进行合适的整理

在index.wxss中编写代码，包含container类、image类、text类等。

.container样式：

height: 100vh;: 设置容器的高度为 100% 的视口高度，及用户视窗的全部高度。
display: flex;: 开启 Flexbox 布局模式。
flex-direction: column;: 将子元素的排列方式设定为垂直排列。
align-items: center;: 将所有子元素在交叉轴（这里是水平轴）上居中对齐。
justify-content: space-around;: 在主轴（这里是垂直轴）上分配空间，使得子元素之间的空间相等，并且子元素与容器的边缘也有一定的距离。

image样式：

width: 220rpx;：图像的宽度设置为 220rpx，这使得图像在不同屏幕尺寸下能够自适应。

text样式：

font-size: 80rpx;：设置文本的字体大小为 80rpx。rpx 是在小程序中用来适配不同屏幕的单位。
color: #3c5f81;：将文本颜色设置为特定的蓝色色值。

.detail样式：

width: 100%;：此容器的宽度设置为 100%。
display: flex;：启用弹性盒布局。
flex-direction: column：子项以列的方向排列。
justify-content: space-around;：在主轴上均匀分配父容器中的空间。

.bar样式：

display: flex;：启用弹性盒布局。
flex-direction: row;：子元素在水平方向排列。
margin: 20rpx 0;：上下的外边距为 20rpx，左右没有外边距。

.box样式：

width: 33.3%：每个 .box 的宽度设置为其父元素宽度的三分之一（大约占据 1/3 的空间）。
text-align: center;：文本在这些元素内水平居中显示。

（4）程序逻辑的实现

在index.js文件中修改，包括data函数、onload函数、regionChange函数等。

data对象：

data 是页面的初始数据，用于存储与视图绑定的状态。
region 是一个数组，存储了省、市和区的名称，表示用户选择的地区。
now 是一个对象，包含当前天气的详细信息。所有属性的初始值都设置为 0 或者默认文本，以便在数据未加载时显示占位信息。

regionChange函数：

regionChange 是一个事件处理函数，当用户选择新的地区时会被调用。
e.detail.value 包含用户选择的新地区，将其更新到页面数据中。
调用 this.getWeather() 方法，获取新地区的天气数据。

getWeather函数：

getWeather 是一个方法，负责获取天气信息。
var that=this; 用于在内部的回调中保持对页面实例的引用。
wx.request 是小程序中的网络请求方法，用于向指定 URL 发起请求。
url: 'https://geoapi.qweather.com/v2/city/lookup' 是查询城市的 API URL。
data 中传入的 key 是 API 访问的密钥，location 是用户选择的城市名，这里取的是 region 数组的第二个元素，即城市名。
success 回调函数在请求成功后执行，将返回的数据打印到控制台，并从返回的数据中提取城市的 ID，将其存入页面的 location 数据中。
使用获取到的 location_id 发起另一个请求，以获取当前天气信息。
请求 URL 为 https://devapi.qweather.com/v7/weather/now。
data 中的 location 设为请求获取到的城市 ID，key 仍然是 API 的密钥。
在成功获取天气信息后，更新 now 数据为返回结果中的当前天气数据。