当前位置: 首页 > news >正文

基于Android天气预报小程序功能,微信小程序实例--- 5.1天气预报

在这一节中,我们将开发一个天气预报的小程序,使用的数据接口为百度天气预报的接口,该接口可以根据经纬度坐标查询所在地天气。

准备工作

使用百度接口需要预先申请。在本书第4章中有百度ak的申请方法以及百度天气预报接口介绍。所不同的是第4章使用城市名称查询天气,而本节中使用坐标进行查询。

在小程序中,将会向该地址发起请求,需要预先将百度接口所在域名设置到小程序的request合法域名中。如图21-7所示。

0dddf769126d2ef2884d0615e227b027.png

(此图片来源于网络,如有侵权,请联系删除! )

图21-7小程序服务器配置

需要注意的是,小程序目前只支持https协议,使用之前需要确定域名接口是否支持。如果是自己的服务器,需要配置安全证书等操作。

在微信Web开发者工具中,点击左侧导航,在“项目”中将域名信息进行刷新同步。如图21-8所示。

4a9946dabdb009b3cd4095f9cdb44eef.png

(此图片来源于网络,如有侵权,请联系删除! )

图21-8 域名配置同步

选项配置

项目文件列表如图21-9所示,程序只有一个页面index,该页面有相应的js、wxml、wxss文件,另外有一个公共模块common.js用于获取外部数据。

0eeda88b1d5b33f3914263e15d8d6394.png

(此图片来源于网络,如有侵权,请联系删除! )

图21-9域名配置同步

小程序配置文件app.json的配置如下所示。

{

"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 = "ECe3698802b9bf4457f0e01b544eb6bb";

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.js

var 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 方法将它设置到数据层中。

在页面的界面实现中,相应的代码如下所示。

{{weather.results[0].currentCity}}

{{weather.date}}

{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}

最外层是一个 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中移植而来。

最终实现的天气预报小程序效果如图21-10所示。

04e772e2b1f77f9d4627e55d5bb627f3.png

(此图片来源于网络,如有侵权,请联系删除! )

图21-10天气预报小程序效果图

相关文章:

  • ffmpeg4android怎么用,README.md · idoppler/FFmpeg4Android - Gitee.com
  • android 23 httpclient 替代,android api23 抛弃了httpClient,许多基于httpClient第三方库怎么办?...
  • 魅族android n内测报名,魅族首批Android 10内测版今日起开始推送 通过内测考核后可参与报名...
  • 用eclipse编写html页面,eclipse可以开发vue吗?
  • 高考成绩查询2021略阳,2021年汉中高考成绩排名及成绩公布时间什么时候出来
  • 银川二中2021高考模拟考试成绩查询,银川市第二中学2020—2021年第一学期高一月考成绩分享会...
  • 微型计算机普遍使用的编码是什么,微型计算机中普遍使用的字符编码是什么
  • 怎么把vue改写成html,vue将字符串转为为html
  • html5代码保护,常用的Html5代码
  • 学计算机有作业吗,有没有电脑高手,大学计算机专业的作业
  • 进村进社考试的计算机知识,山西农村信用社考试:计算机知识知识点(三)
  • html5绘制圆角矩形,js绘制圆角矩形
  • 计算机的服务怎么添加用户名和密码,Windows2003怎么添加管理员账号与找回密码Windows服务器操作系统 -电脑资料...
  • 绥化计算机学校地址,绥化市职业技术教育中心学校
  • 唤醒计算机时无法更换密码,Win10没有唤醒时需要密码选项应如何取消唤醒密码...