├── README.md
├── app.js
├── app.json
├── app.wxss
├── demo
    ├── qrcode.png
    └── screenshot.png
├── libs
    └── api.js
└── pages
    ├── detail
        ├── detail.js
        ├── detail.json
        ├── detail.wxml
        └── detail.wxss
    ├── index
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss
    └── setting
        ├── setting.js
        ├── setting.json
        ├── setting.wxml
        └── setting.wxss


/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <h1 align="center">WeatherHelper</h1>
 3 | <p align="center">:partly_sunny:  一款让您随时随地掌握天气情况的微信小程序</p>
 4 | 
 5 | <p> </p>
 6 | 
 7 | <p align="center"><img src="./demo/qrcode.png" height="180"></p>
 8 | <p align="center"><span>扫码体验小程序</span><span>       </span><span>关注作者公众号</span></p>
 9 | 
10 | <p> </p>
11 | 
12 | <h4 align="center">界面截屏</h4>
13 | <p align="center"><img src="./demo/screenshot.png"></p>
14 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | //app.js
 2 | var api = require('./libs/api')
 3 | App({
 4 |   onLaunch: function() {
 5 |     //加载天气数据
 6 |     this.loadWeatherData();
 7 |     
 8 |     // 获取用户信息
 9 |     this.getUserInfo();
10 |     //...
11 |   },
12 | 
13 |   loadWeatherData: function() {
14 |     var citySelected = wx.getStorageSync('citySelected') || [];
15 |     if (citySelected.length == 0) {
16 |       citySelected.unshift("__location__");
17 |       wx.setStorageSync('citySelected', citySelected);
18 |     }
19 | 
20 |     var that = this
21 |     for (var idx in citySelected) {
22 |       var cityCode = citySelected[idx];
23 |       api.loadWeatherData(cityCode, function (cityCode, data) {
24 |         var weatherData = wx.getStorageSync('weatherData') || {};
25 |         weatherData[cityCode] = data;
26 |         wx.setStorageSync('weatherData', weatherData);
27 |       });
28 |     }
29 |   },
30 | 
31 |   getUserInfo: function() {
32 |     var that = this
33 |     wx.getUserInfo({
34 |       withCredentials: false,
35 |       success: function (res) {
36 |         that.globalData.userInfo = res.userInfo
37 |       }
38 |     })
39 |   },
40 | 
41 |   globalData: {
42 |     userInfo: null
43 |   }
44 | })
45 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages": [
 3 |     "pages/index/index",
 4 |     "pages/detail/detail",
 5 |     "pages/setting/setting"
 6 |   ],
 7 |   "window": {
 8 |     "backgroundTextStyle": "dark",
 9 |     "backgroundColor": "#42c642",
10 |     "navigationBarBackgroundColor": "#42c642",
11 |     "navigationBarTitleText": "天气帮手",
12 |     "navigationBarTextStyle": "#ffffff"
13 |   }
14 | }


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | /**app.wxss**/
2 | .container {
3 |   height: 1205rpx;
4 |   background: #faf9fa;
5 | } 
6 | 


--------------------------------------------------------------------------------
/demo/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tabalt/WeatherHelper/59e68f61641e39e5f290591bfd9e4e84a6cd8de8/demo/qrcode.png


--------------------------------------------------------------------------------
/demo/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tabalt/WeatherHelper/59e68f61641e39e5f290591bfd9e4e84a6cd8de8/demo/screenshot.png


--------------------------------------------------------------------------------
/libs/api.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var apiLocalWeatherUrl = 'https://open.onebox.so.com/Dataapi?&query=%E5%A4%A9%E6%B0%94&type=weather&ip=&src=soindex&d=pc&url=weather';
  3 | var apiCityWeatherUrl = 'https://open.onebox.so.com/Dataapi?callback=&query=%E5%8C%97%E4%BA%AC%E5%B8%82%E5%8C%97%E4%BA%AC%E6%B5%B7%E6%B7%80%E5%A4%A9%E6%B0%94&type=weather&ip=&src=soindex&d=pc&url=http%253A%252F%252Fcdn.weather.hao.360.cn%252Fsed_api_weather_info.php%253Fapp%253DguideEngine%2526fmt%253Djson%2526code%253D';
  4 | 
  5 | function loadWeatherData(cityCode, cb) {
  6 |   var apiWeatherUrl = apiLocalWeatherUrl;
  7 |   if (cityCode != "" && cityCode != "__location__") {
  8 |     apiWeatherUrl = apiCityWeatherUrl + cityCode;
  9 |   }
 10 | 
 11 |   wx.request({
 12 |     url: apiWeatherUrl,
 13 |     data: {},
 14 |     success: function (res) {
 15 |       if (res.statusCode != 200 || res.data.length == 0) {
 16 |         return;
 17 |       }
 18 |       var weatherData = parseWeatherData(res.data);
 19 |       typeof cb == "function" && cb(cityCode, weatherData)
 20 |     }
 21 |   })
 22 | }
 23 | function parseWeatherData(data) {
 24 |   data.realtime.weather.pic = weatherPic(data.realtime.weather.img);
 25 |   for (var i = 0; i < data.weather.length; i++) {
 26 |     data.weather[i].shortDate = shortDate(data.weather[i].date);
 27 |     data.weather[i].day_pic = weatherPic(data.weather[i].info.day[0]);
 28 |     data.weather[i].night_pic = weatherPic(data.weather[i].info.night[0]);
 29 |   }
 30 |   var lifeConf = []
 31 |   for (var key in data.life.info) {
 32 |     var name = lifeName(key)
 33 |     if(name != undefined) {
 34 |       lifeConf.push({
 35 |         key: key,
 36 |         name: name,
 37 |         pic: lifePic(key)
 38 |       });
 39 |     }
 40 |   }
 41 |   data.life['conf'] = lifeConf;
 42 |   return data;
 43 | }
 44 | function weatherPic(no) {
 45 |   if (no.length == 1) {
 46 |     no = '0' + no;
 47 |   }
 48 |   return 'https://p0.ssl.qhimg.com/d/f239f0e2/' + no + '.png'
 49 | }
 50 | function lifePic(key) {
 51 |   return 'https://p0.ssl.qhimg.com/d/f239f0e2/' + key + '.png';
 52 | }
 53 | 
 54 | var lifeNameConf = {
 55 |   chuanyi: "穿衣",
 56 |   ganmao: "感冒",
 57 |   xiche: "行车",
 58 |   yundong: "运动",
 59 |   ziwaixian: "紫外线",
 60 |   diaoyu: "钓鱼",
 61 |   daisan:"带伞",
 62 |   guomin:"过敏",
 63 | }
 64 | function lifeName(key) {
 65 |   return lifeNameConf[key];
 66 | }
 67 | function shortDate(str) {
 68 |   var date = new Date(Date.parse(str));
 69 |   var now = new Date();
 70 | 
 71 |   var result = (date.getMonth() + 1) + "/" + date.getDate();
 72 |   if (now.getDate() == date.getDate()) {
 73 |     result = "今天";
 74 |   }
 75 |   return result;
 76 | }
 77 | 
 78 | var oneboxProxyUrl = 'https://open.onebox.so.com/api/proxy?__url__=';
 79 | var cdnWeatherHaoUrl = 'http://cdn.weather.hao.360.cn/sed_api_area_query.php?app=guideEngine&fmt=json&grade=';
 80 | var cityConfCache = {}
 81 | 
 82 | function loadCityConf(level, code, cb) {
 83 |   var cacheKey = level + ":" + code
 84 |   if (cityConfCache[cacheKey] != undefined && cityConfCache[cacheKey].length > 0) {
 85 |     typeof cb == "function" && cb(level, code, cityConfCache[cacheKey])
 86 |     return
 87 |   }
 88 |   
 89 |   wx.request({
 90 |     url: apiCityConfUrl(level, code),
 91 |     data: {},
 92 |     success: function (res) {
 93 |       if (res.statusCode != 200 || res.data.length == 0) {
 94 |         return;
 95 |       }
 96 |       cityConfCache[cacheKey] = res.data;
 97 |       typeof cb == "function" && cb(level, code, res.data)
 98 |     }
 99 |   })
100 | }
101 | function apiCityConfUrl(level, code) {
102 |   var url = cdnWeatherHaoUrl + level
103 |   if (code != "") {
104 |     url += '&code=' + code
105 |   }
106 |   url = oneboxProxyUrl + encodeURIComponent(url)
107 |   return url
108 | }
109 | 
110 | module.exports = {
111 |   loadWeatherData: loadWeatherData,
112 |   loadCityConf: loadCityConf
113 | }


--------------------------------------------------------------------------------
/pages/detail/detail.js:
--------------------------------------------------------------------------------
 1 | // detail.js
 2 | //获取应用实例
 3 | var app = getApp()
 4 | Page({
 5 | 
 6 |   /**
 7 |    * 页面的初始数据
 8 |    */
 9 |   data: {
10 |     topCity: {},
11 |     weatherInfo: {}
12 |   },
13 | 
14 |   /**
15 |    * 生命周期函数--监听页面加载
16 |    */
17 |   onLoad: function (options) {
18 |     //加载天气数据
19 |     this.loadWeatherData(options)
20 |   },
21 | 
22 |   loadWeatherData: function (options) {
23 |     var cityCode = options.city_code || '';
24 |     if (cityCode == "") {
25 |       wx.navigateBack();
26 |     }
27 |     var weatherData = wx.getStorageSync('weatherData');
28 |     var weatherInfo = weatherData[cityCode];
29 |     if (weatherInfo == undefined) {
30 |       wx.navigateBack();
31 |     }
32 | 
33 |     var topCity = {
34 |       left: "",
35 |       center: "",
36 |       right: "",
37 |     }
38 |     try { topCity.center = weatherInfo.realtime.city_name; } catch (e) { }
39 | 
40 |     this.setData({
41 |       userInfo: app.globalData.userInfo,
42 |       weatherInfo: weatherInfo,
43 |       topCity: topCity,
44 |     })
45 |   },
46 | 
47 |   /**
48 |    * 用户点击右上角分享
49 |    */
50 |   onShareAppMessage: function () {
51 |   
52 |   }
53 | })


--------------------------------------------------------------------------------
/pages/detail/detail.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/pages/detail/detail.wxml:
--------------------------------------------------------------------------------
 1 | <!--detail.wxml-->
 2 | <view> 
 3 |   <view class="top_city">
 4 |     <view class="city_list">
 5 |       <view class="city_item" >
 6 |         {{topCity.left}}
 7 |       </view>
 8 |       <view class="city_item city_item_center" >
 9 |         {{topCity.center}}
10 |       </view>
11 |       <view class="city_item" >
12 |         {{topCity.right}}
13 |       </view>
14 |     </view>
15 |   </view>
16 |   
17 |   <scroll-view class="container" scroll-y="true" scroll-with-animation="true">
18 |     <view class="today">
19 |       <view class="more date">
20 |         <text>今天是 {{weatherInfo.weather[0].date}}，周{{weatherInfo.weather[0].week}}，农历 {{weatherInfo.weather[0].nongli}} </text>
21 |       </view>
22 |       <view class="day-night">
23 |         <view class="weather">
24 |           <text class="day-desc">白天</text>
25 |           <image class="pic" src="{{weatherInfo.weather[0].day_pic}}"></image>
26 |           <view class="desc">
27 |             <text>最高 {{weatherInfo.weather[0].info.day[2]}}°</text>
28 |             <text>{{weatherInfo.weather[0].info.day[3]}} {{weatherInfo.weather[0].info.day[4]}}</text>
29 |           </view>
30 |         </view>
31 |         <view class="weather split"></view>
32 |         <view class="weather">
33 |           <view class="desc" style="align-items:flex-end;">
34 |             <text>{{weatherInfo.weather[0].info.night[2]}}°最低</text>
35 |             <text>{{weatherInfo.weather[0].info.night[4]}} {{weatherInfo.weather[0].info.night[3]}} </text>
36 |           </view>
37 |           <image class="pic" src="{{weatherInfo.weather[0].night_pic}}"></image>
38 |           <text class="day-desc">夜间</text>
39 |         </view>
40 |       </view>
41 |       <!-- <view class="temperature">
42 |         <text>{{weatherInfo.weather[0].info.night[2]}} ~ {{weatherInfo.weather[0].info.day[2]}}°</text>
43 |       </view> -->
44 |       <view class="more">
45 |         <text>日出：{{weatherInfo.weather[0].info.day[5]}}</text>
46 |         <text>日落：{{weatherInfo.weather[0].info.night[5]}}</text>
47 |       </view>
48 |       <view class="more">
49 |         <text>{{weatherInfo.pm25.pm25.des}}</text>
50 |         <text> </text>
51 |       </view>
52 |     </view>
53 |     <view class="today-bottom"></view>
54 |     <view class="card-list">
55 |       <view class="card life">
56 |         <view class="title">生活指数</view>
57 |         <view class="item" wx:for="{{weatherInfo.life.conf}}" wx:key="lifeIdx">
58 |           <view class="line">
59 |             <image class="pic" src="{{item.pic}}"></image>
60 |             <view class="name">{{item.name}}：</view>
61 |             <view class="desc">{{weatherInfo.life.info[item.key][0]}}</view>
62 |           </view>
63 |         </view>
64 |       </view>
65 |       <!--       
66 |       <view class="card temperature">
67 |         <view class="title">24小时温度</view>
68 |         <view>
69 |         <canvas canvas-id="lineTemperature" disable-scroll="true" class="canvas"></canvas>
70 |         </view>
71 |       </view>
72 |       <view class="card life">
73 |         <view class="title">降水量</view>
74 |         <view>
75 |         </view>
76 |       </view>
77 |       -->
78 | 
79 |     </view>
80 |   </scroll-view>
81 | </view>
82 | 
83 | 


--------------------------------------------------------------------------------
/pages/detail/detail.wxss:
--------------------------------------------------------------------------------
  1 | /* detail.wxss */
  2 | 
  3 | @import "../index/index.wxss";
  4 | 
  5 | .date {
  6 |   padding-top:0rpx;
  7 |   margin-top: 0rpx;
  8 | }
  9 | 
 10 | .day-desc {
 11 |   font-size: 25rpx;
 12 |   color:#fff;
 13 |   margin-top: -20rpx;
 14 | }
 15 | 
 16 | .day-night {
 17 |   margin: 30rpx 0 50rpx 0; 
 18 |   display: flex;
 19 |   flex-direction: row;
 20 |   align-items: center;
 21 | }
 22 | 
 23 | .day-night .split{
 24 |   border: none;
 25 |   border-left:1rpx dashed #eee;  
 26 |   height:80rpx;
 27 |   width: 0rpx;
 28 |   padding: 0;
 29 |   margin: 15rpx 15rpx 0 15rpx;
 30 | }
 31 | 
 32 | .today {
 33 |   padding-top:20rpx;
 34 | }
 35 | .today .weather {
 36 |   padding-top:20rpx;
 37 |   padding-left: 0rpx;
 38 | }
 39 | .today .weather .pic {
 40 |   margin: 0 10rpx;
 41 | }
 42 | .today .weather .desc {
 43 |   margin: 0 10rpx;
 44 |   float: right;
 45 |   width:140rpx;
 46 | }
 47 | 
 48 | /* life */
 49 | 
 50 | .card-list {
 51 |   margin-top: -280rpx;
 52 | }
 53 | .card {
 54 |   margin-top: 20rpx;
 55 |   margin-left:20rpx;
 56 |   margin-right:20rpx;
 57 |   color:#404040;
 58 | }
 59 | .card .title {
 60 |   display: block;
 61 |   text-align:center;
 62 |   padding-bottom:5px;
 63 |   margin:0 100rpx;
 64 |   margin-bottom:5px;
 65 |   font-size:30rpx;
 66 |   border-bottom: 1rpx dashed #eee;
 67 | }
 68 | .life .item {
 69 |   display: inline-block;
 70 | }
 71 | .life .item .line {
 72 |   margin: 10rpx;
 73 |   padding: 10rpx;
 74 |   border-radius: 20rpx;
 75 |   border:1px solid #49c44a;
 76 |   display: flex;  
 77 |   flex-direction:row;
 78 |   width: 310rpx;
 79 | }
 80 | .life .item .pic{
 81 |   width: 48rpx;
 82 |   height: 48rpx;
 83 |   margin: 0 20rpx;
 84 | }
 85 | 
 86 | .life .item .name, .life .item .desc{
 87 |    font-size: 25rpx;
 88 |    line-height: 48rpx;
 89 |    padding-top: 5rpx;
 90 | }
 91 | .life .item .desc text {
 92 |   font-size: 20rpx;
 93 |   line-height: 25rpx;
 94 |   margin-left: 20rpx;
 95 |   margin-top:5rpx;
 96 |   color:#404040;
 97 | }
 98 | .life .item .temperature{
 99 |   font-size: 28rpx;
100 |   line-height: 60rpx;
101 |   margin-left: 80rpx;
102 |   padding-top: 5rpx;
103 |   height: 500rpx;
104 | }


--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
 1 | //index.js
 2 | var api = require('../../libs/api')
 3 | 
 4 | //获取应用实例
 5 | var app = getApp()
 6 | Page({
 7 |   data: {
 8 |     userInfo: {},
 9 |     citySelected: {},
10 |     weatherData: {},
11 |     topCity: {}
12 |   },
13 | 
14 |   //事件处理函数
15 |   showDetailPage: function(e) {
16 |     try{
17 |       var cityCode = e.currentTarget.dataset.city_code || '';
18 |     } catch(e){}
19 |   
20 |     wx.navigateTo({
21 |       url: '../detail/detail?city_code=' + cityCode
22 |     })
23 |   },
24 |   showSettingPage: function () {
25 |     wx.navigateTo({
26 |       url: '../setting/setting'
27 |     })
28 |   },
29 |   updateTopCity : function(event){
30 |     var citySelected = wx.getStorageSync('citySelected');
31 |     var weatherData = wx.getStorageSync('weatherData');
32 |     var topCity = {
33 |       left: "",
34 |       center: "",
35 |       right: "",
36 |     };
37 | 
38 |     var current = event.detail.current;
39 |     try { topCity.left = weatherData[citySelected[current-1]].realtime.city_name; } catch (e) { }
40 |     try { topCity.center = weatherData[citySelected[current]].realtime.city_name; } catch (e) { }
41 |     try { topCity.right = weatherData[citySelected[current + 1]].realtime.city_name; } catch (e) { }
42 | 
43 |     this.setData({
44 |       topCity: topCity,
45 |     })
46 |   },
47 | 
48 |   onLoad: function () {
49 |     var defaultCityCode = "__location__";
50 |     var citySelected = wx.getStorageSync('citySelected');
51 |     var weatherData = wx.getStorageSync('weatherData');
52 |     if (citySelected.length == 0 || weatherData.length == 0) {
53 |       var that = this
54 |       api.loadWeatherData(defaultCityCode, function (cityCode, data) {
55 |         var weatherData = {}
56 |         weatherData[cityCode] = data;
57 |         that.setHomeData([cityCode], weatherData);
58 |       });
59 |     } else {
60 |       this.setHomeData(citySelected, weatherData);
61 |     }
62 |   },
63 | 
64 |   onShow:function() {
65 |     var citySelected = wx.getStorageSync('citySelected');
66 |     this.setData({
67 |       citySelected: citySelected,
68 |     })
69 |   },
70 | 
71 |   setHomeData: function (citySelected, weatherData) {
72 |     var topCity = {
73 |       left: "",
74 |       center: "",
75 |       right: "",
76 |     }
77 |     try { topCity.center = weatherData[citySelected[0]].realtime.city_name; } catch (e) { }
78 |     try { topCity.right = weatherData[citySelected[1]].realtime.city_name; } catch (e) { }
79 | 
80 |     this.setData({
81 |       userInfo: app.globalData.userInfo,
82 |       weatherData: weatherData,
83 |       topCity: topCity,
84 |       citySelected: citySelected,
85 |     })
86 |   },
87 | 
88 |   /**
89 |    * 用户点击右上角分享
90 |    */
91 |   onShareAppMessage: function () {
92 | 
93 |   }
94 | })
95 | 


--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <!--index.wxml-->
 2 | <view> 
 3 |   <view class="top_city" bindtap="showSettingPage">
 4 |     <view class="city_list">
 5 |       <view class="city_item city_item_left" >
 6 |         {{topCity.left}}
 7 |       </view>
 8 |       <view class="city_item city_item_center" >
 9 |         {{topCity.center}}
10 |       </view>
11 |       <view class="city_item city_item_right" >
12 |         {{topCity.right}}
13 |       </view>
14 |     </view>
15 |   </view>
16 |   
17 |   <swiper class="container" bindchange="updateTopCity" style="background:#42c642;">
18 |     <block wx:for="{{citySelected}}" wx:key="cityIdx" wx:for-item="cityCode">
19 |       <swiper-item>
20 |         <scroll-view class="container" scroll-y="true" scroll-with-animation="true">
21 |           <view class="today" bindtap="showDetailPage" data-city_code="{{ cityCode }}">
22 |             <view class="weather">
23 |               <image class="pic" src="{{ weatherData[cityCode].realtime.weather.pic }}"></image>
24 |               <view class="desc">
25 |                 <text>{{weatherData[cityCode].realtime.weather.info}}</text>
26 |                 <text>{{weatherData[cityCode].realtime.wind.direct}} {{weatherData[cityCode].realtime.wind.power}}</text>
27 |               </view>
28 |             </view>
29 |             <view class="temperature">
30 |                 <text>{{weatherData[cityCode].realtime.weather.temperature}}°</text>
31 |               </view>
32 |             <view class="more">
33 |               <text>湿度 : {{weatherData[cityCode].realtime.weather.humidity}}</text>
34 |               <text>PM2.5 : {{weatherData[cityCode].pm25.pm25.curPm}}</text>
35 |               <text>{{weatherData[cityCode].pm25.pm25.quality}}</text>
36 |             </view>
37 |           </view>
38 |           <view class="today-bottom"></view>
39 |           <view class="feature">
40 |             <view class="day" wx:for="{{weatherData[cityCode].weather}}" wx:key="dayIdx">
41 |               <view class="date">{{item.shortDate}}</view>
42 |               <view class="date">周{{item.week}}</view>
43 |               <image class="pic" src="{{item.day_pic}}"></image>
44 |               <view class="desc">
45 |                 <text>{{item.info.day[1]}}</text>
46 |                 <text>{{item.info.day[3]}} {{item.info.day[4]}}</text>
47 |               </view>
48 |               <view class="temperature">
49 |                 <text>{{item.info.night[2]}}~{{item.info.day[2]}}°</text>
50 |               </view>
51 |             </view>
52 |           </view>
53 |         </scroll-view>
54 |       </swiper-item>
55 |     </block>
56 |   </swiper>
57 | </view>
58 | 


--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
  1 | /**index.wxss**/
  2 | 
  3 | /* ------- top city --------- */
  4 | 
  5 | .top_city {
  6 |   display: flex;
  7 |   flex-direction: column;
  8 |   align-items: center;
  9 |   background: #42c642;
 10 | }
 11 | 
 12 | .city_list {
 13 |   display: flex; 
 14 |   flex-direction: row; 
 15 |   align-content: center; 
 16 |   width: 330rpx;
 17 |   height: 50rpx;
 18 |   line-height: 50rpx;
 19 |   text-align: center;
 20 |   padding: 0 30rpx;
 21 | }
 22 | 
 23 | .city_item{
 24 |   color: #fff;
 25 |   width: 120px;
 26 |   font-size: 25rpx;
 27 |   padding-top: 5rpx;
 28 | }
 29 | 
 30 | .city_item_center {
 31 |   width: 140px;
 32 |   font-size: 30rpx;
 33 |   font-style: bold;
 34 |   padding-top: 0;
 35 | }
 36 | 
 37 | /* ------- today --------- */
 38 | 
 39 | .today {
 40 |   padding: 50rpx 0 60rpx 0;
 41 |   display: flex;
 42 |   flex-direction: column;
 43 |   align-items: center;
 44 |   background: #42c642;
 45 | }
 46 | .today .weather {
 47 |   display: flex;  
 48 |   flex-direction:row;
 49 |   padding-left: 30rpx;
 50 | }
 51 | .today .weather .pic {
 52 |   width: 100rpx;
 53 |   height: 100rpx;
 54 |   margin-right: 40rpx;
 55 | }
 56 | .today .weather .desc{
 57 |   display: flex; 
 58 |   flex-direction: column; 
 59 |   margin-right: 20rpx;
 60 | }
 61 | .today .weather .desc text {
 62 |   color: #fff;
 63 |   font-size: 26rpx;
 64 |   line-height: 40rpx;
 65 |   margin-top: 10rpx;
 66 | }
 67 | .today .temperature {
 68 |   color: #faf9fa;
 69 |   font-size: 70rpx;
 70 |   margin: 30rpx 0;
 71 |   padding-left:40rpx;
 72 | }
 73 | .today .more {
 74 |   color: #faf9fa;
 75 |   font-size: 25rpx;
 76 |   margin-bottom: 20rpx;
 77 | }
 78 | .today .more text {
 79 |   padding: 0 10rpx;
 80 | }
 81 | .today-bottom {
 82 |   background: #faf9fa;
 83 |   width: 150%;
 84 |   height: 300rpx;
 85 |   border-radius: 150%;
 86 |   margin: -50rpx 0 0 0;
 87 |   margin-left:-25%;
 88 | }
 89 | 
 90 | /* ------- feature --------- */
 91 | 
 92 | .feature {
 93 |   margin-top: -250rpx;
 94 | }
 95 | .feature .day {
 96 |   margin: 20rpx;
 97 |   padding: 20rpx 30rpx;
 98 |   border-radius: 20rpx;
 99 |   background: #fff;
100 | 
101 |   display: flex;  
102 |   flex-direction:row;
103 | }
104 | .feature .day .date{
105 |    width: 80rpx;
106 |    font-size: 28rpx;
107 |    line-height: 60rpx;
108 |    margin-right: 20rpx;
109 |    padding-top: 5rpx;
110 | }
111 | .feature .day .pic{
112 |   width: 60rpx;
113 |   height: 60rpx;
114 |   margin-right: 20rpx;
115 |   margin-left: 20rpx;
116 | }
117 | .feature .day .desc{
118 |   display: flex;
119 |   flex-direction: column;
120 |   margin-right: 20rpx;
121 |   width: 100px;
122 | }
123 | .feature .day .desc text {
124 |   font-size: 20rpx;
125 |   line-height: 25rpx;
126 |   margin-left: 20rpx;
127 |   margin-top:5rpx;
128 |   color:#404040;
129 | }
130 | .feature .day .temperature{
131 |    font-size: 28rpx;
132 |    line-height: 60rpx;
133 |    margin-left: 80rpx;
134 |    padding-top: 5rpx;
135 | }
136 | 


--------------------------------------------------------------------------------
/pages/setting/setting.js:
--------------------------------------------------------------------------------
  1 | // setting.js
  2 | var api = require('../../libs/api')
  3 | 
  4 | //获取应用实例
  5 | var app = getApp()
  6 | Page({
  7 | 
  8 |   /**
  9 |    * 页面的初始数据
 10 |    */
 11 |   data: {
 12 |     userInfo: {},
 13 |     citySelected: {},
 14 |     weatherData: {},
 15 |     multiConf: [],
 16 |     multiSelected: [0, 0, 0],
 17 |     chinaCityConf:[],
 18 |     chinaCitySelected: [0, 0, 0],
 19 |   },
 20 |   /**
 21 |    * 生命周期函数--监听页面加载
 22 |    */
 23 |   onLoad: function (options) {
 24 |     this.setData({
 25 |       userInfo: app.globalData.userInfo,
 26 |       weatherData: wx.getStorageSync('weatherData'),
 27 |       citySelected: wx.getStorageSync('citySelected'),
 28 |     })
 29 | 
 30 |     this.initChinaCityConf();
 31 |   },
 32 | 
 33 |   initChinaCityConf: function () {
 34 |     var initCityConf = [
 35 |       ["province", ""],
 36 |       ["city", "01"],
 37 |       ["town", "0101"]
 38 |     ];
 39 |     for (var idx in initCityConf) {
 40 |       var level = initCityConf[idx][0]
 41 |       var code = initCityConf[idx][1]
 42 |       api.loadCityConf(level, code, this.updateChinaCityConfByLevel);
 43 |     }
 44 |   },
 45 |   updateChinaCityConfByLevel: function (level, code, conf) {
 46 |     var chinaCityConf = this.data.chinaCityConf
 47 |     chinaCityConf[this.getCityLevelIndex(level)] = conf
 48 |     this.setData({ chinaCityConf: chinaCityConf });
 49 |   },
 50 |   cityLevelConf: ["province", "city", "town"],
 51 |   getCityLevelIndex: function(level) {
 52 |     for (var k in this.cityLevelConf) {
 53 |       if (level == this.cityLevelConf[k]) {
 54 |         return k;
 55 |         break;
 56 |       }
 57 |     }
 58 |     return 0;
 59 |   },
 60 |   pickerCity: function (e) {
 61 |     try {
 62 |       var level = this.cityLevelConf[e.detail.column + 1];
 63 |       var code = this.data.chinaCityConf[e.detail.column][e.detail.value][1];
 64 |       var that = this
 65 |       api.loadCityConf(level, code, function (level, code, conf) {
 66 |         that.updateChinaCityConfByLevel(level, code, conf);
 67 |         if (e.detail.column == 0) {
 68 |           level = that.cityLevelConf[e.detail.column + 2]
 69 |           code = that.data.chinaCityConf[e.detail.column + 1][0][1]
 70 |           api.loadCityConf(level, code, that.updateChinaCityConfByLevel);
 71 |         }
 72 |       });
 73 |     } catch (e) { console.log(e) }
 74 |   },
 75 |   addCity: function (e) {
 76 |     try {
 77 |       var cityCode = this.data.chinaCityConf[2][e.detail.value[2]][1]
 78 |       var citySelected = wx.getStorageSync('citySelected') || []
 79 | 
 80 |       if (this.data.weatherData['__location__'].realtime.city_code == cityCode) {
 81 |         return
 82 |       }
 83 |       if (citySelected.find(function (item) { return item === cityCode; }) != undefined) {
 84 |         return
 85 |       }
 86 | 
 87 |       var that = this;
 88 |       api.loadWeatherData(cityCode, function (cityCode, data) {
 89 |         var weatherData = wx.getStorageSync('weatherData') || {};
 90 |         weatherData[cityCode] = data;
 91 |         wx.setStorageSync('weatherData', weatherData);
 92 | 
 93 |         citySelected.push(cityCode);
 94 |         wx.setStorageSync('citySelected', citySelected);
 95 |         that.setData({
 96 |           chinaCitySelected: e.detail.value,
 97 |           citySelected: citySelected,
 98 |           weatherData: weatherData
 99 |         })
100 |       });
101 |     } catch (e) { console.log(e) }
102 |   },
103 |   removeCity: function (e) {
104 |     try {
105 |       var cityCode = e.currentTarget.dataset.city_code || '';
106 |       if (cityCode == "") {
107 |         return 
108 |       }
109 |       var citySelected = wx.getStorageSync('citySelected')
110 |       for (var k in citySelected) {
111 |         if(citySelected[k] == cityCode) {
112 |           citySelected.splice(k, 1)
113 |           break;
114 |         }
115 |       }
116 |       wx.setStorageSync('citySelected', citySelected);
117 |       this.setData({
118 |         citySelected: citySelected,
119 |       })
120 |     } catch (e) { }
121 |   },
122 | 
123 |   /**
124 |    * 用户点击右上角分享
125 |    */
126 |   onShareAppMessage: function () {
127 |   
128 |   }
129 | })


--------------------------------------------------------------------------------
/pages/setting/setting.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/pages/setting/setting.wxml:
--------------------------------------------------------------------------------
 1 | <!--setting.wxml-->
 2 | <view> 
 3 |   <scroll-view class="container" scroll-y="true" scroll-with-animation="true">
 4 |     <view class="city-selected">
 5 |       <view class="item" wx:for="{{citySelected}}" wx:key="dayIdx" wx:for-item="cityCode">
 6 |         <view class="name">{{weatherData[cityCode].realtime.city_name}}</view>
 7 |         <image class="pic" src="{{ weatherData[cityCode].realtime.weather.pic }}"></image>
 8 |         <view class="desc" >
 9 |           <text>{{weatherData[cityCode].realtime.weather.info}}</text>
10 |           <text>{{weatherData[cityCode].realtime.wind.direct}} {{weatherData[cityCode].realtime.wind.power}}</text>
11 |         </view>
12 |         <view class="temperature">
13 |           <text>{{weatherData[cityCode].realtime.weather.temperature}}°</text>
14 |         </view>
15 |         <view class="remove"><icon type="cancel" size="15"  bindtap="removeCity"  data-city_code="{{ cityCode }}" /></view>
16 |       </view>
17 |       <picker mode="multiSelector" 
18 |             bindchange="addCity" bindcolumnchange="pickerCity" 
19 |             value="{{chinaCitySelected}}" range="{{chinaCityConf}}" range-key="0">
20 |       <view class="item add">
21 |           <text>+ 添加城市</text>
22 |       </view>
23 |       </picker>
24 |     </view>
25 |   </scroll-view>
26 | </view>
27 | 
28 | 


--------------------------------------------------------------------------------
/pages/setting/setting.wxss:
--------------------------------------------------------------------------------
 1 | /* setting.wxss */
 2 | 
 3 | /* ------- city selected --------- */
 4 | .city-selected .item {
 5 |   margin: 20rpx;
 6 |   padding: 20rpx 30rpx;
 7 |   border-radius: 20rpx;
 8 |   background: #fff;
 9 |   display: flex;  
10 |   flex-direction:row;
11 | }
12 | .city-selected .item .name{
13 |    width: 150rpx;
14 |    font-size: 28rpx;
15 |    line-height: 60rpx;
16 |    margin-right: 20rpx;
17 |    padding-top: 5rpx;
18 | }
19 | .city-selected .item .pic{
20 |   width: 60rpx;
21 |   height: 60rpx;
22 |   margin-right: 20rpx;
23 |   margin-left: 20rpx;
24 | }
25 | .city-selected .item .desc{
26 |   display: flex;
27 |   flex-direction: column;
28 |   margin-left: 30rpx;
29 |   width: 100px;
30 | }
31 | .city-selected .item .desc text {
32 |   font-size: 20rpx;
33 |   line-height: 25rpx;
34 |   margin-left: 20rpx;
35 |   margin-top:5rpx;
36 |   color:#404040;
37 | }
38 | .city-selected .item .temperature{
39 |    font-size: 28rpx;
40 |    line-height: 60rpx;
41 |    margin-left: 30rpx;
42 |    margin-right: 30rpx;
43 |    padding-top: 5rpx;
44 | }
45 | .city-selected .item .remove{
46 |    margin-left: 30rpx;
47 |    padding-top: 15rpx;
48 | }
49 | 
50 | .city-selected .add {
51 |   font-size: 25rpx;
52 |   text-align: center;
53 |   display: flex;  
54 |   flex-direction:column;
55 |   align-items: center;
56 | }


--------------------------------------------------------------------------------