简易实况天气查询——微信小程序

Ngaizean

已于 2024-08-20 18:18:43 修改

阅读量2.5k

点赞数 22

分类专栏： OUC-MSD 文章标签：微信小程序

于 2024-08-20 18:17:42 首次发布

本文链接：https://blog.csdn.net/y_y_z_y_y_z/article/details/141364861

版权

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

姓名：余毅臻学号：22090022045

姓名和学号	余毅臻
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称	实验2：简易的天气小程序
博客地址	https://blog.csdn.net/y_y_z_y_y_z?spm=1000.2115.3001.5343
`Github`仓库地址	https://github.com/Jamesonlong191207

一、实验目标

学习使用调用网站API
学习制作简易的布局

二、实验步骤

前期准备

本实验中, 需要使用和风天气的API, 需要注册开发者用户, 此处不再赘述, 附上官方文档的地址
小程序的天气状态展示需要和风天气提供的天气状态图标, 官网下载链接
- 也可以通过官方给定的GitHub地址下载: https://github.com/qwd/Icons/releases/download/v1.6.0/QWeather-Icons-1.6.0.zip
API密钥申请
- 完成开发者的注册后, 进入和风天气控制台, 在项目管理一栏中点击创建项目, 选择免费订阅以及Web API

在这里插入图片描述

创建成功后, 记录下KEY

在这里插入图片描述
4. 服务器域名配置

微信小程序官方要求小程序只允许和白名单中的域名进行通信, 因此我们要将以下几个API的通信域名添加至微信的公众平台上
```
https://api.qweather.com
https://devapi.qweather.com
https://geoapi.qweather.com
```

项目框架构建

使用手动创建小程序的方式创建项目, 并删除不必要的文件, 上一个实验已详细阐述, 此处不再赘述.
创建自定义文件
- 将下载好的和风天气天气状态图标文件夹移入自定义创建的文件夹images中, 该文件夹和Pages同级. 文件组织架构如下图所示

在这里插入图片描述

小程序视图设计

导航栏设计

更改app.json文件中的window属性如下, 使得导航栏文本变为"今日天气", 背景颜色为蓝色

"window": {
       
    "navigationBarTitleText": "今日天气",
    "navigationBarBackgroundColor": "#3883FA"
  },

主页面设计(xtml+wxss)

页面上主要包含三大区域, 垂直排列布局. 从上至下的区域分别是: 地区选择器(用户可以自行选择查询地点), 当前地点的温度和天气状态展示区, 多行显示其他详细的天气信息(湿度气压等)

编写index.xtml

<view class = 'container'>
   
  <!-- 区域1 地区选择器 -->
  <picker mode = 'region' bindchange="regionChange"> <!-- regionChange函数实现获取用户选择的地区的映射值-->
    <view>{
      {region}}</view>
  </picker>
  
  <!-- 区域2 当前地区的温度和天气状态展示区 -->
  <text>{
      {now.temp}} {
      {now.text}}</text>
  <image src = '/images/weather_icon/{
        {now.icon}}.svg'mode = 'widthFix'></image>
    
  <!-- 区域3 当前地区的详细天气展示区-->
  <view class = 'detail'>
    <view class = 'bar'>
      <view class = 'box'>湿度</view>
      <view

最低0.47元/天解锁文章