App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
"window": {
"navigationBarBackgroundColor": "#055674",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "天气小程序",
"enablePullDownRefresh": false
}
在文件中添加代码实现访问天气情况接口的代码供稍后调用
/*工具*/
//获取app
var app = getApp();
/*
创建方法，用来根据城市获取天气信息
参数：
cityName 城市名
callback 回调函数返回数据
*/
function getWeatherData(cityName, callback) {
//判断cityName是否存在
if (!cityName) {
//如果不存在，则使用定位到的城市信息
cityName = app.city
}
//调用天气API查询气象信息
var weApi = "https://free-api.heweather.com/v5/weather";
//发送请求加载信息
wx.request({
url: weApi,
data: {
city: cityName,
key: "8971dbd46ef44708a62f0ce8cf6ff012"
},
success: function (res) {
//console.log(res.data);
//加载成功，获取需要的数据
/*
需要的数据
1.城市名
2.当前日期
3.更新日期
4.当前天气情况
- 气温
- 描述
5.各种生活指数
*/
var hw = res.data.HeWeather5[0];
var weatherData = { status: "error" };
if (hw.status == "ok") {
weatherData = {
city: hw.basic.city, //城市
upTime: hw.basic.update.loc.slice(-5), //更新时间
now: formatTime(), // 当前日期
temp: hw.now.tmp, // 当前温度
desc: hw.now.cond.txt, //描述
status: "ok", //状态
suggestion: hw.suggestion //气象指数
};
}
//console.log(weatherData);
//信息封装完毕，调用回调函数发回信息
callback && callback(weatherData);
}
})
}
/*创建一个数组，表示星期 */
var dayArr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
/* 格式化时间
传递一个时间对象，返回月日星期
*/
function formatTime(dt) {
//判断对象是否存在
if (!dt) {
//若没传对象
//创建一个当前日期对象
dt = new Date();
}
//对日期进行格式化并返回
//期望格式 2月12日 周日
//获取月份
var m = dt.getMonth() + 1;
//获取日
var date = dt.getDate();
//获取星期
var day = dayArr[dt.getDay()];
return m + "月" + date + "日 " + day;
}
//设置导出信息
module.exports = {
getWeatherData: getWeatherData
};
在app.js中添加city全局变量，注意这行结束要有，逗号和后面隔开。并且逗号必须是半角的逗号。
在index.js中添加代码如下
//引入工具类
var util = require("../../utils/util.js");
// pages/index/index.js
Page({
data: {},
onLoad: function (options) {
//console.log(options);
var _this = this;
// 页面初始化 options为页面跳转所带来的参数
util.getWeatherData(null, function (wd) {
_this.setData({ wd: wd });
//console.log(wd);
});
}
})
在index.wxml中添加页面的布局，注意此处用了模板文件，因为等下需要的info页面也要用到，模板在下一步骤创建
<import src="/pages/public/temp_main.wxml" />
<template is="wt_main" data="{{...wd}}" />
在pages目录中创建一个public目录，添加一个temp_main.wxml文件
<template name="wt_main">
<block wx:if="{{status == 'ok'}}" >
<!-- 外部容器，可以纵向滚动 -->
<scroll-view class="outer" scroll-y >
<!-- 基本信息的view，包含城市、时间、更新日期等 -->
<view class="base_info inner">
<text class="city">{{city}}</text>
<text class="date">{{now}}</text>
<text class="update">{{upTime}} 更新</text>
</view>
<!-- 天气状况的view，主要包含当前文档，及天气状况 -->
<view class="wt_info inner">
<!-- 气温 -->
<text class="temp">{{temp}}℃</text>
<!-- 天气状况 -->
<text class="desc">{{desc}}</text>
</view>
</scroll-view>
</block>
<block wx:else>
错误的城市信息
</block>
</template>
在根目录新建一个app.wxss全局样式文件，样式代码如下
page {
font: 13px "微软雅黑";
line-height: 1.5;
color: white;
height:100%;
}
/*外部滚动容器的样式*/
.outer{
background-color:rgb(0, 122, 223);
position: absolute;
top: 0;
bottom: 0;
}
.outer .inner{
margin: 10px;
}
/*基本信息的样式*/
.base_info{
display: flex;
flex-direction: column;
text-align: right;
}
/*当前信息*/
.wt_info{
font-size: 40px;
}
/*天气描述信息*/
.wt_info .desc{
font-size: 25px;
margin-left: 20px;
}
/*气象指数*/
.wt_index{
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
display: flex;
flex-direction: column;
}
.wt_index text{
margin-bottom: 10px;
}
search.wxml文件中添加代码，实现搜索页面布局
<view>
<input type="text" placeholder="请输入城市名" bindinput="getCity" />
<button bindtap="searchWt" type="primary"
style="background-color:#055674;margin:10px">查询</button>
</view>
在search.js中添加代码如下
Page({
data: {
cityName: "广州"
},
getCity: function (event) {
//console.log(event.detail.value);
this.setData({ cityName: event.detail.value });
},
searchWt: function () {
wx.navigateTo({
url: '/pages/info/info?cityName=' + this.data.cityName
})
}
})
在search.wxml中添加代码如下
/* pages/search/search.wxss */
view{
background:#fff;
height:100%;
}
input{
color:black;
padding:10px;
margin:10px;
font-size:20px;
border: 2px solid lightgray;
border-radius: 5px;
}
在app.json中配置tabBar导航条信息，注意和前面window选项要有逗号隔开
"tabBar": {
"selectedColor": "#5AC45A",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "天气信息",
"iconPath": "images/wt.png",
"selectedIconPath": "images/wt-active.png"
},
{
"pagePath": "pages/search/search",
"text": "选择城市",
"iconPath": "images/city.png",
"selectedIconPath": "images/city-active.png"
}
]
}
}
在pages添加info页面，所有内容和index一样，除了将 util.getWeatherData(null, function (wd) {中null改成options.cityName，调试运行程序，实现点击tabBar页面切换，并且输入城市名实现显示相应城市天气
