小程序

app.js

@@ -0,0 +1,10 @@
+//app.js
+
+App({
+  onLaunch: function () {
+
+  }, 
+  globalData:{
+    userInfo:null
+  }
+})

app.json

@@ -0,0 +1,11 @@
+{
+  "pages":[
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle":"black"
+  }
+}

app.wxss

@@ -0,0 +1,108 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-image: url(images/bg.jpg);
+  background-size: 100%;
+  padding: 20rpx;
+} 
+
+.top {
+
+  flex-direction: row;
+}
+
+.top view {
+
+  color: #fff;
+  text-align: right;
+  font-size: 30rpx;
+  margin-bottom: 10rpx;
+}
+
+.topRegion {
+  padding-top: 50rpx;
+  height:100rpx;
+  vertical-align: bottom;
+}
+
+.topRegion #temperature {
+  color:#fff;
+  float: left;
+  font-size: 120rpx;
+
+}
+
+.topRegion #summary {
+
+  color:#FFF;
+  margin-left: 30rpx;
+  margin-top: 55rpx;
+  font-size: 50rpx;
+  float: left;    
+
+}
+
+.topRegion text {
+  display: block;
+  float: left;
+  width: 250rpx;
+  text-align: center;  
+}
+
+.summary {
+
+  margin-top: 50rpx;
+  background-color:rgba(0, 0, 0, 0.5);
+  padding: 18rpx;
+  color: #eee;
+  font-size: 30rpx;
+  line-height: 50rpx;
+
+}
+
+.daily {
+
+  margin-top: 30rpx;
+  padding: 12rpx;
+  background-color:rgba(0, 0, 0, 0.5);
+
+}
+
+.daily_item {
+
+  float:left;
+  width:100%;
+  color: #FFF;  
+  height:80rpx;
+  padding-left: 20rpx;
+  line-height: 80rpx;
+  font-size: 30rpx;
+
+}
+
+.daily_weekday {
+
+  display: block;
+  float: left;     
+  width: 90rpx;
+}
+
+.daily_temperature {
+
+  float: left;
+  display: block;  
+  width: 150rpx;
+  margin-right: 80rpx;
+  text-align: right;
+
+}
+
+.daily_summary {
+
+  float: left;
+  display: block;  
+
+}

pages/index/index.js

@@ -0,0 +1,27 @@
+//index.js
+//获取应用实例
+
+var util = require('../../util.js')
+
+Page({
+
+  data: {
+    weather: {}
+  },
+  onLoad: function () {
+
+    var that = this;
+
+    util.loadWeatherData(function(data){
+
+      console.log(data);
+      that.setData({
+        weather: data
+      });
+      // that.data.weather = data;
+
+    });    
+
+  }
+
+})

pages/index/index.wxml

@@ -0,0 +1,23 @@
+<!--index.wxml-->
+<view class="container">  
+  <view class="top">
+    <view>{{weather.city}}</view>
+    <view>{{weather.current.formattedDate}}</view>
+    <view>{{weather.current.formattedTime}} 更新</view>
+  </view>
+  <view class="topRegion">
+    <view id="temperature" >{{weather.current.temperature}}℃</view>
+    <view id="summary" >{{weather.current.summary}}</view>
+  </view>
+  <view class="summary" >
+    <view>一周天气预报</view>
+    <view style="margin-top:20rpx">{{weather.daily.summary}}</view>
+  </view>
+  <view class="daily" >
+    <view class="daily_item" wx:for="{{weather.daily.data}}">
+      <view class="daily_weekday" >{{item.weekday}}</view>
+      <view class="daily_temperature" >{{item.temperatureMin}}-{{item.temperatureMax}}℃ </view>      
+      <view class="daily_summary" >{{item.summary}}</view>
+    </view>
+  </view>
+</view>

pages/index/index.wxss

@@ -0,0 +1,21 @@
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.userinfo-avatar {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.userinfo-nickname {
+  color: #aaa;
+}
+
+.usermotto {
+  margin-top: 200px;
+}

util.js

@@ -0,0 +1,158 @@
+
+//获取当前位置坐标
+function getLocation(callback) {
+
+    wx.getLocation({
+
+        success: function(res) {
+
+        	callback(true, res.latitude, res.longitude);
+
+        },
+        fail: function() {
+
+        	callback(false);
+
+        }
+
+    })
+
+}
+
+//Reverse Geocoding 根据经纬度获取城市名称
+function getCityName(latitude, longitude, callback) {
+
+    var apiURL = "http://api.map.baidu.com/geocoder?output=json&location="+ latitude + "," + longitude + "&key=37492c0ee6f924cb5e934fa08c6b1676";
+
+    wx.request({
+        url: apiURL,
+        success: function(res) {
+
+            callback(res.data["result"]["addressComponent"]["city"]);
+
+        }
+    });
+
+}
+
+//获取指定位置的天气信息
+function getWeatherByLocation(latitude, longitude, callback) {
+
+    var apiKey = "你自己的Key";
+    var apiURL = "https://api.darksky.net/forecast/" + apiKey + "/" + latitude + "," + longitude + "?lang=zh&units=ca";
+
+    wx.request({
+        url: apiURL,
+        success: function(res){
+
+            var weatherData = parseWeatherData(res.data);
+            getCityName(latitude, longitude, function(city){
+                weatherData.city = city;
+                callback(weatherData);
+            });            
+
+        }
+    });
+
+}
+
+//解析天气数据
+function parseWeatherData(data) {
+
+    var weather = {};
+    weather["current"] = data.currently;
+    weather["daily"] = data.daily;
+
+    return weather;
+
+}
+
+//将时间戳格式化为日期
+function formatDate(timestamp) {
+
+    var date = new Date(timestamp * 1000);
+    return date.getMonth()+1 + "月" + date.getDate() + "日 " + formatWeekday(timestamp);
+
+}
+
+//将时间戳格式化为时间
+function formatTime(timestamp) {
+
+    var date = new Date(timestamp * 1000);
+    return date.getHours() + ":" + date.getMinutes();
+
+}
+
+//中文形式的每周日期
+function formatWeekday(timestamp) {
+
+    var date = new Date(timestamp * 1000);
+    var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+    var index = date.getDay();
+
+    return weekday[index];
+
+
+}
+
+//加载天气数据
+function requestWeatherData(cb) {
+
+    getLocation(function(success, latitude, longitude){
+
+      //如果 GPS 信息获取不成功， 设置一个默认坐标
+      if(success == false) {
+
+          latitude = 39.90403;
+          longitude = 116.407526;
+
+      }      
+
+      //请求天气数据 API
+      getWeatherByLocation(latitude, longitude, function(weatherData){
+
+            cb(weatherData);    
+
+      });
+
+    });
+
+}
+
+function loadWeatherData(callback) {
+
+    requestWeatherData(function(data){
+
+      //对原始数据做一些修整， 然后输出给前端
+      var weatherData = {};
+      weatherData = data;      
+      weatherData.current.formattedDate = formatDate(data.current.time);
+      weatherData.current.formattedTime = formatTime(data.current.time);
+      weatherData.current.temperature = parseInt(weatherData.current.temperature);
+
+      var wantedDaily = [];
+      for(var i = 1;i < weatherData.daily.data.length;i++) {
+
+        var wantedDailyItem = weatherData.daily.data[i];
+        var time = weatherData.daily.data[i].time;
+        wantedDailyItem["weekday"] = formatWeekday(time);
+        wantedDailyItem["temperatureMin"] = parseInt(weatherData.daily.data[i]["temperatureMin"])
+        wantedDailyItem["temperatureMax"] = parseInt(weatherData.daily.data[i]["temperatureMax"])
+
+        wantedDaily.push(wantedDailyItem);
+
+      }      
+
+      weatherData.daily.data = wantedDaily;
+      callback(weatherData);
+
+    });
+
+}
+
+
+module.exports = {
+
+    loadWeatherData: loadWeatherData
+
+}