天氣預報插件HTML代碼_天氣網(wǎng)

紹

天氣網(wǎng)(www.tianqi.com)提供各種免費的在線的天氣預報代碼,免費的天氣預報插件,方便用戶使用調(diào)用,根據(jù)ip地址自動判斷地方天氣預報。

中國全部市縣區(qū)及全球2500多個主要城市實時和5天預報天氣；
自動識別訪問者ip所在城市判斷城市，也可定制默認的城市；
豐富的主題和靈活的樣式定制：可以自定義字體顏色、背景圖案、背景顏色、圖標等內(nèi)容。
通過不同的款式、不同的圖標、不同的背景，您看以組合出上千種調(diào)用代碼！盡可能的方便使用！
適用面廣：代碼適用于常規(guī)網(wǎng)站、博客、社區(qū)論壇等的嵌入。

調(diào)用方法

完整示例：

實時預覽效果

使用說明

使用方式將iframe代碼放入您的網(wǎng)頁HTML的合適位置即可；

根據(jù)實際需要,可以適當調(diào)整寬度，高度。調(diào)整 width="420" height="60"
想獲得背景透明效果，可在代碼中加入 allowtransparency="true"
調(diào)用天氣網(wǎng)的主要url地址為：http://i.tianqi.com/index.php?c=code
不同天氣預報不同展現(xiàn)樣式配置id參數(shù)后的數(shù)字，不同數(shù)字表示不同樣式（范圍：1-162）。例如：&id=12
不同天氣預報圖例風格配置icon參數(shù)后的數(shù)字，不同數(shù)字表示不同風格。例如：&icon=1
不同天氣預報天數(shù)配置num參數(shù)后的數(shù)字，不同的數(shù)字表示預報幾天。（范圍：1-5）例如：&num=5
不同天氣預報字體配置color參數(shù)后的編碼，不同編碼表示不同顏色。例如：&color=%23FFFFFF 表示字體白色
不同天氣預報字體大小site參數(shù)后的數(shù)字，不同數(shù)字表示不同大小，數(shù)字越大，字體越大。例如：&site=12
默認情況下為根據(jù)ip自動獲取當前定位天氣預報，如果需要特殊定位，可使用py參數(shù)。例如：&py=shanghai

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

取數(shù)據(jù)并寫入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日網(wǎng)頁改版
    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 = ['河南', '山東', '陜西', '江蘇', '湖南', '福建', '海南', '云南', '四川', '西藏', '江西', '新疆', '甘肅', '寧夏', '內(nèi)蒙古', '吉林',
                 '遼寧']
    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 = {'市,區(qū)': 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 = {'市,區(qū)': 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 = {'市,區(qū)': 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 = {'市,區(qū)': 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 = {'市,區(qū)': 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 = {'市,區(qū)': 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 = {'市,區(qū)': 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['市,區(qū)']
        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 = ['鄭州', '安陽', '濮陽', '鶴壁', '焦作', '濟源', '新鄉(xiāng)', '三門峽', '洛陽', '平頂山', '許昌', '漯河', '開封', '周口', '商丘', '南陽',
                  '信陽', '駐馬店']
    list_weather1 = []
    for i in All_url:
        url = i['鏈接']
        name = i['市,區(qū)']
        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()

寫入數(shù)據(jù)庫

大家用Axure制作APP原型時，即使高保真效果也只是在視覺層面上實現(xiàn)了原型效果，但頁面中的數(shù)據(jù)內(nèi)容還都只是預先設定好的，例如：使用中繼器、表格等，模擬真實作品。那么有沒有一種方法，讓我們制作的原型也能獲取到真實數(shù)據(jù)呢？

本例通過JavaScript實現(xiàn)實時獲取天氣功能，意在激發(fā)大家興趣，制作更多基于Axure獲取實時信息的案例。廢話不多說，上圖為敬：

這個原型到底有什么獨特之處嗎？在剛打開的時候，整個頁面呈現(xiàn)的數(shù)據(jù)都是之前設定好的，當點擊左上角的『刷新』的時候，頁面會通過一個天氣查詢api獲取到當前真實數(shù)據(jù)，然后加載出來。怎么樣，是不是被它吸引到了？

原理

這個實例中主要用到了Axure的以下幾個功能：

（1）中繼器

由于『昨天』、『今天』、『明天』的天氣概要布局相同，可以使用中繼器更加規(guī)范顯示。

（2）JavaScript

在獲取天氣api時，通過Ajax的GET方式從天氣api服務器中獲取實時數(shù)據(jù)。

（3）全局變量

接收并儲存獲取到的實時數(shù)據(jù)。

（4）字符串函數(shù)

通過indexOf、replace、slice等字符串函數(shù)對接收到的數(shù)據(jù)進行加工，之后存儲到中繼器中。

以下為整個實例流程圖：

功能實現(xiàn)

1. 獲取api數(shù)據(jù)

在本例中，我們通過『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實時數(shù)據(jù)，大家可以看到，數(shù)據(jù)是以json格式返回的，此接口可以獲得當天的天氣詳情和從昨天到未來15天的天氣數(shù)據(jù)。

那么Axure是如何實現(xiàn)調(diào)用api的呢？

我們先設定一個全局變量『tianqi』，當點擊刷新按鈕時，先設置全局變量值為空，再通過『打開鏈接』功能插入Javascript腳本，參數(shù)選擇「鏈接外部網(wǎng)址」，「打開當前窗口」調(diào)用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代碼的意思就是調(diào)用JavaScript，通過「ajax」對象的「GET」方式，從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數(shù)據(jù)，因為這個api不需要傳遞參數(shù)，所以「data」字段并沒有賦值。之后將獲取到的數(shù)據(jù)通過「JSON.stringify」轉(zhuǎn)為字符串后賦值給全局變量「tianqi」。

怎么樣？是不是很神奇。

如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通過這一步，我們的全局變量「tianqi」就已經(jīng)獲取到了實時的天氣數(shù)據(jù)。那么之后怎么加工呢？

2. 格式化數(shù)據(jù)

目前的全局變量值如下圖，是沒辦法直接使用的。那我們?nèi)绾胃袷交@些數(shù)據(jù)呢，這時就需要字符串函數(shù)了。

如圖所示，整個數(shù)據(jù)中包含了2部分，第一部分是當天的天氣情況，第二部分是從昨天開始到之后的十五天天氣情況。由于時間關(guān)系，本次實例中只使用到了「第一部分」和「昨天到明天」的天氣情況。

我們首先創(chuàng)建4個文本框，這4個文本框分別保存「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。然后通過『設置文本』功能對文本框賦值，其中「當天天氣情況」的賦值函數(shù)為：

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

這句話什么意思呢？就是說截取「tianqi」字符串中從「shidu」字段到「yesterday」字段的字符。

3. 更新天氣數(shù)據(jù)

目前我們獲得了4段數(shù)據(jù)，分別為「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。這樣就簡單多了，當我們需要當天的溫度是，直接從「當天天氣情況」數(shù)據(jù)中查找對應的「wendu」就可以了。

目前「當天天氣情況」數(shù)據(jù)如下：

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”優(yōu)”,”wendu“:”16″,”ganmao”:”各類人群可自由活動”,”yesterday

我們很容易看到，「wendu」的數(shù)值是「16」。如何截取呢？我們通過以下函數(shù)將「16」賦值給頁面中的『溫度』字段。其中「LVAR1」為「當天天氣情況」元件的元件文字。

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

4. 更新中繼器數(shù)據(jù)

如前所述，頁面中的「昨天」、「今天」、「明天」天氣情況我們通過中繼器儲存。更新中繼器數(shù)據(jù)我們通過『更新行』動作實現(xiàn)。

對應的賦值函數(shù)同樣通過字符串函數(shù)實現(xiàn)，例如「天氣類型」函數(shù)如下，LVAR1為「昨天天氣情況」元件的元件文字：

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

至此，大功告成，我們的頁面已經(jīng)加載了實時的天氣信息。

后記

這個有用嗎？

作為一名產(chǎn)品經(jīng)理，如果連自己最常用的軟件都不喜歡琢磨，何談自己要開發(fā)的產(chǎn)品呢？

通過這種獲取api的方式，我們可以制作更多實時、真實的案例，在網(wǎng)上有無數(shù)的api，例如大小寫轉(zhuǎn)換、MD5加密、歸屬地查詢、車輛限行，如果我們做的案例中能得當?shù)氖褂眠@些功能，不是更好嗎？更進一步，如果懂得開發(fā)，我們完全可以為了原型演示開發(fā)一個特定的api，實現(xiàn)相應功能。

一些問題

JavaScript接口http限制：目前測試后已知的限制是，如果接口不是https協(xié)議，原型在axshare上無法獲取數(shù)據(jù)，原因是axshare禁止調(diào)用http接口。
JavaScript接口跨域問題：在網(wǎng)上測試了一些接口，發(fā)現(xiàn)使用ajax方法調(diào)用時會產(chǎn)生跨域問題，導致無法接收到數(shù)據(jù)，具體解決方法沒有找到，如果有方法歡迎留言。
接口不穩(wěn)定解決辦法：目前通過循環(huán)調(diào)用直到接口返回正常數(shù)據(jù)時結(jié)束。
獲取到的數(shù)據(jù)是object：記得使用『JSON.stringify』轉(zhuǎn)換接收到的數(shù)據(jù)，因為數(shù)據(jù)可能是json類型，要轉(zhuǎn)換為字符串才能使用。
案例優(yōu)化：本天氣案例基于小米手機系統(tǒng)天氣app。由于時間關(guān)系只制作了首頁，其他滑動及點擊效果之后有時間可能會更新。

歡迎留言討論。

本文由 @escher 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議

在線咨詢

上一篇：干貨｜5分鐘學會追蹤網(wǎng)站所有按鈕-GA4
下一篇：細數(shù)幾款免費好用的在線HTML編輯器