一、项目文件列表
二、小程序配置使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{ pages:[ pages/index/index ], window:{ backgroundtextstyle:light, navigationbarbackgroundcolor: #fff, navigationbartitletext: 天气预报, navigationbartextstyle:black }, networktimeout: { request: 10000 }, debug: true}
由于项目只有一个页面，所以不需要底部tab。另外设置网络请求时间为10秒，并且启用调试模式。
三、小程序逻辑层首先在common.js中使用获取用户当前地理位置接口获取用户的坐标地址，坐标类型选择gcj02。
//获取当前位置坐标
function getlocation(callback) { wx.getlocation({ type: 'gcj02', success: function(res) { callback(true, res.latitude, res.longitude); }, fail: function() { callback(false); } }) }
wx.getlocation调用成功之后，将坐标信息返回给callback函数。失败时将false传给callback函数。
获取到坐标之后，再使用百度接口查询天气。相应的查询代码如下所示。
function getweather(latitude, longitude, callback) { var ak = ;//换成自己的ak,不要用方倍工作室的 var url = https://api.map.baidu.com/telematics/v3/weather?location= + longitude + , + latitude + &output=json&ak= + ak; wx.request({ url: url, success: function(res){ console.log(res); callback(res.data); } }); }
在上述代码中，先定义百度接口的ak，再通过拼接参数构造url的其他部分。然后调用 wx.request 请求天气预报数据。
接下来把上述接口组合起来，组成给应用层的接口，相应代码如下所示。
function loadweatherdata(callback) { getlocation(function(success, latitude, longitude){ getweather(latitude, longitude, function(weatherdata){ callback(weatherdata); }); }); }
最后通过 module.exports对外暴露该接口。代码如下所示。
module.exports = { loadweatherdata: loadweatherdata }
四、小程序页面与视图在页面文件中，使用 require 将公共代码引入。代码如下所示。
//index.jsvar common = require('common.js') page({ data: { weather: {} }, onload: function () { var that = this; common.loadweatherdata(function(data){ that.setdata({ weather: data }); }); } })
在页面的page函数中， data定义为天气的初始化数据，该数据将会以 json 的形式由逻辑层传至渲染层。在 onload 方法中，使用common中的 loadweatherdata 方法获取天气数据并设置到 ui 上，并将取到的数据使用 setdata 方法将它设置到数据层中。
在页面的界面实现中，相应的代码如下所示。
<!--index.wxml--><view class="container"> <view class="header"> <view class="title">{{weather.results[0].currentcity}}</view> <view class="desc">{{weather.date}}</view> </view> <view class="menu-list"> <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this"> <view class="menu-item-main"> <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text> <image class="menu-item-arrow" src="{{item.daypictureurl}}"></image> </view> </view> </view></view>
最外层是一个 class 为 container 的 view，它的里面放了2个子 view，分别用于存放页面头和页面列表。页面头中存放城市名称和时间。页面列表用于存放最近几天的天气情况。
页面的样式表实现如下所示。
.header { padding: 30rpx; line-height: 1; }.title { font-size: 52rpx; }.desc { margin-top: 10rpx; color: #888888; font-size: 28rpx; }.menu-list { display: flex; flex-direction: column; background-color: #fbf9fe; margin-top: 10rpx; }.menu-item { color: #000000; display: flex; background-color: #fff; margin: 10rpx 30rpx; flex-direction: column; }.menu-item-main { display: flex; padding: 40rpx; border-radius: 10rpx; align-items: center; font-size: 32rpx; justify-content: space-between; }.menu-item-arrow { width: 96rpx; height: 96rpx; transition: 400ms; }
上述页面文件和样式表，都是从微信官方demo中移植而来。
最终实现的天气预报小程序效果如图所示。
【相关推荐】
1.微信小程序完整源码下载
2.微信小程序demo：果库跟新版
以上就是小程序开发之天气预报的详细内容。