├── .gitignore ├── README.md ├── app.js ├── app.json ├── app.wxss ├── images ├── arrowright.png ├── curcity.png ├── icon │ ├── comf.png │ ├── cw.png │ ├── drsg.png │ ├── flu.png │ ├── sport.png │ ├── trav.png │ └── uv.png ├── tabbar │ ├── about1.png │ ├── about2.png │ ├── city1.png │ ├── city2.png │ ├── weather1.png │ └── weather2.png └── update.png └── pages ├── about ├── about.js ├── about.json ├── about.wxml └── about.wxss ├── city ├── city.js ├── city.json ├── city.wxml ├── city.wxss └── json.js └── weather ├── weather.js ├── weather.json ├── weather.wxml └── weather.wxss /.gitignore: -------------------------------------------------------------------------------- 1 | *swp 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序-天气预报 2 | 3 | ### 概述 4 | * 数据来源：和风天气开放API 5 | * 开发工具：微信开发者工具 v1.01.170925 6 | 7 | ### 功能 8 | 这是一个微信小程序的模拟项目，含天气展示页、设置城市页面和作者信息页面。功能较为简单，涉及的知识点有： 9 | * 小程序的界面布局 10 | * 本地缓存的读取与存储 11 | * 网络请求 12 | * 页面跳转 13 | 14 | 版权所有，仅供学习交流使用 15 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | //系统事件 4 | onLaunch: function () {//小程序初始化事件 5 | var that=this; 6 | //调用API从本地缓存中获取数据 7 | that.curid = wx.getStorageSync('curid') || that.curid;//API：获取本地缓存，若不存在设置为全局属性 8 | that.setlocal('curid', that.curid);//调用全局方法 9 | }, 10 | 11 | /*******************************************************/ 12 | 13 | //自定义全局方法 14 | setlocal:function(id,val){ 15 | wx.setStorageSync(id, val);//API：设置本地缓存 16 | }, 17 | //自定义全局属性 18 | curid:"CN101010100", 19 | version:"1.0" 20 | }) 21 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/weather/weather", 4 | "pages/about/about", 5 | "pages/city/city" 6 | ], 7 | "window":{ 8 | "navigationBarBackgroundColor": "#000", 9 | "navigationBarTitleText": "天气预报", 10 | "navigationBarTextStyle":"#fff", 11 | "backgroundColor":"#666", 12 | "backgroundTextStyle":"light", 13 | "enablePullDownRefresh":true 14 | }, 15 | "tabBar": { 16 | "color": "#666", 17 | "selectedColor": "#56abe4", 18 | "backgroundColor": "#ddd", 19 | "borderStyle":"black", 20 | "list": [{ 21 | "pagePath": "pages/weather/weather", 22 | "iconPath": "images/tabbar/weather1.png", 23 | "selectedIconPath": "images/tabbar/weather2.png", 24 | "text": "天气预报" 25 | }, { 26 | "pagePath": "pages/city/city", 27 | "iconPath": "images/tabbar/city1.png", 28 | "selectedIconPath": "images/tabbar/city2.png", 29 | "text": "设置城市" 30 | }, { 31 | "pagePath": "pages/about/about", 32 | "iconPath": "images/tabbar/about1.png", 33 | "selectedIconPath": "images/tabbar/about2.png", 34 | "text": "关于我" 35 | }], 36 | "position":"bottom" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container {margin: 0; padding: 0;} 3 | .title{font-size: 14px; font-weight: bold;} 4 | -------------------------------------------------------------------------------- /images/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/arrowright.png -------------------------------------------------------------------------------- /images/curcity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/curcity.png -------------------------------------------------------------------------------- /images/icon/comf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/comf.png -------------------------------------------------------------------------------- /images/icon/cw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/cw.png -------------------------------------------------------------------------------- /images/icon/drsg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/drsg.png -------------------------------------------------------------------------------- /images/icon/flu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/flu.png -------------------------------------------------------------------------------- /images/icon/sport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/sport.png -------------------------------------------------------------------------------- /images/icon/trav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/trav.png -------------------------------------------------------------------------------- /images/icon/uv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/icon/uv.png -------------------------------------------------------------------------------- /images/tabbar/about1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/about1.png -------------------------------------------------------------------------------- /images/tabbar/about2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/about2.png -------------------------------------------------------------------------------- /images/tabbar/city1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/city1.png -------------------------------------------------------------------------------- /images/tabbar/city2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/city2.png -------------------------------------------------------------------------------- /images/tabbar/weather1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/weather1.png -------------------------------------------------------------------------------- /images/tabbar/weather2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/tabbar/weather2.png -------------------------------------------------------------------------------- /images/update.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavin125/wxtest/327d43717f1d8029fb443ecb03e0f91816dded03/images/update.png -------------------------------------------------------------------------------- /pages/about/about.js: -------------------------------------------------------------------------------- 1 | //about.js 2 | //获取应用实例 3 | var app = getApp() 4 | 5 | Page({ 6 | data: { 7 | v:app.version 8 | }, 9 | 10 | onLoad: function () { 11 | 12 | } 13 | 14 | }) 15 | 16 | -------------------------------------------------------------------------------- /pages/about/about.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "关于我" 3 | } -------------------------------------------------------------------------------- /pages/about/about.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 产品名称：天气预报 5 | 版本号：{{v}} 6 | 数据来源：和风天气 7 | 开发时间：2016年11月 8 | 9 | 10 | 作者：小古哥(Gavin) 11 | 网站：www.xiaoguge.cn 12 | 邮箱：gulei125@163.com 13 | 博客：www.cnblogs.com/gulei 14 | GitHub：github.com/gavin125 15 | 16 | -------------------------------------------------------------------------------- /pages/about/about.wxss: -------------------------------------------------------------------------------- 1 | /**about.wxss**/ 2 | .about{ padding:8% 5%; background:#eee; color: #999;} 3 | .about text{ display: block; line-height: 1.5rem;} 4 | 5 | .aboutme{ background: #f5f5f5; border-top:solid 1px #ccc; text-align: left; padding:10px 5px; } 6 | .aboutme .title{ background: #eee; color:#333;} -------------------------------------------------------------------------------- /pages/city/city.js: -------------------------------------------------------------------------------- 1 | //city.js 2 | //获取应用实例 3 | var app = getApp(); 4 | 5 | var json = require('json.js'); 6 | 7 | 8 | Page({ 9 | data: { 10 | cur_id:app.curid, 11 | cur_name:"", 12 | citylist:[] 13 | }, 14 | 15 | onLoad: function () { 16 | var that = this 17 | //调用应用实例的方法获取全局数据 18 | that.getlist(json.cjson); 19 | that.getname(that.data.cur_id) 20 | }, 21 | //简化json数据 22 | getlist:function(json){ 23 | var that=this; 24 | that.cjson=[]; 25 | json.forEach(function(val,i){ 26 | var tobj={ 27 | id:val.id, 28 | cityname:val.cityZh, 29 | province:val.provinceZh, 30 | leader:val.leaderZh 31 | } 32 | that.cjson.push(tobj); 33 | }) 34 | that.creatarr() 35 | }, 36 | //并列数据生成嵌套数组 37 | creatarr:function(){ 38 | var that=this; 39 | var arr=[]; 40 | var j=0,k=0;//(省份和城市指针) 41 | that.cjson.forEach(function(val,i){ 42 | if(i==0){//第一次无对比直接添加 43 | arr.push({pro:val.province,larr:[{lea:val.leader,carr:[{city:val.cityname,id:val.id}]}]}) 44 | }else{ 45 | if(val.province==arr[j].pro){//同省 46 | if(val.leader==arr[j].larr[k].lea){//同市 47 | arr[j].larr[k].carr.push({city:val.cityname,id:val.id}) 48 | }else{//不同市 49 | k++; 50 | arr[j].larr.push({lea:val.leader,carr:[{city:val.cityname,id:val.id}]}) 51 | } 52 | }else{//不同省 53 | j++;k=0; 54 | arr.push({pro:val.province,larr:[{lea:val.leader,carr:[{city:val.cityname,id:val.id}]}]}) 55 | } 56 | } 57 | }) 58 | that.cobj=arr; 59 | that.setData({citylist:that.cobj}) 60 | }, 61 | //根据编号获取名称 62 | getname:function(id){ 63 | var that=this; 64 | for( var i=that.cjson.length-1;i>=0;i--){ 65 | if(that.cjson[i].id==id){ 66 | that.setData({cur_name:that.cjson[i].cityname}) 67 | break; 68 | } 69 | } 70 | 71 | }, 72 | 73 | //选择城市tap事件 74 | selecttap:function(e){ 75 | var that=this; 76 | app.curid = e.currentTarget.id; 77 | app.setlocal('curid', app.curid); 78 | //that.setData({cur_id:app.curid,cur_name:that.getname(app.curid)}) 79 | wx.switchTab({url: '../weather/weather'}); 80 | } 81 | 82 | }) 83 | 84 | -------------------------------------------------------------------------------- /pages/city/city.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "设置城市" 3 | } -------------------------------------------------------------------------------- /pages/city/city.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 当前城市：{{cur_name}} 5 | 6 | 7 | 8 | {{item.pro}} 9 | 10 | 11 | {{item.lea}} 12 | 13 | 14 | {{item.city}} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /pages/city/city.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .city {padding: 3% 5%; background: #ddd; text-align: center;} 3 | .city text{font-size: 16px; color: #099; } 4 | 5 | .citytable{ margin: 5%;} 6 | .province{ padding: 5px 10px;background: #aaa;color: #fff;font-size: 14px; font-weight:bold; margin-top: 5%;} 7 | .province image{ float: right; width: 16px; height:16px;} 8 | .leadlist{ } 9 | .leader{ color: #666; border-top:solid 1px #ccc; background: #eee; padding: 5px 10px; font-size: 14px; } 10 | .leader image{ float: right; width: 12px; height:12px; } 11 | .rotate{transform:rotate(90deg)} 12 | .citys{ border:solid 1px #eee; } 13 | .cityname{ color: blue; display: inline-block; margin: 5px;font-size: 12px; } -------------------------------------------------------------------------------- /pages/weather/weather.js: -------------------------------------------------------------------------------- 1 | //weather.js 2 | var app = getApp();//获取当前小程序实例，方便使用全局方法和属性 3 | Page({ 4 | //1、页面数据部分 5 | data:{cur_id:app.curid,basic:"",now:"",suggestion:""},//设置页面数据，后面空值将在页面显示时通过请求服务器获取 6 | //2、系统事件部分 7 | onShow:function(){ 8 | var that = this; 9 | wx.showToast({title: '加载中',icon: 'loading',duration: 10000})//设置加载模态框 10 | that.getnow(function(d){//获取到数据的回调函数 11 | wx.hideToast(); 12 | d.now.cond.src="http://files.heweather.com/cond_icon/"+d.now.cond.code+".png"; 13 | that.setData({basic:d.basic,now:d.now})//更新数据，视图将同步更新 14 | }) 15 | that.getsuggestion(function(d){ 16 | that.setData({suggestion:d.suggestion})//更新数据 17 | })}, 18 | //3、自定义页面方法：获取当前天气API 19 | getnow:function(fn){ 20 | wx.request({//请求服务器，类似ajax 21 | url: 'https://www.xiaoguge.cn/api/wxtest/now.php', 22 | data: {city:app.curid,key:'01a7798b060b468abdad006ea3de4713'},//和风天气提供用户key，可自行注册获得 23 | header: {'Content-Type': 'application/json'}, 24 | success: function(res) {fn(res.data.HeWeather5[0]);}//成功后将数据传给回调函数执行 25 | }) 26 | }, 27 | //获取生活指数API 28 | getsuggestion:function(fn){ 29 | wx.request({ 30 | url: 'https://www.xiaoguge.cn/api/wxtest/suggestion.php', 31 | data: {city:app.curid,key:'01a7798b060b468abdad006ea3de4713'}, 32 | header: {'Content-Type': 'application/json'}, 33 | success: function(res) {fn(res.data.HeWeather5[0]);} 34 | }) 35 | }, 36 | //4、页面事件绑定部分 37 | bindViewTap:function(){wx.switchTab({url: '../city/city'})}//跳转菜单页面 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /pages/weather/weather.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/weather/weather.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 当前城市：{{basic.city}} 6 | 7 | 最近更新时间：{{basic.update.loc}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{now.tmp}}℃ 15 | {{now.cond.txt}} | {{now.wind.dir}}{{now.wind.sc}}级 16 | 17 | 18 | 相对湿度{{now.hum}}% 19 | 降水量{{now.pcpn}}mm 20 | 能见度{{now.vis}}km 21 | 22 | 23 | 24 | 25 | 生活指数 26 | 27 | 28 | 29 | 舒适度指数 30 | 31 | 32 | {{suggestion.comf.brf}} 33 | {{suggestion.comf.txt}} 34 | 35 | 36 | 37 | 38 | 39 | 洗车指数 40 | 41 | 42 | {{suggestion.cw.brf}} 43 | {{suggestion.cw.txt}} 44 | 45 | 46 | 47 | 48 | 49 | 穿衣指数 50 | 51 | 52 | {{suggestion.drsg.brf}} 53 | {{suggestion.drsg.txt}} 54 | 55 | 56 | 57 | 58 | 59 | 感冒指数 60 | 61 | 62 | {{suggestion.flu.brf}} 63 | {{suggestion.flu.txt}} 64 | 65 | 66 | 67 | 68 | 69 | 运动指数 70 | 71 | 72 | {{suggestion.sport.brf}} 73 | {{suggestion.sport.txt}} 74 | 75 | 76 | 77 | 78 | 79 | 旅游指数 80 | 81 | 82 | {{suggestion.trav.brf}} 83 | {{suggestion.trav.txt}} 84 | 85 | 86 | 87 | 88 | 89 | 紫外线指数 90 | 91 | 92 | {{suggestion.uv.brf}} 93 | {{suggestion.uv.txt}} 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /pages/weather/weather.wxss: -------------------------------------------------------------------------------- 1 | /**weather.wxss**/ 2 | 3 | /*城市信息*/ 4 | .city {padding: 3% 5%; background: #ddd; overflow: hidden;} 5 | .city .dwicon{ width: 30rpx; height: 30rpx; float: left; margin: 5px;} 6 | .city text{font-size: 16px; color: #666; float: left;} 7 | .city .zbicon{ width: 30rpx; height: 30rpx; float: right;margin: 8px 5px;} 8 | .city .update{ font-size: 12px; float: right; width: 110px;} 9 | 10 | /*天气预报*/ 11 | .weather{overflow: hidden;background: #cef;color: #58b; padding: 5%; } 12 | .weather .section{ float: left; width: 100px; height: 100px; display: block; } 13 | .weather .aside{ float: right; width:40%; margin-top: 5%; font-size: 12px; } 14 | .weather .aside .temperature{ font-size: 36px; display: block;} 15 | .weather .other{ clear:both; padding-top: 5%; display: flex; } 16 | .weather .other view{ flex:1; text-align: center; } 17 | .weather .other .border_r{ border-right: solid 1px #bbd; } 18 | .weather .other .title{font-size: 12px; color: #bbd; } 19 | .weather .other .info{ display: block; padding-top: 5%; } 20 | 21 | /*生活指数*/ 22 | .suggestion{ margin-top: 5%;} 23 | .suggestion .title{ display: block; padding: 3% 5%; background: #58b; color: #fff;} 24 | .suggestion .list{ display: flex; font-size: 12px; margin-top: 1px; } 25 | .suggestion .list_l{ flex: 1; text-align: center; background: #cef; color: #bbd; padding: 8px;} 26 | .suggestion .list_l image{ width:30px; height: 30px; display: block; margin: 0 auto;} 27 | .suggestion .list_r{ flex: 4; background: #eee; padding: 8px; color: #aaa;} 28 | .suggestion .list_t{ font-size: 14px; display: block; margin-bottom: 5px; color: #333;} --------------------------------------------------------------------------------