移动软件开发 实验2

移动软件开发 实验2

一、 实验目标

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

二、实验步骤

1.API密钥申请

登录和风天气官方网址https://www.qweather.com/，注册新用户后进入和风天气控制台，选择应用管理并创建应用，选择免费开发版，创建后可查看个人认证key。

查看开发文档，获取实时天气的开发版请求URL；

2.服务器域名配置

小程序开发者登录mp.weixin.qq.com进入管理员后台，单击“设置”按钮.切换至“开发设置”面板，在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址,将实时天气的开发版请求URL添加到“request合法域名”中。

3.项目创建

·创建页面文件

·删除和修改文件

·创建其他文件

4.视图设计

（1）更改页面导航栏

（2）页面设计

定义页面背景容器，页面上主要包含4个区域.具体内容解释如下。

·页面整体:组件.并定义class=’container’;
·区域1:组件，地区选择器.用户可以自行选择查询的省、市、区;
·区域2: 组件，显示当前城市的温度和天气状态的文字说明;
·区域3: 组件，显示当前城市的天气图标:
·区域4:组件，并定义class=‘detail’，分多行显示其他天气信息，例如湿度、气压、能见度和风向等。

·区域4内单元行: 4个组件，并定义class=‘bar’:
·区域4内单元格:每行3个组件.并定义class=‘box’。

5.逻辑实现

（1）更新省、市、区信息

（2）获取实况天气数据

（3）更新页面天气信息

6.代码展示

index.wxml

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

/**index.wxss**/
.container{
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image{
  width:220rpx;
}
text{
   font-size:80rpx;
   color:#3C5F81; 
}
.detail{
    width:100%;
    display:flex;
    flex-direction:column;
}
.bar{
    display:flex;
    flex-direction:row;
    margin:20rpx 0;
}
.box{
    width:33.3%;
    text-align:center;
}

三、程序运行结果