02 微信小程式例項開發 天氣情況

2021-07-26 03:22:50 字數 2249 閱讀 8047

wx.getlocation:通過官方文件的api中可以看到wx.getlocation可以獲取到當前的地理位置和速度,不過獲取到的地理位置只是經緯度,而不是真正的城市名稱,但我們可以根據這個經緯度來獲取城市名稱等資訊(需要用到第三方介面),再通過城市名稱和城市id獲取對應的天氣資訊。

.js邏輯層增加函式:

data:, //當天天氣情況

indexs:{}, //當天天氣詳情說明

forecast:{} //未來4天的天氣情況

},onload:function

(options),

//獲取當前的位置資訊,即經緯度

loadlocation: function

() })

},//通過經緯度獲取城市

loadcity: function

(latitude, longitude) ,

method: 'get', // options, get, head, post, put, delete, trace, connect

// header: {}, // 設定請求的 header

success: function

(res));

page.loadid(city);}})

},//通過城市名稱獲取城市的唯一id

loadid: function

(city) ,

header: ,

method: 'get', // options, get, head, post, put, delete, trace, connect

success: function

(res));

page.loadweather(city, cityid);}})

},//通過城市名稱和城市id獲取天氣情況

loadweather: function

(city, areaid) ,

header: ,

method: 'get', // options, get, head, post, put, delete, trace, connect

success: function

(res));}})

},//事件繫結,跳轉到天氣詳情頁面

gotodetail: function

(event) )

}

注意:
class="main-container">

src="../templates/today-tpl"/>

bindtap="gotodetail">

is="today-tpl"

data="}"/>

view>

src="../templates/index-tpl"/>

class="index-content">

wx:for="}"

wx:key="item"

wx:for-index="idx">

is="index-tpl"

data="}">

template>

block>

view>

src="../templates/forecast-tpl"/>

class="forecast">

wx:for="}"

wx:key="item">

is="forecast-tpl"

data="}"/>

block>

view>

view>

模板檔案其實就是wxml檔案

name="today-tpl">

class="today">

class="city">}view>

class="date">} }view>

class="temp">}view>

class="weather">} }/}view>

class="wd">}view>

view>

template>

注意:關於模板的描述可以參考官方文件* 模板和 引用 *。

以上只是貼出了一些相對關鍵的**,直接使用無法執行。

微信小程式開發02

今天完成小程式的內容展示頁,通過不斷地嘗試學會了新聞列表展示頁樣式的簡單設定,以及資料繫結的相關知識,但並未來得及實現其功能。本次設計學會使用了swiper元件,為後面使用templete模板打下鋪墊。使用以下 作為講解 1 作為元件的容器,其中含有三項。其中注意的是,item中的屬性設定應在swi...

微信小程式開發

一 開發準備 二 開發工具的使用 編碼目錄結構 1 wxml的功能 資料繫結 資料繫結使用 mustache 語法 雙大括號 將變數包起來。列表渲染 wx for 在元件上使用 wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。block wx for 類似 block w...

微信小程式開發 微信繫結

官方api提供的request請求的url wx.login 請求引數 傳送請求 解析相應內容 換成json物件 jsonobject json jsonobject.fromobject sr 獲取會話金鑰 session key string session key json.get sessi...