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

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

姓名：陈亚妮 学号：21020007008

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1.创建项目

2.删除和修改文件

3.创建其他文件

4.根据个人喜好设置导航栏样式

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#B0E0E6",
    "navigationBarTitleText": "天气小程序",
    "navigationBarTextStyle":"black"
  },

5.页面设计(主要代码)

<view class='container'>
<picker mode='region'bindchange='regionChange'>
<view>{{region}}</view>
<text>{{tmp}}℃{{cond_txt}}</text>
</picker>
<image src='/pages/images/weather_icon/{{cond_code}}.png'
mode='widthFix'></image>
<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'>{{hum}}%</view>
<view class='box'>{{pres}} hPa</view>
<view class='box'>{{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'>{{wind_dir}}</view>
<view class='box'>{{wind_spd}}km/h</view>
<view class='box'>{{wind_sc}} 级</view>
</view>
</view>
</view>

6.逻辑实现

Page({

  data: {
    region:['山东省','青岛市','黄岛区'],
      tmp:0,
      cond_txt:'未知',
      cond_code:'999',
      hum:0,
      pres:0,
      vis:0,
      wind_dir:0,
      wind_spd:0,
      wind_sc:0,
      localID:101120202,
    id:0,
  },
  
  regionChange:function(e){
    this.setData({region:e.data.value});
    this.getLocationID(e.detail.value[1],e.detail.value[2]);
    this.getWeather(this.localID);
  },

  getWeather:function(id){
    var that=this
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:id,
        key:'c9b13dc828124b9b965340c50427757f'
      },
      // id:{
      //   'content-type':'application/json'
      // },
      success:function(res){
         var resdata=res.data.now
          console.log(resdata);
          that.setData({
            tmp:resdata.temp,
            cond_txt:resdata.text,
            cond_code:resdata.icon,
            hum:resdata.humidity,
            pres:resdata.pressure,
            vis:resdata.vis,
            wind_dir:resdata.windDir,
            wind_spd:resdata.windSpeed,
            wind_sc:resdata.windScale
          })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.getLocationID('青岛','崂山区')
    this.getWeather(101120202)
  },

  regionChange:function(e){
     this.setData({region:e.detail.value});
    this.getLocationID(e.detail.value[1],e.detail.value[2])
    this.getWeather(this.localID);
  },

  getLocationID(city,area){
    var that=this;
    wx.request({
      url:'https://geoapi.qweather.com/v2/city/lookup?',
      method:"GET",
      data:{
        location:area,
        adm:city,
        key:'c9b13dc828124b9b965340c50427757f'
      },
      success:function(res){
        that.getWeather(res.data.location[0].id)
        that.setData({localID:res.data.location[0].id})
      }
    })
  }
})

7.测试功能

三、问题总结与体会

通过这次实验我对小程序的编写理解更加深入，在做实验过程中，遇到了很多问题，自行修改和整理了很多代码。最初还能保持逻辑正确，但是改了很多之后发现逻辑混乱了，与同学交流之后才发现只是一个变量名的错误，因此浪费了很多时间，可见在写代码的过程中还是要保证逻辑清晰。