微信小程式開發 1 天氣預報

2021-09-25 15:31:48 字數 2234 閱讀 7695

}由於專案只有乙個頁面,所以不需要底部tab。另外設定網路請求時間為10秒,並且啟用除錯模式。

首先在common.js中使用獲取使用者當前地理位置介面獲取使用者的座標位址,座標型別選擇gcj02。

//獲取當前位置座標

function

getlocation(callback) ,

fail:

function

() })

}

function

getweather(latitude, longitude, callback)

});}

function

loadweatherdata(callback) );

});}

最後通過 module.exports對外暴露該介面。**如下所示。

module.exports =
在頁面檔案中,使用 require 將公共**引入。**如下所示。

//

index.js

var common = require('common.js')

page(

},onload:

function

() );

}); }})

在頁面的page函式中, data定義為天氣的初始化資料,該資料將會以 json 的形式由邏輯層傳至渲染層。在 onload 方法中,使用common中的 loadweatherdata 方法獲取天氣資料並設定到 ui 上,並將取到的資料使用 setdata 方法將它設定到資料層中。

在頁面的介面實現中,相應的**如下所示。

<

view

class

="container"

>

<

view

class

="header"

>

<

view

class

="title"

>}

view

>

<

view

class

="desc"

>}

view

>

view

>

<

view

class

="menu-list"

>

<

view

class

="menu-item"

wx:for

="}"

wx:key

="*this"

>

<

view

class

="menu-item-main"

>

<

text

class

="menu-item-name"

>} } } }

text

>

<

image

class

="menu-item-arrow"

src="}"

>

image

>

view

>

view

>

view

>

view

>

最外層是乙個 class 為 container 的 view,它的裡面放了2個子 view,分別用於存放頁面頭和頁面列表。頁面頭中存放城市名稱和時間。頁面列表用於存放最近幾天的天氣情況。

頁面的樣式表實現如下所示。

微信公眾平台開發(4)天氣預報

北京 output json ak yourak 引數型別 引數名稱 是否必須 具體描述 string location true 輸入城市名或經緯度,城市名稱如 北京或者131,經緯度格式為lng,lat座標如 location 116.305145,39.982368 全國值為all,返回省會城...

天氣預報文本版微信 微信公眾平台開發(4)天氣預報

一 資料介面 介面北京 output json ak yourak 介面引數說明 引數型別引數名稱是否必須具體描述 string location true 輸入城市名或經緯度,城市名稱如 北京或者131,經緯度格式為lng,lat座標如 location 116.305145,39.982368 ...

微信開發二三事 功能應用一 天氣預報

好吧,又斷更了幾天.首先,我們來看看介面 北京 output json ak yourkey。這裡有幾個主要的引數。1 location 你要查詢天氣的城市 2 output json 以json資料格式返回,當然,這裡還可以用xml資料返回 output xml 3 ak 應用密匙。這個ak是需要...