移动软件开发实验2记录

最新推荐文章于 2024-09-13 23:32:49 发布

qdylfine

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量35

点赞数

文章标签：前端微信小程序

本文链接：https://blog.csdn.net/qdylfine/article/details/132456807

版权

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.首先做好准备工作，注册和风天气的账号，选择webAPI，在控制台项目管理中找到密钥key，记下来。

2.还要在小程序开发平台配置服务域名，根据和风文档的解释，配置request域名

3.然后就可以写代码了，微信开发者工具，创建一个小程序，开始写代码。

在这之前要创建images文件夹，然后将表示天气的图标导入。

关键代码：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_bw/{{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，页面布局。

/**index.wxss**/

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
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;
}

index.js 里面最重要的两个方法就是getWeather()和getlocation()

 data: {
    region:['山东省','青岛市','黄岛区'],//给所有的变量一个初始数据
    locationID:101120202,
    now:{
      temp:1,
      text:'未知',
      icon:'999',
      humidity:2,
      pressure:3,
      vis:4,
      windDir:5,
      windSpeed:6,
      windScale:7
    }
  },

  regionChange:function(e){
    this.setData({
      region:e.detail.value
    });
    this.getlocation().then(result =>{//为了解决异步问题
      this.getWeather();
    });
  },
getWeather:function(e){
  var that=this;
  wx.request({
    url:'https://devapi.qweather.com/v7/weather/now?',//请求服务器域名
    data:{
    location:that.data.locationID,//因为在请求地址的时候，如果直接用region[1],它得到的可能会是汉字，而不是编码或者经纬度，所以需要创建一个变量来转换一下
    key:'ec16b77770cd4ab1869952e5cc766d00'//自己的key
    },
    success:function(res){
      console.log(res.data);
      that.setData({
      now:res.data.now//将请求得到的数据给now
    });
    }
  })
},
getlocation:function(){//请求根据汉字来请求地址编号
  var that=this;
  return new Promise(resolve =>{
  wx.request({
    url:'https://geoapi.qweather.com/v2/city/lookup?',
    data:{
    location:that.data.region[2],
    adm:that.data.region[1],
    key:'ec16b77770cd4ab1869952e5cc766d00'
    },
    success:function(res) {
      console.log(res.data);
      that.data.locationID=res.data.location[0].id//请求得到地址编号给到locationID
      return resolve();
      },
    })
  });
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getlocation().then(result =>{
      this.getWeather();//为解决异步问题，要先请求地址得到地点编号，然后根据地址得到天气
    });
  },

4.最后得到的页面