微信小程序成功案例——旅游微天气开发全套程序（天气预报）

微信小程序成功案例——旅游微天气开发全套程序（天气预报）

今天给大家介绍的这个天气预报小程序，开发有三个原因。 一是天气类的小程序整体复杂度不高，适合我们说明问题以及微信小程序开发初学者练手。 二是这种类型的应用也更加适合微信小程序生态的场景，我的理解这个生态不适宜开发过于复杂的应用。 三是最重要的，因为先前是旅游爱好者，也是旅游工作者，经常出去旅游，有了这个小程序就更方便知道目的地的天气情况，好了，不说这些了，咱们首先来看看最终效果，有个感官的认识：

这是白天的时时效果图

这是晚上的时时效果图

这个是在我的发布小程序的最终运行效果，根据你当前的位置显示当前以及未来3天的天气情况。下拉屏幕，可以关注更多天气信息，如穿衣指数，洗车指数，感冒指数，运动指数，紫外线强度指数；特别关注的是，小程序自带了一个多功能设置按钮，读者您有没有找到呢？

准备工作

先给大家看了运行效果，建立一个感官认识。那么接下来，我们就可以开始了。首先在微信开发者工具里建立一个项目:

接下来，项目创建窗口有一点说明下， 在 AppID 条目中， 如果你已经有了内测账号，就填写你的 AppID， 如果你还没有内测账号，点击旁边的无AppID就可以了(相信大多数同学是没有内测账号的，所以可以使用这个方法继续在本地调试)。

关于小程序的基本流程，以及项目结构等，这些基础部分咱们这里就不多赘述。

项目结构

整个项目的文件结构如下：

大家可以看到，有一个 index 目录里面是主页。 app.js 是程序主入口， util.js 是咱们的工具脚本，用于读取天气数据。这个项目的所有文件都在这里了，是不是挺简单的？

基本结构介绍完了， 接下来咱们可以开始 Coding 了。 对于这个旅游微天气小程序来说， 首先要处理的一个事情就是天气数据的获取了。 那咱们就照着一步一步的来做就可以了。

app.js开发源代码展示：
var util = require(“we7/resource/js/util.js”);

App({
onLaunch: function(e) {
var s = this;
wx.getSystemInfo({
success: function(e) {
s.globalData.systeminfo = e;
}
});
},
util: util,
userInfo: {
sessionid: null
},
globalData: {
keepscreenon: !1,
systeminfo: {},
ak: “1d0b8747131b0db1e76efbaa7f30a318”
},
setGeocoderUrl: function(e) {
return “https://api.map.baidu.com/geocoder/v2/?address=” + e + “&output=json&ak=” + this.globalData.ak;
},
siteInfo: require(“siteinfo.js”)
});

app.json开发源代码展示：
{
“pages”: [
“zmsofts_weather/pages/index/index”,
“zmsofts_weather/pages/about/about”,
“zmsofts_weather/pages/citychoose/citychoose”,
“zmsofts_weather/pages/setting/setting”,
“zmsofts_weather/pages/systeminfo/systeminfo”
],
“window”: {
“backgroundTextStyle”: “dark”,
“navigationBarBackgroundColor”: “#40a7e7”,
“navigationBarTitleText”: “旅游微天气”,
“navigationBarTextStyle”: “light”
}
}

app.wxss开发源代码展示：
page {
line-height: 1.6;
font-family: -apple-system-font,“Helvetica Neue”,sans-serif;
}

icon {
vertical-align: middle;
}

.weui-cells {
position: relative;
margin-top: 1.17647059em;
background-color: #fff;
line-height: 1.41176471;
font-size: 17px;
}

.weui-cells:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1rpx solid #e6e6e6;
color: #e6e6e6;
}

.weui-cells:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 0px;
border-bottom: 0rpx solid #e6e6e6;
color: #e6e6e6;
}

.weui-cells__title {
margin-top: 0.77em;
margin-bottom: 0.3em;
padding-left: 15px;
padding-right: 15px;
color: #999;
font-size: 14px;
}

.weui-cells_after-title {
margin-top: 0;
}

.weui-cells__tips {
margin-top: 0.3em;
color: #999;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
}

.weui-cell {
padding: 10px 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
align-items: center;
}

.weui-cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1rpx solid #e6e6e6;
color: #e6e6e6;
}

.weui-cell:first-child:before {
display: none;
}

.weui-cell_active {
background-color: #ececec;
}

.weui-cell_primary {
-webkit-box-align: start;
align-items: flex-start;
}

.weui-cell__bd {
-webkit-box-flex: 1;
flex: 1;
}

.weui-cell__ft {
text-align: right;
color: #999;
}

.weui-cell_access {
color: inherit;
}

.weui-cell__ft_in-access {
padding-right: 13px;
position: relative;
}

.weui-cell__ft_in-access:after {
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
transform: matrix(0.71,0.71,-0.71,0.71,0,0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
margin-top: -4px;
right: 2px;
}

.weui-cell_link {
color: #586c94;
font-size: 14px;
}

.weui-cell_link:active {
background-color: #ececec;
}

.weui-cell_link:first-child:before {
display: block;
}

.weui-icon-radio {
margin-left: 3.2px;
margin-right: 3.2px;
}

.weui-icon-checkbox_circle,.weui-icon-checkbox_success {
margin-left: 4.6px;
margin-right: 4.6px;
}

.weui-check__label:active {
background-color: #ececec;
}

.weui-check {
position: absolute;
left: -9999px;
}

.weui-check__hd_in-checkbox {
padding-right: 0.35em;
}

.weui-cell__ft_in-radio {
padding-left: 0.35em;
}

.weui-cell_input {
padding-top: 0;
padding-bottom: 0;
}

.weui-label {<