zoukankan      html  css  js  c++  java
  • 【微信小程序入门】微信小程序+和风天气完成天气预报

    《冷暖预知》天气小程序

    学无止境,以玩儿玩儿的心态去学习!
    前一天晚上写的,写的不太好,第二天马上修改了,如有差错,请多指教。

    花半天时间完成简单的小程序应用。适合小程序初学者。

    步骤:

    1. 申请小程序帐号: 小程序注册入口, 具体操作按照官网步骤执行,相信你会看的很明白的(-
    2. 安装微信开发者工具,打开工具填写信息:①项目目录为自己要开发小程序的位置②AppId在微信管理后台的设置-开发设置中③项目名称自己起,填写完成点击完成;
    3. 看到默认的初始小程序Hello Horld是不是很兴奋,以上步骤不是我们今天研究的重点,下面进行我们的关键:
    4. 在index.wxml中写我们的结构,index.wxss中写css样式,在index.js中写我们的逻辑内容。前提是要有css3和javascript的基础哦!!!
    5. 在index.js中定义两个方法:getLocation()获取用户的地理位置,getWeather()获取天气的方法;
    6. 和风天气提供免费天气接口(无偿打广告,哈哈~~),免费版只能获取3天的天气情况,开发文档

    废话不多说,直接上代码~~~

    代码

    1.页面结构 index.wxml部分

    <!--index.wxml-->
    <view class="container">
      <view class="weather yesterday">
        <view>
          <view class='date'>今天</view>
          <view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
          <view class='tmp'>{{today.tmp_min}}℃~{{today.tmp_max}}℃</view>
          <view class='cond_txt'>{{today.cond_txt_d}}</view>
        </view>
        <view>
          <view class='weather_icon'>
            <image src='{{todyIcon}}'></image>
          </view>
          <view class='lastUpdateDate'>最后更新:{{update}}</view>
        </view>
      </view>
      <view class="weather today">
        <view>
          <text>明天</text>
           <view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
          <view class='tmp'>{{tomorrow.tmp_min}}℃~{{tomorrow.tmp_max}}℃</view>
          <view class='cond_txt'>{{tomorrow.cond_txt_d}}</view>
        </view>
        <view>
          <view class='weather_icon'>
            <image src='{{tomorrowIcon}}'></image>
          </view>
          <view class='lastUpdateDate'>最后更新:{{update}}</view>
          </view>
      </view>
      <view class="weather tomorrow">
        <view>
          <text>后天</text>
           <view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
          <view class='tmp'>{{afterTomor.tmp_min}}℃~{{afterTomor.tmp_max}}℃</view>
          <view class='cond_txt'>{{afterTomor.cond_txt_d}}</view>
        </view>
        <view>
        <view class='weather_icon'>
            <image src='{{afterTomorIcon}}'></image>
          </view>
          <view class='lastUpdateDate'>最后更新:{{update}}</view>
        </view>
      </view>
    </view>
    

    2.页面样式index.wxss部分

    /**index.wxss**/
    .container {
      height: 100%;
       100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      box-sizing: border-box;
    } 
    .weather{
      height: 110px;
       100%;
      margin-bottom: 10px;
      border-radius: 5px;
      color: #FFF;
      padding: 5PX 15px;
      display: flex;
      font-size: 14px;
      box-sizing: border-box;
    }
    .weather>view{
      flex: 1;
    }
    .weather>view>view{
      margin: 5px 0;
    }
    .yesterday{
      background-color: #30BCAF;
    }
    .today{
      background-color: #78A4be;
    }
    .tomorrow{
      background-color: #FCB654;
    }
    .location,.cond_txt{
      font-size: 14px;
    }
    .date,.tmp{
      font-weight: bold;
    }
    .weather_icon{
      text-align: center;
      height: 65px;
    }
    .weather_icon image{
       75px;
      height: 100%;
    }
    .lastUpdateDate{
      font-size: 10px;
      text-align: center;
    }
    

    3.页面行为index.js部分

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        update: '',
        basic:{},
        today:{},
        tomorrow:{},
        afterTomor:{},
        todyIcon:'../../imgs/weather/999.png',
        tomorrowIcon:'../../imgs/weather/999.png',
        afterTomorIcon:'../../imgs/weather/999.png'
      },
      onShow: function () {
        this.getLocation();
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      getLocation:function(){
        var that = this;
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            that.getWeatherInfo(latitude, longitude);
          }
        })
      },
      getWeatherInfo: function (latitude, longitude){
        var _this = this;
        var key = '';//你自己的key
        //需要在微信公众号的设置-开发设置中配置服务器域名
        var url = 'https://free-api.heweather.com/s6/weather?key='+key+'&location=' + longitude + ',' + latitude;
        wx.request({
          url: url, 
          data: {},
          method: 'GET',
          success: function (res) {
            var daily_forecast_today = res.data.HeWeather6[0].daily_forecast[0];//今天预报
            var daily_forecast_tomorrow = res.data.HeWeather6[0].daily_forecast[1];//明天天预报
            var daily_forecast_afterTomor = res.data.HeWeather6[0].daily_forecast[2];//后天预报
            var basic = res.data.HeWeather6[0].basic;
            var update = res.data.HeWeather6[0].update.loc;//更新时间
            _this.setData({
              update:update,
              basic:basic,
              today: daily_forecast_today,
              tomorrow:daily_forecast_tomorrow,
              afterTomor: daily_forecast_afterTomor,
              todyIcon: '../../imgs/weather/' + daily_forecast_today.cond_code_d+'.png', //在和风天气中下载天气的icon图标,根据cond_code_d显示相应的图标
              tomorrowIcon: '../../imgs/weather/' + daily_forecast_tomorrow.cond_code_d+'.png',
              afterTomorIcon: '../../imgs/weather/' + daily_forecast_afterTomor.cond_code_d+'.png'
            });
          }
        })
      }
    })
    
    

    效果

    大功搞成,这样就有了自己的天气预报了,天气变冷,大家注意身体哦,身体是革命的本钱!!!

    扫码查看小程序

    美食垂类小程序

  • 相关阅读:
    Python格式化输出%s和%d
    操作数据库
    协议类介绍
    并发和并行和压测 、对带宽的理解解释
    悠悠大神的 并发当前目录下所有文件的方法(还没试过)
    post参数的方法 json data 和特别的传参
    接口测试简介
    appium的三种等待方式 (还没实践过,记录在此)
    人生进步目标
    保持一个会话 添加 HTTP Cookie管理器
  • 原文地址:https://www.cnblogs.com/huiwenhua/p/8380276.html
Copyright © 2011-2022 走看看