使用 OpenWeatherAPI 添加和使用天气应用程序（小部件）的当前地理位置

Question

我正在尝试在我尝试制作的天气小部件上添加/使用当前地理位置。 目前，我可以根据外部文件显示城市信息。 我对编码知之甚少。

我不从事该行业，但我正在尝试自学更多有关编码的知识。

我一直在尝试插入它，但一直没有成功。 我知道还有很多代码要写，但我试过的代码都没有用。

我正在考虑是否应该从头开始写一个新的，但我需要永远学习所有必要的数据——感觉。

我在这里和 OpenWeatherAPI 的某个地方读过使用https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} 或 const api = https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${apiKey}

`

#mode of widget (light)
mode = "dark"

#api Key from OpenWeatherMap API
apiKey = "API key"

#list of city IDs from API database
cityList = "5814616,1835847"
units = "metric"


command: "curl -s 'http://api.openweathermap.org/data/2.5/group?id=#{cityList}&units=#{units}&appid=#{apiKey}'"
#http://api.openweathermap.org/data/2.5/group?id=7046,7049,2008861&units=metric&appid=API Key
refreshFrequency: '15m'



render: (output) -> """
  <div id='weather' class='#{mode}'>#{output}</div>
"""

update: (output) ->
    weatherData = JSON.parse(output)
    console.log(weatherData)

    inner = ""
    inner += "<div class='weatherBox'>" 
    
    for i in [0...weatherData.cnt]
        city = weatherData.list[i].name
        condition = weatherData.list[i].weather[0].main
        temperature = Math.round(weatherData.list[i].main.temp)
        rainChance = weatherData.list[i].clouds.all
        windSpeed = Math.round(weatherData.list[i].wind.speed * 10) / 10
        icon = weatherData.list[i].weather[0].icon

        inner += "<div class='city'><div class='leftBox'><img src='clock-weather.widget/icons/weather/#{icon}.svg' alt='#{icon}'></img></div><div class='middleBox'><div class='cityName'>"
        inner += city
        inner += "</div><div class='condition'>"
        inner += condition
        inner += "</div><div class='rainChance'>Chance of Rain "
        inner += rainChance
        inner += " %</div></div><div class='rightBox'><div class='temperature'>"
        inner += temperature
        inner += "°</div><div class='wind'>"
        inner += windSpeed
        inner += " km/h</div></div></div>"

        console.log(city + condition + temperature)
    
    inner += "</div>"

    $(weather).html(inner)


style: """
    color: white
    font-family: Helvetica Light
    font-weight: 400
    width: 100%
    position: absolute
    top: calc(27%)
    font-size: 14px
    
    #weather
        border-radius: 10px
        background-color: rgba(0,0,0,0.45)
        width: 300px
        height: 70px
        position: absolute
        top: 0
        left 50%
        transform: translate(-50%,0)
        letter-spacing: 0px

    #weather.dark
        background-color: rgba(0,0,0,0.0)

    #weather.light
        background-color: rgba(0,0,0,0.0)
        color: black

    #weather.light header
        color: rgba(50,50,50,0.8)

    #weather.dark header
        color: rgba(300,300,300,300.10)

    header 
        padding: 10px 0 10px 0
        display: flex
        flex-direction: row
        position: fixed
        top: 0

    .weatherBox
        overflow-y: scroll
        height: 100%

    .city
        padding: 5px
        display: flex
        flex-direction: row
        //border-top: 1px solid rgba(300,300,300,10)

    .city .leftBox
        width: auto
        padding: 0 15px 0 0
        margin-top: 0 5px 0 0

    .leftBox img
        width: 40px
        height: 40px

    .city .middleBox
        flex-grow: 1
    
    .middleBox .cityName
        font-size: 20px
        line-height: 5px
        font-weight: 500

    .middleBox .condition
        font-size: 13px
        line-height: 20px
        margin-top: 10px

    .middleBox .rainChance
        font-size: 13px
        line-height: 15px

    .city .rightBox
        width: 30%
        text-align: right

    .rightBox .temperature
        font-size: 40px
        line-height: 20px
        font-weight: 300

    .rightBox .wind
        font-size: 13px
        line-height: 45px
    font-weight: 300
        text-align: center
"""

`

Answer 1

我觉得这里一定缺少一些代码，比如调用command和调用render()或update()的任何代码。 我对你的根本问题或你面临的问题是什么感到有点困惑。

我没有看到您共享的示例有任何明显错误，但我也不认为代码本身有任何用处（它只是声明了一些变量和函数，但从不调用它们）。 如果您遇到特定错误或问题，那么此处提交的部分可能是相关的。

也就是说，我确实看到了一些可能值得指出的事情：

1. 您定义的“属性”（变量和函数）是用foo = "bar"和foo: "bar" styles 的混合声明的。这应该适用于这个特定示例（特别是如果您的所有代码都在一个文件中）但是我建议在这里坚持一个或另一个。 =运算符使用“全局”scope 声明变量，而:运算符声明 a（在本例中为隐式和匿名）JavaScript object 的属性。它们的工作方式略有不同，使用单一样式可能更简单，因此您不必无需担心差异。

   具体来说：

   • 如果您打算将所有代码保存在一个文件中，那么只使用=可能没问题。 您所有的变量和函数（基本上）都将具有全局 scope 但这就是您想要的。 这样你就可以只使用foo来引用一个变量或foo(...)来调用一个 function。

   • 如果你想将你的代码“划分”成更多的独立单元（即范围或“命名空间”），使用foo: "bar"赋值风格，但最好将它包装在一个明确的 object 或 class 中，像这样：

      my_app = { foo: "bar" some_function: ()=> console.log "Foo is #{@foo}." }

     等。在这种情况下，您将使用my_app.foo和my_app.some_function()从 object 外部引用这些属性，并使用@foo和@some_function()从 object 内部引用这些属性。没有@它有点例如，如果您要从render() function 中调用update() function（并且在某些情况下可能会产生“未定义”错误），则不明确。

   完全解释 object / : / @的语义可能超出了这个答案的 scope，所以如果这是一个小的一次性练习，那么使用=样式定义可能是最简单的。 换句话说，到处都有foo: <something>将其更改为foo = <something> 。

2. 看起来您可能正在使用对外部程序和辅助进程的调用来从 OpenWeatherMap API 数据中获取数据。 也就是说，我假设您必须在整个程序的某处调用类似child_process.exec(command)的东西，在这种情况下，它将调用名为“curl”的第二个程序来获取 API 响应。

   这在大多数情况下都适用于很多情况，但并不理想。 充其量它更慢并且更容易出现运行时错误。 在最坏的情况下，在某些环境中它根本无法工作。

   最好在节点本身执行 HTTP 事务，而不是分叉到外部进程。 您可以为此使用内置的http 模块（ 此处为示例），但流行的第三方库（如request或axios）可能更易于使用或至少不那么冗长。

3. 在 CoffeeScript 中， """标记（就像您在render function 和style变量中使用的那样）声明了一个多行字符串。 """和下一个"""之间的所有内容都将是同一字符串文字的一部分，包括换行符和未转义的双引号。您可以使用它来简化您在update方法inner所做的字符串连接。例如，您有：

    inner += "<div class='city'>..." inner += city inner += "</div>..."

   你可以写：

    inner += """ <div class='city'>... #{city} </div>... """

   反而。 这两种方式都有效，但"""版本可能更具可读性和更易于编写。

4. style变量中定义的 CSS 代码似乎缺少围绕实际规则的花括号 ( { } )。 例如你有：

    #weather.dark background-color: rgba(0,0,0,0.0)

   通常我会期望：

    #weather.dark { background-color: rgba(0,0,0,0.0) }

   所以除非有某种后处理逻辑应用于这个 CSS 我认为你可能需要用{和}包装每个缩进部分。

5. 此外，您似乎正在使用//在style变量的 CSS 代码中创建单行注释。 标准 CSS 不使用该语法进行注释。 您需要使用开始/*和结束*/语法，即使是单行。 （因为//和属性名称之间没有空格，所以看起来//语法在这里起作用，但这不是真正的注释，只是一个无效的属性名称。）