小程序开发之——简简天气

首页 > 代码库 > 小程序开发之——简简天气

小程序开发之——简简天气

2024-10-23 17:38:02 209人阅读

小程序已经出来有段时间了，之前也有了解过。早起也有了解过，但是很不看好。

最近因工作需要，开始学了小程序。

随着小程序SDK开放的API越来越多，功能也越来越强大，也许一不留神，他又火了。

拿来练手的是一个天气预报（好像每次练手都是天气预报，尴尬了……）

先看运行效果：（目前已经上线了，具体效果可以扫右边二维码）

技术分享　　　　　　　　　　　　　　

　　首先需要的就是天气接口，这种接口有很多，而且大部分都是免费的。无意中找到一个百度的接口：

http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather ，然后就可以开发了。

具体不多说了，直接上代码：

主页面：

index.wxml

<!--index.wxml-->
<view style="background-color:#36c;color:#fff;min-height:{{device.height}}px">
  <view class="box-city">{{weather.today.city}}</view>
  <view class="box-date">{{weather.today.date}}</view>
  <view class="flex-weather">
    <view class="flex-item-3">
      <image wx:if="{{weather.today.icon}}" src="../../images/icon/{{weather.today.icon}}" style="height:{{device.width/4}}px;width:{{device.width/4}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:2.5em;font-weight: bold;">{{weather.today.c_temperature}}</view>
      <view class="pm25" style="background-color:{{weather.today.pm_color}}">{{weather.today.pm25}}</view>
    </view>
    <view class="flex-item-3">
      <view class="weather-text" style="font-size:1.5em;font-weight:bold">{{weather.today.weather}}</view>
      <view class="weather-text">{{weather.today.wind}}</view>
      <view class="weather-text">{{weather.today.temperature}}</view>
    </view>
  </view>
  <view wx:for="{{weather.list}}" class="flex-weather">
    <view style="font-size:0.9em;font-weight:bold" class="flex-item-3">{{item.date}}</view>
    <view class="flex-item-3">
      <image src="../../images/icon/{{item.icon_day}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
      <image src="../../images/icon/{{item.icon_night}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:1.1em;font-weight:bold">{{item.weather}}</view>
      <view style="font-size:0.8em">{{item.temperature}}</view>
      <view style="font-size:0.8em">{{item.wind}}</view>
    </view>
  </view>
  <view class="flex-weather" wx:for="{{weather.index}}">
    <view style="width:28%; padding: 0.3em;">
      <view style="font-size:0.8em;">{{item.title}}</view>
      <view style="font-size:1.5em;font-weight:bold;">{{item.zs}}</view>
    </view>
    <view style="width:72%; padding: 0.3em;font-size:0.9em;text-align:left;">{{item.des}}</view>
  </view>
</view>

样式表文件 index.wxss

/**index.wxss**/

.box-city {
  font-size: 2.5em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.box-date {
  font-size: 0.8em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.flex-weather {
  flex-direction: row;
  display: -webkit-flex;
  align-items: center;
  text-align: center;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}

.flex-item-3 {
  width: 33.33%;
  padding: 0.1em;
}

.pm25 {
  font-size: 1.5em;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: 0.1em;
}

.weather-text {
  font-size: 0.9em;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

逻辑层 index.js

var Bmap = require("../../bmap-wx.js");
var util = require("../../util.js");
var app = getApp();
Page({
  data: {
    weather: {},
    device: app.globalData.deviceInfo
  },
  onl oad: function () {
    var that = this;
    var bmap = new Bmap.BMapWX({ ak: "需要填写你的ak，免费申请"});
    bmap.weather({
      success:function(data){
        that.setData({ weather: util.formatWeather(data)});
      },
      fail: function(data){
        wx.showToast({
          title: ‘获取天气信息失败！‘
        });
      }
    });
  }
})

用来处理json的工具类 util.js

function formatWeather(res) {
  var weathers = {
    today: {},
    list: []
  };
  console.log(res);
  weathers.today.city = res.currentWeather[0]["currentCity"];
  weathers.today.pm25 = res.currentWeather[0]["pm25"];
  weathers.today.temperature = res.currentWeather[0]["temperature"];
  weathers.today.weather = res.currentWeather[0]["weatherDesc"];
  weathers.today.wind = res.currentWeather[0]["wind"];
  var today_date = res.currentWeather[0]["date"].split(/[ ：()]/);

  weathers.today.c_temperature = today_date[4];
  weathers.today.date = today_date[1] + " " + today_date[0];
  var weatherArray = res.originalData.results[0].weather_data;
  for (var i = 0; i < weatherArray.length; i++) {
    var weather = {};
    var date = new Date((Date.parse(res.originalData.date) / 1000 + (86400 * i)) * 1000);
    var month = date.getMonth() + 1;
    month = month > 9 ? month + "月" : "0" + month + "月";
    weather.date = month + date.getDate() + "日" + " " + weatherArray[i]["date"].split(" ")[0];
    weather.temperature = weatherArray[i]["temperature"];
    weather.weather = weatherArray[i]["weather"];
    weather.wind = weatherArray[i]["wind"];
    var day_pic = weatherArray[i]["dayPictureUrl"];
    weather.icon_day = day_pic.substring(day_pic.lastIndexOf("/") + 1, day_pic.length);
    var night_pic = weatherArray[i]["nightPictureUrl"];
    weather.icon_night = night_pic.substring(night_pic.lastIndexOf("/") + 1, night_pic.length);
    weathers.list.push(weather);
  }
  if (new Date().getHours() > 18) {
    weathers.today.icon = weathers.list[0].icon_night;
  } else {
    weathers.today.icon = weathers.list[0].icon_day;
  }
  if (weathers.today.pm25 > 300){
    weathers.today.pm_color = "#6d001d";
  }else if (weathers.today.pm25 > 200) {
    weathers.today.pm_color = "#884898";
  } else if (weathers.today.pm25 > 150) {
    weathers.today.pm_color = "#f00";
  } else if (weathers.today.pm25 > 100) {
    weathers.today.pm_color = "#fc0";
  }else{
    weathers.today.pm_color = "#0f0";
  }

 weathers.index = [];
 var indexArray = res.originalData.results[0].index;
 for(var i = 0; i < indexArray.length; i++){
  var index = {
    title: indexArray[i].title,
    des: indexArray[i].des,
    zs: indexArray[i].zs
  };
  weathers.index.push(index);
 }
  console.log(weathers);
  return weathers;
}

module.exports = {
  formatWeather: formatWeather
}

最后，需要下载一下

bmap-wx.js
地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download

至此，全部完成工作！

小程序开发之——简简天气

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 小程序开发之——简简天气

小程序开发之——简简天气

看完仍有疑问？有类似问题直接问程序猿