微信小程序开发显示城市天气
本案例实现动态显示城市天气的功能,案例效果如下:
首先分析制作的思路:
1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径。
2.在main.js文件中,在onLoad()函数中调用loadInfo()函数。
3. 自定义获取位置的函数loadInfo(),调用wx.getLocation,用于获取当前的纬度(latitude)和经度(longitude)。在loadInfo()函数中接着调用loadCity()函数。
4. 自定义获取城市的函数loadCity(),调用wx.request,在“百度地图开放平台”网站中注册自己的AK,通过获取城市信息的网址(http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json)实现当前城市名称的获取。
在loadCity()函数中接着调用loadWeather()函数。
5.自定义获取天气的函数loadWeather(),根据已有的城市名称,通过获取天气信息的网址(http://wthrcdn.etouch.cn/weather_mini?city=城市名)实现天气信息的数据获取。
6.在main.wxml文件中,未来天气部分通过import调用了自定义模板文件itemtpl.wxml。
然后分析项目中文件的源码。
app.json文件的代码如下:
{
"pages":[
"pages/main/main",
"pages/template/itemtpl",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天气",
"navigationBarTextStyle":"black"
}
}
main.wxml的代码如下:
<view class='cont'>
<!-- 今日天气-->
<view class='today'>
<view class='info'>
<view class='tempe'>{{today.wendu}}°C</view>
<view class='weather'>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view>
<view>温馨提示:{{today.ganmao}}</view>
<view class='city'>{{city}}</view>
</view>
</view>
<!-- 未来天气-->
<import src="../template/itemtpl"/>
<view class='future'>
<block wx:for="{{future}}">
<template is="future-item" data="{{item}}"/>
</block>
</view>
</view>
main.wxss文件的代码如下:
/**/
.cont{
font-size:30rpx;
width:100%;
height:100%;
}
.today{
padding:50rpx 0 0 0;
height:50%;
}
.info{
padding:20rpx;
background:rgba(0,0,0,.8);
line-height: 1.5em;
color:#eee;
}
.tempe{
font-size:90rpx;
text-align: center;
margin:30rpx 0;
}
.weather{
text-align: center;
}
.city{
font-size:40rpx;
color:#f60;
text-align: right;
margin: 30rpx 10rpx 0 0;
}
.future{
display:flex;
flex-direction: row;
height:100%;
padding:20rpx 0 20rpx 10rpx;
background:rgba(0,0,0,.8);
text-align: center;
margin:50rpx 0 70rpx 0;
color:#eee;
}
.future-item{
min-height: 100%;
width:160rpx;
margin: 0 10rpx;
border:solid 1px #f90;
padding:10rpx 0 0 0;
line-height:2em;
}
main.js文件的代码如下:
//
Page({
data: {
// weatherData:''
city:"" ,
today:{},
future:{},
},
onLoad: function () {
this. loadInfo();
},
//自定义获取位置
loadInfo:function(){
var page=this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(latitude, longitude);
page.loadCity(latitude, longitude);
}
})
} ,
//自定义获取城市
loadCity: function (latitude, longitude){
var page = this;
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=自己的AK &location=' + latitude + ',' + longitude + '&output=json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var city=res.data.result.addressComponent.city;
city=city.replace("市","");
page.setData({
city:city
});
page.loadWeather(city);
}
})
},
//自定义获取天气
loadWeather: function (city) {
var page = this;
wx.request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + city,
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var future=res.data.data.forecast;
var todayInfo=future.shift();
var today=res.data.data;
today.todayInfo=todayInfo;
page.setData({
today:today,
future:future,
});
}
})
}
})
itemtpl.wxml的代码如下:
<!-- 模板文件-->
<template name="future-item">
<view class="future-item">
<view>{{item.date}}</view>
<view>{{item.type}}</view>
<view>{{item.fengxiang}}</view>
<view>{{item.low}}</view>
<view>{{item.high}}</view>
</view>
</template>
至此,案例制作完成。
转自:https://www.toutiao.com/a6511667318601286157/
微信小程序开发显示城市天气的更多相关文章
- 解决Mac版微信小程序开发工具打开后无法显示二维码
问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序开发心得--动画机制
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发(1) 天气预报
本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表 二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. ...
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
随机推荐
- Java 13 即将发布,新特性必须抢先看!
作者:h4cd 本文转载自开源中国(ID:oschina2013) 由于 Java 现在采取"半年发布一次新版本"的模式,所以 Java 12 的下一个版本 Java 13/JDK ...
- tomcat+nginx 单机部署多应用LINUX
1.首先虚拟机上安装nginx 和tomcat,这里安装就不赘述了. nginx安装可以参考https://www.linuxidc.com/Linux/2016-09/134907.htm,相关配置 ...
- jQuery部分疑问及小结
2015/12/28 判断浏览器版本和类型 var mode = document.documentMode || 0;(jquery1.9.1不支持ie 8,9,10) var setExpr = ...
- ReentrantReadWriteLock的相关使用
ReentrantLock具有完全互斥排他的效果,同一时间只有一个线程执行ReentrantLock.lock()方法后面的任务,这样虽然能够保证线程安全性,但是效率是比较低的 ReentrantRe ...
- 嵌入式 emmc 中 安装 烧录 内核 kernel,设备树 devicetree ,根文件系统 rootfs
一般调试嵌入式开发板喜欢选择 利用 TFTP 传送 内核与 设备树, 利用 nfs 加载根文件系统. uboot 环境变量 设置如下: bootargs=root=/dev/nfs rw nfs ...
- 总结下awk基本用法
命令格式: awk '{commands} [{other commands}]' awk 'condition{commands} [{other commands}]' 如:awk '$4==&q ...
- Ansible批量自动化管理工具(二)
Ansible批量自动化管理工具(二) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...
- Spyder中的一些快捷键
熟练spyder中的一些快捷键后,能极大提升code效率. 这里列出常用的快捷键.(注:在spyder导航栏Tools-Preferences-Keyboard shortcut中有所有的快捷键) T ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- 【hihoCoder】每周一题(从week 220开始)
2018/9/17-2018/9/23 week 220 push button I 题目链接:https://hihocoder.com/contest/hiho220/problem/1 有N个 ...