完整的解决方案

Question

您好我想在我的应用程序中实现天气功能。所以对于这个我需要使用天气API.so任何人都可以建议我使用哪个天气API，并教程如何使用jquery Mobile实现这一点。

Answer 1

这里的解决方案很少，这取决于你愿意走多远。你想立即显示最终结果还是想自己解析它？

完整的解决方案

<强> Yahoo! Weather Feed Plugin for jQuery

HTML：

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <div id="test"></div>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

Javascript：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).ready(function () {
        $('#test').weatherfeed(['UKXX0085','EGXX0011','UKXX0061','CAXX0518','CHXX0049']);
    });
});

工作示例：http://jsfiddle.net/Gajotres/7qvJH/

<强> Simple weather plugin

可能是最好的一个，因为你会得到可行的插件，但你可以用它来显示你想要的数据，无论你想要什么。

工作示例（不是我的）：http://jsfiddle.net/fleeting/a4hbL/

HTML：

<!-- Docs at http://simpleweather.monkeecreate.com -->
<div id="weather"></div>

Javascript：

// Docs at http://simpleweather.monkeecreate.com
$(document).ready(function() {
  $.simpleWeather({
    zipcode: '',
    woeid: '2357536',
    location: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

教程

<强> Tutorial 1

来源： Google天气预报

这是一个简单的教程。在那里，你会发现一切都是你自己做的。请注意，它需要PHP和jQuery。

<强> Tutorial 2

来源：雅虎天气预报

另一个很棒的教程。它只需要jQuery。在那里，您将找到使其发挥作用所需的一切。

演示： http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/

虽然本教程有一些缺陷（需要你的Geo位置），但它可以用来手动创建新的天气插件。

如何实现weather API

1 个答案:

完整的解决方案

教程