整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

天气预报插件HTML代码_天气网

绍

天气网(www.tianqi.com)提供各种免费的在线的天气预报代码,免费的天气预报插件,方便用户使用调用,根据ip地址自动判断地方天气预报。

  1. 中国全部市县区及全球2500多个主要城市实时和5天预报天气；
  2. 自动识别访问者ip所在城市判断城市，也可定制默认的城市；
  3. 丰富的主题和灵活的样式定制：可以自定义字体颜色、背景图案、背景颜色、图标等内容。
  4. 通过不同的款式、不同的图标、不同的背景，您看以组合出上千种调用代码！尽可能的方便使用！
  5. 适用面广：代码适用于常规网站、博客、社区论坛等的嵌入。

调用方法

完整示例：

<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12"></iframe>

实时预览效果

使用说明

使用方式将iframe代码放入您的网页HTML的合适位置即可；

  • 根据实际需要,可以适当调整宽度，高度。调整 width="420" height="60"
  • 想获得背景透明效果，可在代码中加入 allowtransparency="true"
  • 调用天气网的主要url地址为：http://i.tianqi.com/index.php?c=code
  • 不同天气预报不同展现样式配置id参数后的数字，不同数字表示不同样式（范围：1-162）。例如：&id=12
  • 不同天气预报图例风格配置icon参数后的数字，不同数字表示不同风格。例如：&icon=1
  • 不同天气预报天数配置num参数后的数字，不同的数字表示预报几天。（范围：1-5）例如：&num=5
  • 不同天气预报字体配置color参数后的编码，不同编码表示不同颜色。例如：&color=%23FFFFFF 表示字体白色
  • 不同天气预报字体大小site参数后的数字，不同数字表示不同大小，数字越大，字体越大。例如：&site=12
  • 默认情况下为根据ip自动获取当前定位天气预报，如果需要特殊定位，可使用py参数。例如：&py=shanghai

所有样式示例，可查看本人博客：http://youngsforever.yicp.vip/archives/tianqiyubao

取数据并写入xls文件

import csv
import random

import requests
from lxml import etree

# 城市列表如下：
# http://hebei.weather.com.cn/m2/j/hebei/public/city.min.js
# 目前支持北京、天津、重庆三个城市7天天气预报
# 支持河南天气更新
# 18点后获取天气预报将get_text()方法中的0改为1
headers = [
    "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36",
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 "
    "Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0",
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 "
    "Safari/537.75.14",
    "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)",
    'Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11',
    'Opera/9.25 (Windows NT 5.1; U; en)',
    'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)',
    'Mozilla/5.0 (compatible; Konqueror/3.5; Linux) KHTML/3.5.5 (like Gecko) (Kubuntu)',
    'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.12) Gecko/20070731 Ubuntu/dapper-security Firefox/1.5.0.12',
    'Lynx/2.8.5rel.1 libwww-FM/2.14 SSL-MM/1.4.1 GNUTLS/1.2.9',
    "Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.7 (KHTML, like Gecko) Ubuntu/11.04 Chromium/16.0.912.77 "
    "Chrome/16.0.912.77 Safari/535.7",
    "Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:10.0) Gecko/20100101 Firefox/10.0 "]


def get_province():
    url = 'http://www.weather.com.cn/province/'
    r = requests.get(url, headers={'User-Agent': headers[random.randint(1, 11)]})
    # encode解码，将ISO-8859-1解码成unicode
    html = r.text.encode("ISO-8859-1")
    # decode编码,将unicode编码成utf-8
    html = html.decode("utf-8")
    html1 = etree.HTML(html)
    data = html1.xpath('/html/body/div[2]/div[2]/ul/li/a')
    list_province = []
    for i in data:
        item = {'省辖市': i.text, '链接': i.get('href')}
        list_province.append(item)
    return list_province


def get_city_link(ul, ulink, list_weather):
    ul = ul
    ulink = ulink
    if ul in list_weather:
        url = ulink
        r = requests.get(url, headers={'User-Agent': headers[random.randint(1, 11)]})
        # encode解码，将ISO-8859-1解码成unicode
        html = r.text.encode("ISO-8859-1")
        # decode编码,将unicode编码成utf-8
        html = html.decode("utf-8")
        html1 = etree.HTML(html)
        return html1
    else:
        pass


def get_special(ulink):
    url = ulink
    r = requests.get(url, headers={'User-Agent': headers[random.randint(1, 11)]})
    # encode解码，将ISO-8859-1解码成unicode
    html = r.text.encode("ISO-8859-1")
    # decode编码,将unicode编码成utf-8
    html = html.decode("utf-8")
    html1 = etree.HTML(html)
    return html1


def get_city(list_):
    # 上海天气10月23日网页改版
    list_all = ['北京', '天津', '重庆']
    list_null = ['山西', '湖北', '青海']
    # 安徽  http://www.weather.com.cn/anhui/index.shtml
    # 完整url
    # /html/body/div[1]/div[3]/div/span/a[1]
    # 广东
    # /html/body/div[2]/ul/li[6]/a
    # 广西
    # /html/body/div[1]/div[1]/div[2]/div/span/a[4]
    # 黑龙江
    # /html/body/div[3]/div/a[4]
    list_special_city = ['台湾', '香港', '澳门', '河北']
    list_http = ['河南', '山东', '陕西', '江苏', '湖南', '福建', '海南', '云南', '四川', '西藏', '江西', '新疆', '甘肃', '宁夏', '内蒙古', '吉林',
                 '辽宁']
    list_city = []
    for i in list_:
        ul = i['省辖市']
        ulink = i['链接']
        if ul in list_all:
            html = get_city_link(ul, ulink, list_all)
            data = html.xpath('/html[1]/body[1]/div[1]/div[2]/div[1]/span[1]/a')
            for i in data:
                item = {'市,区': i.text, '链接': i.get('href')}
                list_city.append(item)
        if ul in list_http:
            html1 = get_city_link(ul, ulink, list_http)
            data1 = html1.xpath('/html/body/div[1]/div[2]/div/span/a')
            for i in data1:
                item = {'市,区': i.text, '链接': (ulink + i.get('href'))}
                list_city.append(item)
        if ul in list_null:
            html2 = get_city_link(ul, ulink, list_null)
            data2 = html2.xpath('/html/body/div[2]/div[2]/div/span/a')
            for i in data2:
                item = {'市,区': i.text, '链接': (ulink + i.get('href'))}
                list_city.append(item)
        if ul in list_special_city:
            pass
        if ul == '安徽':
            html = get_special(' http://www.weather.com.cn/anhui/index.shtml')
            data = html.xpath('/html/body/div[1]/div[3]/div/span/a')
            for i in data:
                item = {'市,区': i.text, '链接': i.get('href')}
                list_city.append(item)
        if ul == '广东':
            html = get_special(ulink)
            data = html.xpath(' /html/body/div[2]/ul/li[6]/a')
            for i in data:
                item = {'市,区': i.text, '链接': (ulink + i.get('href'))}
                list_city.append(item)
        if ul == '广西':
            html = get_special(ulink)
            data = html.xpath('/html/body/div[1]/div[1]/div[2]/div/span/a')
            for i in data:
                item = {'市,区': i.text, '链接': (ulink + i.get('href'))}
                list_city.append(item)
        if ul == '黑龙江':
            html = get_special(ulink)
            data = html.xpath('/html/body/div[3]/div/a')
            for i in data:
                item = {'市,区': i.text, '链接': (ulink + i.get('href'))}
                list_city.append(item)
    return list_city


# 北京、天津、重庆
def get_weather():
    # 风向仅供参考
    All_url = get_city(get_province())
    list_weather = []
    for i in All_url:
        url = i['链接']
        name = i['市,区']
        r = requests.get(url, headers={'User-Agent': headers[random.randint(1, 11)]})
        # encode解码，将ISO-8859-1解码成unicode
        html = r.text.encode("ISO-8859-1")
        # decode编码,将unicode编码成utf-8
        html = html.decode("utf-8")
        html1 = etree.HTML(html)
        data_time = html1.xpath('//div[@class="con today clearfix"]//ul[@class="t clearfix"]//li//h1')
        data_weather = html1.xpath('//div[@class="con today clearfix"]//ul[@class="t clearfix"]//li//p[@class="wea"]')
        data_temperature = html1.xpath(
            '//div[@class="con today clearfix"]//ul[@class="t clearfix"]//li//p[@class="tem"]//i')
        data_wind_level = html1.xpath(
            '//div[@class="con today clearfix"]//ul[@class="t clearfix"]//li//p[@class="win"]//i')
        data_wind = html1.xpath(
            '//div[@class="con today clearfix"]//ul[@class="t clearfix"]//li//p[@class="win"]//em//span')
        for i in range(0, len(data_time)):
            Item = {'城市': name,
                    '时间': data_time[i].text,
                    '天气': data_weather[i].text,
                    '温度': data_temperature[i].text,
                    '风力': data_wind_level[i].text,
                    '风向': data_wind[i].get('title')}
            list_weather.append(Item)
    csv_File = open("D:\\beijing_tianjin_chongqing_weather.csv", 'w', newline='')
    try:
        writer = csv.writer(csv_File)
        writer.writerow(('城市', '时间', '天气', '实时温度', '风力', '风向'))
        for i in list_weather:
            writer.writerow((i['城市'], i['时间'], i['天气'], i['温度'], i['风力'], i['风向']))
    finally:
        csv_File.close()
    print('北京，重庆，天津天气获取成功')


def get_henan():
    All_url = get_city(get_province())
    list_henan = ['郑州', '安阳', '濮阳', '鹤壁', '焦作', '济源', '新乡', '三门峡', '洛阳', '平顶山', '许昌', '漯河', '开封', '周口', '商丘', '南阳',
                  '信阳', '驻马店']
    list_weather1 = []
    for i in All_url:
        url = i['链接']
        name = i['市,区']
        if name in list_henan:
            url = url
            r = requests.get(url, headers={
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, '
                              'like Gecko) Chrome/78.0.3904.70 Safari/537.36'})
            # encode解码，将ISO-8859-1解码成unicode
            html = r.text.encode("ISO-8859-1")
            # decode编码,将unicode编码成utf-8
            html = html.decode("utf-8")
            html1 = etree.HTML(html)
            url_true = html1.xpath('//div[@class="gsbox"]//div[@class="forecastBox"]//dl//dt//a[1]')
            Item = {
                '城市': name,
                '链接': url_true[0].get('href')
            }
            list_weather1.append(Item)
    return list_weather1


def get_text():
    list_weather1 = []
    list_weather = get_henan()
    for i in list_weather:
        url = i['链接']
        name = i['城市']
        r = requests.get(url,
                         headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, '
                                                'like Gecko) Chrome/78.0.3904.70 Safari/537.36'})
        # encode解码，将ISO-8859-1解码成unicode
        html = r.text.encode("ISO-8859-1")
        # decode编码,将unicode编码成utf-8
        html = html.decode("utf-8")
        html1 = etree.HTML(html)
        data_time = html1.xpath('//div[@class="left fl"]//ul//li//h1')
        data_high_temperature = html1.xpath('//div[@class="left fl"]//ul//li//p[@class="tem"]//span')
        data_low_temperature = html1.xpath('//div[@class="left fl"]//ul//p[@class="tem"]//i')
        data_wind = html1.xpath('//div[@class="left fl"]//ul//li//p[@class="win"]//em//span')  # 获取title标签
        data_wind_level = html1.xpath('//div[@class="left fl"]//ul//li//p[@class="win"]//i')
        data_weather = html1.xpath('//div[@class="left fl"]//ul//li//p[@class="wea"]')  # 获取title标签
        for i in range(0, len(data_time)):
            Item = {'城市': name,
                    '时间': data_time[i].text,
                    '天气': data_weather[i].get('title'),
                    '高温': data_high_temperature[i - 1].text,
                    '低温': data_low_temperature[i].text,
                    '风向': data_wind[i].get('title'),
                    '风力': data_wind_level[i].text
                    }
            list_weather1.append(Item)
    csv_File = open("D:\\henan_weather.csv", 'w', newline='')
    try:
        writer = csv.writer(csv_File)
        writer.writerow(('城市', '时间', '天气', '高温', '低温', '风力', '风向'))
        for i in list_weather1:
            writer.writerow((i['城市'], i['时间'], i['天气'], i['高温'], i['低温'], i['风力'], i['风向']))
    finally:
        csv_File.close()
    print('河南天气获取成功')


if __name__ == '__main__':
    get_text()
    get_weather()

写入数据库

大家用Axure制作APP原型时，即使高保真效果也只是在视觉层面上实现了原型效果，但页面中的数据内容还都只是预先设定好的，例如：使用中继器、表格等，模拟真实作品。那么有没有一种方法，让我们制作的原型也能获取到真实数据呢？

本例通过JavaScript实现实时获取天气功能，意在激发大家兴趣，制作更多基于Axure获取实时信息的案例。废话不多说，上图为敬：

这个原型到底有什么独特之处吗？在刚打开的时候，整个页面呈现的数据都是之前设定好的，当点击左上角的『刷新』的时候，页面会通过一个天气查询api获取到当前真实数据，然后加载出来。怎么样，是不是被它吸引到了？

原理

这个实例中主要用到了Axure的以下几个功能：

（1）中继器

由于『昨天』、『今天』、『明天』的天气概要布局相同，可以使用中继器更加规范显示。

（2）JavaScript

在获取天气api时，通过Ajax的GET方式从天气api服务器中获取实时数据。

（3）全局变量

接收并储存获取到的实时数据。

（4）字符串函数

通过indexOf、replace、slice等字符串函数对接收到的数据进行加工，之后存储到中继器中。

以下为整个实例流程图：

功能实现

1. 获取api数据

在本例中，我们通过『http://t.weather.sojson.com/api/weather/city/101010100』api获取到北京天气的实时数据，大家可以看到，数据是以json格式返回的，此接口可以获得当天的天气详情和从昨天到未来15天的天气数据。

那么Axure是如何实现调用api的呢？

我们先设定一个全局变量『tianqi』，当点击刷新按钮时，先设置全局变量值为空，再通过『打开链接』功能插入Javascript脚本，参数选择「链接外部网址」，「打开当前窗口」调用api并赋值给全局变量。

javascript：

$.ajax({

method: ‘GET’,

url: ‘http://t.weather.sojson.com/api/weather/city/101010100’,

data: {}

}).done(function(msg){

$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));

});

这段JavaScript代码的意思就是调用JavaScript，通过「ajax」对象的「GET」方式，从「http://t.weather.sojson.com/api/weather/city/101010100」地址获取数据，因为这个api不需要传递参数，所以「data」字段并没有赋值。之后将获取到的数据通过「JSON.stringify」转为字符串后赋值给全局变量「tianqi」。

怎么样？是不是很神奇。

如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通过这一步，我们的全局变量「tianqi」就已经获取到了实时的天气数据。那么之后怎么加工呢？

2. 格式化数据

目前的全局变量值如下图，是没办法直接使用的。那我们如何格式化这些数据呢，这时就需要字符串函数了。

如图所示，整个数据中包含了2部分，第一部分是当天的天气情况，第二部分是从昨天开始到之后的十五天天气情况。由于时间关系，本次实例中只使用到了「第一部分」和「昨天到明天」的天气情况。

我们首先创建4个文本框，这4个文本框分别保存「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。然后通过『设置文本』功能对文本框赋值，其中「当天天气情况」的赋值函数为：

[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]

这句话什么意思呢？就是说截取「tianqi」字符串中从「shidu」字段到「yesterday」字段的字符。

3. 更新天气数据

目前我们获得了4段数据，分别为「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。这样就简单多了，当我们需要当天的温度是，直接从「当天天气情况」数据中查找对应的「wendu」就可以了。

目前「当天天气情况」数据如下：

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”优”,”wendu“:”16″,”ganmao”:”各类人群可自由活动”,”yesterday

我们很容易看到，「wendu」的数值是「16」。如何截取呢？我们通过以下函数将「16」赋值给页面中的『温度』字段。其中「LVAR1」为「当天天气情况」元件的元件文字。

[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]

4. 更新中继器数据

如前所述，页面中的「昨天」、「今天」、「明天」天气情况我们通过中继器储存。更新中继器数据我们通过『更新行』动作实现。

对应的赋值函数同样通过字符串函数实现，例如「天气类型」函数如下，LVAR1为「昨天天气情况」元件的元件文字：

[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]

至此，大功告成，我们的页面已经加载了实时的天气信息。

后记

这个有用吗？

作为一名产品经理，如果连自己最常用的软件都不喜欢琢磨，何谈自己要开发的产品呢？

通过这种获取api的方式，我们可以制作更多实时、真实的案例，在网上有无数的api，例如大小写转换、MD5加密、归属地查询、车辆限行，如果我们做的案例中能得当的使用这些功能，不是更好吗？更进一步，如果懂得开发，我们完全可以为了原型演示开发一个特定的api，实现相应功能。

一些问题

  • JavaScript接口http限制：目前测试后已知的限制是，如果接口不是https协议，原型在axshare上无法获取数据，原因是axshare禁止调用http接口。
  • JavaScript接口跨域问题：在网上测试了一些接口，发现使用ajax方法调用时会产生跨域问题，导致无法接收到数据，具体解决方法没有找到，如果有方法欢迎留言。
  • 接口不稳定解决办法：目前通过循环调用直到接口返回正常数据时结束。
  • 获取到的数据是object：记得使用『JSON.stringify』转换接收到的数据，因为数据可能是json类型，要转换为字符串才能使用。
  • 案例优化：本天气案例基于小米手机系统天气app。由于时间关系只制作了首页，其他滑动及点击效果之后有时间可能会更新。

欢迎留言讨论。

本文由 @escher 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议


在线咨询
上一篇：干货｜5分钟学会追踪网站所有按钮-GA4
下一篇：细数几款免费好用的在线HTML编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 连江县 睢宁县 广州 伍家岗区 门源回族自治县 扎赉特旗 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服