漂亮的微信小程序一周和实时天气代码分享

如何做一个漂亮的天气预报微信小程序

效果图如下, 附有全部代码和压缩包文件下载

index.js文件内容

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    weather: { 'wea_img': 'qing'},//实况天气
    weatherweek:[],//七日天气
  },
  onLoad: function () {
    this.getapi();
  },
  getapi:function(){
    var _this = this;
    // 获取IP地址
    wx.request({
      url: 'https://www.tianqiapi.com/ip',
      data: {
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res);
        // 根据IP获取天气数据
        _this.weatherweekday(res.data.ip);
      }
    });
  },
  // 天气api天气获取
  weatherweekday: function (ip) {
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/?version=v9&appid=41296746&appsecret=tTlAV6vs',
      data: {
        'ip': ip
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        _this.setData({
          weatherweek: res.data
        });
        console.log(_this.data.weatherweek)
      }
    });
  }
})

index.wxml内容

<view class='container'>
  <view style="border-radius:10px; background:#fff;display:block; width:100%;">
    <view style="padding:10px;">
      <image mode="widthFix" src="/img/icon1.png" style="width:50rpx;height:50rpx;vertical-align: middle;" /> {{weatherweek.city}}</view>
    <view style="padding:20px 0;">
      <view style="font-size:48px;">{{weatherweek.data[0].tem}}℃</view>
      <view style="font-size:18px;">{{weatherweek.data[0].wea}}</view>
    </view>
  </view>
<!--2-->
  <view style="margin-top:10px; padding:10px 0; border-radius:10px; background:#fff;display:block; width:100%;">
    <block wx:for="{{weatherweek.data}}">
      <view class="weui-flex" style="padding-bottom:10px;">
        <view class="weui-flex__item">{{item.week}}</view>
        <view class="weui-flex__item">{{item.wea}}</view>
        <view class="weui-flex__item">{{item.tem2}} - {{item.tem1}}℃</view>
      </view>
    </block>
  </view>
<!--./2-->
<!--3-->
  <view style="margin-top:10px; border-radius:10px; background:#fff;display:block; width:100%;">
      <view style="font-size:16px; padding:10px 0;font-weight:bold;">生活指数</view>
      <view class="weui-grids">
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon8.png" />
                    <view class="weui-grid__label">紫外线指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[0].level}}</view>
                </view>
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon2.png" />
                    <view class="weui-grid__label">减肥指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[1].level}}</view>
                </view>
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon6.png" />
                    <view class="weui-grid__label">血糖指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[2].level}}</view>
                </view>
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon7.png" />
                    <view class="weui-grid__label">穿衣指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[3].level}}</view>
                </view>
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon4.png" />
                    <view class="weui-grid__label">洗车指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[4].level}}</view>
                </view>
                <view class="weui-grid">
                    <image class="weui-grid__icon" src="/img/icon3.png" />
                    <view class="weui-grid__label">空气指数</view>
                    <view class="weui-grid__label">{{weatherweek.data[0].index[5].level}}</view>
                </view>
        </view>
  </view>
<!--./3-->
    <!--5-->
  <view style="margin-top:10px; padding:10px 0; border-radius:10px; background:#fff;display:block; width:100%; text-align:left;">
    <view style="padding:10px;">生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。</view>
  </view>
<!--./5-->
</view>

源文件文件下载
http://cddn.huyahaha.com/tianqi.zip

请注册账号, 使用自己的appid, 问题交流QQ 445899710