2023年夏季《移动软件开发》实验报告-实验二

最新推荐文章于 2024-08-27 20:24:20 发布
最新推荐文章于 2024-08-27 20:24:20 发布
阅读量245 收藏 1
点赞数
分类专栏： 移动软件开发 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62314633/article/details/132431525
版权

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

一、实验目标

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

二、实验步骤

一、准备工作

1、API秘钥申请

进入和风官网网址：https://www.qweather.com/，使用邮箱进行注册，注册完毕之后登录并创建项目，记录个人认证key
在这里插入图片描述

2、API调用方法

目前免费用户可以调用的最新版接口地址为“https://geoapi.qweather.com/v2/”,其服务器节点在中国境内。该接口地址后面追加不同的关键词将获取不同种类的气象数据信息，例如alarm为天气自然灾害预警。我们可以访问官方文档了解各类关键词的使用方法。
本示例将选用关键词weather进行实况天气数据的获取。实况天气即为当前时间点的天气状况以及温/湿/风/压等气象指数，具体包含体感温度、实测温度、天气状况、风力、风速、风向、相对湿度、大气压强、降水量、能见度等。目前该接口允许查询的城市覆盖范围为全球任意一个城市。
基于关键词weather的接口具有两个必填参数和两个可选参数，如表5-1所示。
在这里插入图片描述
其中unit参数相关的公制和英制单位对比如下：

在这里插入图片描述

查询方法如下

https://geoapi.qweather.com/v2/city/lookup?key=这里填你的key&location=要查询的城市名字

例如，使用拼音查询北京市的写法如下：
https://geoapi.qweather.com/v2/city/lookup?key=这里填你的key&location=北京
用户可以直接将这段地址输入到浏览器的地址栏中测试数据返回结果，以下是我测试的返回结果：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

以上只展示部分，返回字段说明可在官网中查询

3、服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中，因此本示例需要对域名地址“https://geoapi.qweather.com”进行服务器配置。

小程序开发者登录mp.weixin.qq.com进人管理员后台，单击“设置”按钮，切换至“开发设置”面板，在“服务器域名”栏中可以添加或者修改进行网络通信的服务器域名地址
在这里插入图片描述

将当前需要使用的接口添加到“request合法域名”中，配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了，注意每个月只可以申请修改5次服务器域名配置。

二、项目创建

本项目创建选择空白文件夹weatherDemo，效果图如下
在这里插入图片描述
在这里插入图片描述

单击“新建”按钮完成项目创建，然后准备手动创建页面配置文件

三、页面配置

1、创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页index即可。
具体操作如下：
(1)将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。
(2)按快捷键Ctrl十S保存当前修改。

2、删除和修改文件

具体操作如下：
(1)删除utils文件夹及其内部所有内容。
(2)删除pages文件夹下的logs目录及其内部所有内容。
(3)删除index.wxml和index.wxss中的全部代码.。
(4)删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数
(5)删除app.wxss中的全部代码。
(6)删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数

3、创建其他文件

接下来创建其他自定义文件，本项目还需要一个文件夹用于存放天气图标素材。文件夹名称由开发者自定义（例如images),单击目录结构左上角的十号创建文件夹并命名为images。
本项目用到的图标素材共计75个，均来源于和风天气官网，图标素材展示如图所示:

在这里插入图片描述

其中图标文件名为对应的天气代码，扩展名均为.png。需要注意的是，部分图标文件名带有字母n,表示夜间天气图标，例如100n.png。
右击目录结构中的images文件夹，选择“硬盘打开”，在该文件夹中新建二级目录weather_icon,然后将图标文件全部复制、粘贴进去。完成后的目录结构如图:

在这里插入图片描述

此时文件配置全部完成

四、视图设计

1、导航栏设计

在app.json中自定义导航栏标题和背景，更改后的app.json文件代码及效果图如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

2、页面设计

页面上主要包含4个区域，具体内容解释如下：

  • 区域1：地区选择器，用户可以自行选择查询的省、在这里插入图片描述
    市、区；

  • 区域2：显示当前城市的温度和天气状态的文字说明；

  • 区域3：显示当前城市的天气图标；

  • 区域4：分多行显示其他天气信息，例如湿度、气压、能见度和风向等。

    注意，面板之间需要有一定的间隔距离。

计划使用如下组件：

  • 页面整体：组件，并定义class=‘container’;
  • 区域1：组件；
  • 区域2： 组件；
  • 区域3：组件；
  • 区域4：组件，并定义class=‘detail’;
  • 区域4内单元行：4个组件，并定义class=bar’;
  • 区域4内单元格：每行3个组件，并定义class=box’。

（1）整体容器设计

首先定义页面容器(),WXML(pages/index/index.wxml)代码片段如下：

<view class='container'>
</view>

在app.wxss中设置容器样式，代码片段如下：

.container{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}

由于还没有添加组件元素，尚不能看出flex布局模型效果

（2）区域1（地区选择器）设计

区域1需要使用组件来实现一个地区选择器，用户点击可切换选择其他城市。WXML(pages/index/index.wxml)代码片段修改如下：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
  </picker>
</view>

组件内部是开发者任意填写的一个城市名称，当前效果如图5所示。由图可见，点击城市名称时会从底部弹出控件，用户可以进行省、市、区的选择。
在这里插入图片描述

(3)区域2（文本）设计

区域2需要使用 组件实现一个单行天气信息，包括当前城市的温度和天气状况
WXML(pages/index/index.wxml)代码片段修改如下： 

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
  </picker>
  <text>19℃晴</text>
</view>

WXSS(pages/index/index.wxss)代码片段如下：

text{
  font-size:80rpx;
  color:#3C5F81;
}

当前效果图如下：
在这里插入图片描述

（4）区域3（天气图标）设计

q区域3需要使用组件展示当前城市的天气图标

WXML(pages/index/index.wxml)代码片段修改如下：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>19℃晴</text>
  <!--区域3：天气图标-->
  <image src='/images/weather_icon/999.png'mode='widthFix'></image>
</view>

WXSS(pages/index/index.wxss)代码片段如下：

text{
  font-size:80rpx;
  color:#3C5F81;
}
image{
  width:220rpx;
}

效果图如下：
在这里插入图片描述

（5）区域4（多行天气信息）设计

区域4需要使用组件展示多行天气信息

WXML(pages/index/index.wxml)代码片段修改如下：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>19℃晴</text>
  <!--区域3：天气图标-->
  <image src='/images/weather_icon/999.png'mode='widthFix'></image>
  <!--区域4：多行天气信息-->
  <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'>0 %</view>
      <view class='box'>0 hPa</view>
      <view class='box'>0 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'>0</view>
      <view class='box'>0 km/h</view>
      <view class='box'>0 级</view>
    </view>
  </view>
</view>

WXSS(pages/index/index.wxss)代码片段如下：

text{
  font-size:80rpx;
  color:#3C5F81;
}
image{
  width:220rpx;
}
.detail{
  width:100%;
  display: flex;
  flex-direction: column;
}
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.box{
  width: 33.3%;
  text-align: center;
}

效果图如下：

在这里插入图片描述

当前为开发者自定义数据，待查询到实况数据后将动态更新区域4内容，此时页面设计全部完成。

五、逻辑实现

1、更新省，市，区信息

首先修改组件中“北京市”为{{region}},然后为组件追加自定义bindchange事件，用于监听选项变化

WXML代码片段修改如下：

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

由于地区选择器的返回结果是数组的形式，所以在JS文件的data中定义region为包含了省、市、区3个项目的数组，初始城市信息由开发者自定义。
JS(pages/index/index.js)代码片段修改如下：

  data: {
    region:['湖北省','咸宁市','通山县']
  },
  regionChange: function (e) {
      this.setData({
          region: e.detail.value
      });
  },

效果图如下所示：
在这里插入图片描述

2、获取实况天气数据

在JS文件中使用自定义函数get Weather进行实况天气数据的获取。由于非直辖市无法查询到具体的区，所以后续的天气查询以城市作为查询依据。
JS(pages/index/index.js)代码片段修改如下：

  getWeather: function () {
      let that = this;
      new Promise((resolve, reject) => {
          wx.request({
              url: 'https://geoapi.qweather.com/v2/city/lookup',
              data: {
                  location: this.data.region[1],
                  key: '27d392d7ae8e420a90482e1b88144b80'
              },
              success: function (res) {
                  resolve(res.data.location[0].id);
              }
          })
      }).then((id) => {
          wx.request({
              url: 'https://devapi.qweather.com/v7/weather/now',
              data: {
                  location: id,
                  key: '27d392d7ae8e420a90482e1b88144b80'
              },
              success: function (res) {
                  console.log(res.data);
                  that.setData({ now: res.data.now });
              }
          })
      })
  },

将上述函数在生命周期函数onLoad和自定义函数regionChange中分别进行调用，表示当页面加载时和切换城市时均主动获取一次实况天气数据。
JS(pages/index/index.js)代码片段修改如下：

 regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },

在联网状态下保存后重新运行会在Console控制台得到第三方服务器发回的json数据，如图所示。
在这里插入图片描述

3、更新页面天气信息

将WXML页面上所有的临时数据都替换成{{now.属性}}的形式，例如温度是{{Now.tmp}}

WXML(pages/index/index.wxml)的代码片段修改如下：

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'bindchange='regionChange'>
    <view>{{region}}</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>{{now.temp}}℃{{now.text}}</text>
  <!--区域3：天气图标-->
  <image src='/images/weather_icon/{{now.icon}}.png'mode='widthFix'></image>
  <!--区域4：多行天气信息-->
  <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}}</view>
      <view class='box'>{{now.vis}}</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}}</view>
      <view class='box'>{{now.windScale}}</view>
    </view>
  </view>
</view>

JS代码片段修改如下：

data: {
      region: ["湖北省", "咸宁市", "通山县"],
      now: {
          temp: "0",
          text: "未知",
          icon: "999",
          humidity: "0",
          pressure: "0",
          vis: "0",
          windDir: "0",
          windSpeed: "0",
          windScale: "0"
      }

  },

运行效果如下：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

实验完成

三、程序运行结果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

四、问题总结与体会

实验过程中整体进行较为顺利，但在最后同步天气信息时出现了问题，无法访问天气信息。经过检查和与同学讨论，发现是因为和风天气的更新，里面许多变量名都需要进行修改。根据和风开发文档中更新的变量名修改后，能够正常显示。经过这次实验，了解到了制作一个天气查询小程序的基本流程，包括API秘钥申请，服务器域名配置等，同时也进一步巩固了页面配置，视图设计，逻辑实现的开发流程，对前端开发更加熟悉。

绵绵87
关注
专栏目录
【移动应用开发】实验2Android UI
Venlln的博客
02-28 3089
一、实验目的 熟练掌握基于UI控件、布局、Activity等技术的Android APP的界面实现技术，以及基于Android Studio的APP UI实现方法。 二、实验内容 实现显示商品列表的APP界面，如图2-1所示。点击一个商品后，可以显示商品详情。 三、实验要求 1.实现上述的基本功能要求。说明：商品内容可以写在代码中。在此基础上，可以进一步优化界面，也可以进一步添加其他功能。 2.实验报告提交内容： 1）结合系统界面（截图）介绍APP功能； 2）核心实现代码（Java或Kotlin代码）和布
2022年夏季《移动软件开发》实验三报告
欢迎一起来学习
08-20 408
2022年夏季《移动软件开发》实验三报告
移动应用开发——实验二
weixin_45102232的博客
05-29 554
一、 实验目标 1、熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。 2、学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。 3、品牌列表网页编程。 二、 实验内容： 1、Vue-CLI脚手架工具搭建一个Web项目。 2、使用Vue技术编写一个简单的品牌列表网页，内容及格式可自己定，效果可参照网址：https://blog.csdn.net/zerobaek/article/details/86567977 截图展示： 主要代码及实现方法简介： 操作区： <div cla
2024移动软件开发——实验四
m0_73964786的博客
08-27 1299
弹幕颜色选择功能实现时，一开始我如下代码定义的选项值（颜色值），用户端点击picker后看到的颜色选项是RGB代码，不够直观。以字典的方式定义每个颜色选项，name用来在picker中显示，code用来在js中为color赋值{ name: "白色", code: "#ffffff" },{ name: "红色", code: "#ff0000" },{ name: "绿色", code: "#00ff00" },{ name: "蓝色", code: "#0000ff" }],</</
移动应用开发实践实验二
weixin_52328032的博客
11-16 1835
1． 了解四种布局管理器的区别和各自特有的属性。 2． 掌握四种布局管理器的应用场合和用法 3． 灵活使用四种布局管理器的嵌套实现各自复杂布局 4． 掌握复用XML布局文件的方法 5． 掌握代码控制UI界面请按照图1设计的样式，完成如图2的Android应用UI的开发根据实验内容及要求，将涉及到的相关理论方面的知识点在此处列举一下。 布局管理器能够管理Android应用中用户UI的各种视图组件,Android提供了四种常用布局管理器,即线性布局 LinearLayout、表格布局 TableLayout、帧
移动软件开发实验二
qq_51731858的博客
08-18 1513
移动软件开发实验二
移动应用开发 实验2—Activity的调用
永烨的博客
03-31 1296
通过线性布局和相对布局来搭建两个Activity界面，界面效果如下图所示。 当点击“去竹园”按钮后，跳转到第二个界面。 在第二个界面中，点击界面中间竹子，可统计摘取竹子数并使对应竹子图片消失。 点击退出竹园按钮后，返回第一个界面，并将摘取竹子数显示到竹子图片后方。
2024年夏季《移动软件开发》实验报告一
08-19
2024年夏季《移动软件开发》实验报告一
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
最新发布
08-29
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
2023年夏季旅游调查报告
06-30
根据给定的“2023年夏季旅游调查报告”及其描述、标签和部分内容，我们可以提炼出以下几个重要的知识点： ### 一、体验经济持续发展 报告指出，在2023年的夏季旅游市场中，体验经济依然是一个核心概念。这意味着...
ouc夏季学期移动软件开发
08-19
ouc移动软件开发实验一
软件学院移动应用软件开发技术实验报告
03-21
软件学院移动应用软件开发技术实验报告，android课程
安卓课程实验报告(移动应用软件开发技术)
11-08
目录： 实验一 熟悉Android的运行环境 实验二 UI设计 实验三 活动与intent的使用 实验四 碎片使用 实验五 广播应用 实验六 SQLite和SQLiteDatabase应用 实验七 多媒体应用 实验八 服务应用 （初学者的实验报告，仅供学习分享，谢绝商业转载，文件只有十个word文档）
上海建桥学院-移动应用开发-实验报告2-Activity组件通信
04-09
实验二 Activity组件通信 一、实验目的及要求 （1） 掌握显示启动和隐式启动的方式 （2） 掌握Activity间的数据通信 二、实验内容及步骤 任务：根据下述要求实现对应程序 1、 完成启动界面的设计，要求采用合理布局，使界面效果与图1所示结果保持一致。（ “男”单选按钮默认选中，学院下拉列表框的内容为：信息技术学院、外国语学院、机电学院、商学院、艺术设计学院、珠宝学院、新闻传播学院）；左列标签名字体大小为24sp； 点击“使用显示启动”按钮和“使用隐式启动”按钮，均能跳转至界面2，如图2所示，前者使用显示启动方式，后者使用隐式启动方式，两种启动方式均将界面1中的数据传递至界面2中。 2、 点击界面1中的按钮后，跳转至界面2，将界面1中输入的内容传递至界面2的ListView中显示，效果如图2所示。（要求：列表文字大小为28sp，图片使用Vector格式，从上到下依次使用credit_card_black，account_box_black，wc_black，account_balance_black，school_black，assignment_ind_black）
移动应用开发( Java web )课程设计
09-25
本系统主要实现了高校教师对学生信息的录入、删除、查询及修改。整个系统分为学生个人信息管理以及学生成绩管理两大模块。其中，学生个人信息管理模块包括学生姓名的录入和修改、学生学号的录入和修改、学生信息的删除。学生成绩管理模块包括学生各科成绩的录入和修改、学生总成绩的计算、学生各科成绩的排名统计、学生总成绩的排名统计。
物联网移动应用开发课程设计报告.pdf
09-12
物联网移动应用开发课程设计报告 ——音乐播放器 android studio 开发 .doc版找我要
移动应用开发 实验报告4 SharedPreferences存放
永烨的博客
05-08 1472
通过线性布局和相对布局来搭建一个用户登录界面，界面可自主设计，但至少需要包括以下控件：1个ImageView控件、2个TextView控件; 2个EditText控件、 1个Button控件。 创建工具类SPSaveLogin，在该类中实现保存与获取登录账号和密码的功能，使用SharedPreferences存储的方式保存与读取登录账号与密码的数据。 运行程序，输入账号和密码信息，点击“登录”按钮，实现登录功能。
《移动软件开发》实验报告
m0_53057170的博客
08-17 1856
实现你的第一个微信小程序
2024移动软件开发——实验二
m0_73964786的博客
08-20 766
实现一个可以查看不同城市天气的微信小程序
XX年夏季网络营销策略与优化指南
"XX年夏季网络营销计划书" 网络营销是企业在线业务成功的关键组成部分，这份文档提供了一个全面的框架，帮助制定有效的网络营销策略。以下是对该计划书各部分的详细解释： 一、网站分析 1. 流量来路统计：通过安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值