本案例实现动态显示城市天气的功能,案例效果如下:

首先分析制作的思路:

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/

微信小程序开发显示城市天气的更多相关文章

  1. 解决Mac版微信小程序开发工具打开后无法显示二维码

    问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...

  2. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  4. 微信小程序开发心得--动画机制

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...

  5. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  6. 微信小程序开发(1) 天气预报

    本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表 二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. ...

  7. 微信小程序开发系列六:微信框架API的调用

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  8. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  9. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

随机推荐

  1. 转 loadrunner11 录制 chrome 浏览器

    chrome不设置代理的原始状态 图1 [LoadRunner]解决LR11无法录制Chrome浏览器脚本问题   LoadRunner录制脚本时,遇到高版本的IE.FireFox,或者Chrome浏 ...

  2. Python matplotlib 交互模式

    在交互模式下一定要执行plt.pause(0.0001)  才会显示图像

  3. SpringBoot扫描不到类,注入失败A component required a bean of type 'XXService' that could...

    SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! “Application类”是指SpringBoot项目入口类.这个类的位置很关键: 如果App ...

  4. [已解决]报错: Version in docker-compose is unsupported

    docker compose将解析版本为"2",而不是"3.3".应该改为: version: "2"

  5. ionic3 emoj表情包插件 emoji-picker

    1.效果演示: 2.安装扩展包依赖 npm i @ionic-tools/emoji-picker --save 3.app.module.ts中导入插件 import { EmojiPickerMo ...

  6. windows如何在当前路径下快速打开cmd

    直接在打开的文件夹地址栏当中输入cmd即可.

  7. linux系统物理cpu信息查询

    1.查看CPU型号          cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c  2.查看物理CPU的个数            ca ...

  8. master挂了的话pm2怎么处理 使用pm2方便开启node集群模式

    本文为转载 Introduction As you would probably know, Node.js is a platform built on Chrome's JavaScript ru ...

  9. c++之初始化列表

    #include<iostream> using namespace std; class Person{ public: int m_a; int m_b; int m_c; Perso ...

  10. Spring boot自定义拦截器和拦截器重定向配置简单介绍

    大家好: 本文简单介绍一下用于权限控制的Spring boot拦截器配置,拦截器重定向问题. 开发工具:jdk1.8   idea2017(付费版,网上找的破解教程) 1,首先使用idea创建一个Sp ...