天气项目

效果图

index.wxss

.centerd{
    text-align: center;
}
.textStyle{
    font-weight: 100%;
    text-align: center;
     font-size: 30px;
}
.textStyle2{
    font-weight: 100%;
    text-align: center;
}
.imgStyle2{
    font-weight: 100px;
    height: 50rpx;
    text-align: center;
}

index.wxml

<view>
<!-- 具体属性看这：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html -->
    <swiper indicator-dots='true' autoplay='true' interval='3000' circular='true'>
        <swiper-item>
            <image src="../../static/rv_img1.jpg"></image>
        </swiper-item>

        <swiper-item>
            <image src="../../static/rv_img2.jpg"></image>
        </swiper-item>

        <swiper-item>
            <image src="../../static/rv_img3.jpg"></image>
        </swiper-item>
    </swiper>

    <!--具体属性看这：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html-->
    <picker mode="region" bindchange="bindPickerChange" class="centerd" id="pickerview" value="{{region}}">
        <view>{{region}}</view>
    </picker>

    <view class="textStyle">
        <text>{{temperature}}</text>
    </view>

    <view class="textStyle2">
        <text>风向：</text>
        <text>{{wind}}</text>
    </view>

    <view class="textStyle2">
        <text>相对湿度：</text>
        <text>{{humidity}}%</text>
    </view>

    <view class="textStyle2">
        <text> 早晚天气变化：</text>
        <text>{{weather}}</text>
    </view>
    <image src="{{img}}" class="imgStyle"></image>
</view>

index.js

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    region: ['北京市', '北京市', '东城区'],
    city: '东城区',
    temperature: '',
    wind: '',
    humidity: '',
    weather: '',
    img: ''
  },

  pickerview:null,

  //页面首次渲染完毕时执行
  onReady() {
    //wx.getStorageSync：查看是否有本地缓存，如果有获取本地缓存数据
    if (wx.getStorageSync('region') != null) {
      this.pickerview = wx.create
      this.setData({
        region: wx.getStorageSync('region'),
        city: wx.getStorageSync('region')[2]
      })
    }
    //调用函数的时候前面需要加this,也就是作用域
    this.requestData()
  },

  bindPickerChange(e) {
    this.setData({
      region: e.detail.value,
      city: e.detail.value[2]
    })
    //wx.setStorageSync：用key-value的方式存放数据到本地缓存中
    wx.setStorageSync('region', this.data.region)
    this.requestData()
  },

  //网络请求
  requestData:function () {
    var that = this
    //网路请求
    wx.request({
      url: 'http://api.tianapi.com/tianqi/index',
      //网络请求类型
      method:"GET", ,
      //传递的参数
      data: {
        key: '........',
        city: this.data.city
      },
      //请求成功回调
      success: function (res) {
        that.setData({
          temperature: res.data.newslist[0].highest,
          wind: res.data.newslist[0].wind,
          humidity: res.data.newslist[0].humidity,
          weather: res.data.newslist[0].weather,
          img: that.getImg(res.data.newslist[0].weather)
        })
      }
    })
  },

  //获取对应图片
  getImg:function(string) {
    switch (string) {
      case '晴转多云':
        return '../../static/100.png'

      case '阴天':
        return '../../static/101.png'

      case '多云':
       return '../../static/103.png'

      case '小雨':
        return '../../static/310.png'
      default:
        return '../../static/999.png'
    }
  },
})