小程序开发之天气预报

本文介绍如何使用微信小程序开发天气预报功能。一、项目文件列表二、小程序配置使用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，它的里面放了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：果库跟新版以上就是小程序开发之天气预报的详细内容，更多请关注小潘博客其它相关文章！