ouc_移动软件开发_实验二

一、实验目标

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

二、实验步骤

1.准备工作：

（1）登录和风天气官网并完成注册，并在应用管理中创建一个新的应用，获取属于自己的开发版（非商业版）和风天气的Key，将其保存至记事本中。

（2）在和风天气开发文档中选中实时天气url并进行获取

（3）获取实时天气API后我们会发现更新后的和风天气已经不能像S6版本一样直接输入城市名来获取当地天气了，所以我们还得准备获取地区id的途径

（4）我们可以通过获取城市信息从而取得城市的id，点击城市信息查询并且获取对应url

（5）.准备和风天气提供的不同天气情况对应的图标，并且将所获取的对应url列入到微信公众平台中小程序的request合法域名中

2.完成准备工作，开始编写代码，完成基础的文件创建后，首先进行小程序UI的设计，相关代码及注释如下

index.wxml源码

<!-- 将所有组件放进view里面 -->
<view class="container">
<!-- 区域1：地区选择器 -->
    <picker mode='region' bindchange='changeRegion'>
        <view>{{region}}</view>
    </picker>
<!-- 区域2：文本区域 -->
    <text>{{now.temp}}℃  {{now.text}}</text>
<!-- 区域3：图片区域 -->
    <image src="/images/weather_icon_s2/{{now.icon}}.png"></image>
<!-- 区域4：多行天气信息 -->
    <view class="detial">
      <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}}公里</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;
    /* 保证页面没有空行 */
}
/* 对使用detail这个类的部分代码进行属性设置*/
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
​
.bar{
  display: flex;
  flex-direction: row;
  /* 设置外边距 */
  margin:20rpx 0;
}
​
.box{
  width: 20vh;
  /* 使用33.3%无法生效，只能自己设置宽度 */
  text-align: center;
  /* 还是text-align无法生效？ */
}
​
text{
  font-size: 80rpx;
  color: #3C5F81;
}
​
image{
  /* 给图像设置合适宽度 */
  /* 原像素64*64，使其成比例增长 */
  width:512rpx;
  height: 512rpx;
}

app.json源码

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

3.在进行UI设计之后，通过index.js对其进行内容的实现，下列是index.js的源码

index.js源码

// pages/index/index.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    region:['山东省','青岛市','崂山区'],/*设置初始显示的地区*/
    now:''/*用于储存通过和风天气获取的相关天气信息*/
  },
/*对changeRegion进行功能实现*/
changeRegion:function(e){
  this.setData({
    region:e.detail.value/*将region的值设置为所选择的地区*/
  })
  this.getWeather();//获取地区天气  
},
​
/*对getWeather进行功能实现*/
getWeather:function(){
  var that=this;//this不可以直接在wxAPI函数内部使用
  /*let与var的区别:https://www.jianshu.com/p/9f7f053f7204*/ 
  wx.request({
    url: 'https://geoapi.qweather.com/v2/city/lookup?',
    data:{
      location:that.data.region[2],
      key:'9c011a9ad3074d188c24aa57d28c5505'
    },//首先通过在准备阶段准备的城市信息查询url获得城市对应的id，可能会出现重名等各种情况，从而导致报错，所以我们选择精确到市
    success:function(res){
      console.log(res.data)
      wx.request({//通过查询到的ID进行中的第一个位置进行大致天气搜索
        url: 'https://devapi.qweather.com/v7/weather/now?',
        data:{
          location:res.data.location[0].id,//将我们获取到的城市的id的第一个区（0）作为该城市的天气查询id
          key:'9c011a9ad3074d188c24aa57d28c5505'
        },
        success:function(e){
          // console.log(e.data.now)
          that.setData({now:e.data.now})//通过城市id与key查询到城市的相关天气情况并且存储在now中
        }
      })
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getWeather()//检测页面开始运行时就调用getWeather函数，其参数为我们所给的初始值（region）
  },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
​
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
​
  },
​
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
​
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
​
  },
​
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
​
  }
})

4.上传1.0.0版本并且设置为用户体验版，以便于后续更新与维护

三、程序运行结果

程序运行结果截图：

运行结果：程序成功运行！

1.加载界面

2.初始界面

3.更换地区界面

 

 

4.更换地区后的界面