Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the weather forecast function of WeChat Mini Programs". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how to realize the weather forecast function of WeChat Mini Programs"!

Here I use the API of gentle weather, open the official website to register or log in to your account

Go to the console, select Application Management, and create a new application (free development version for the application version and Web API for the type of key)

After the creation is successful, you can see the key to be used later.

WeChat Mini Programs background domain name configuration

Log in to the backend of Mini Program and click Development and Development Settings respectively.

Click modify to add the domain name of API that we want to use to the legitimate domain name of request

Page code

.wxml

{{City}} {{County}}

{{now.temp}} °

{{now.windDir}} {{now.windScale}} level

Humidity {{now.humidity}}%

Air pressure {{now.pressure}} Pa

24-hour forecast

{{item.time}}

{{item.temp}} °

{{item.windDir}}

{{item.windScale}} level

7-day forecast

{{item.dateToString}}

{{item.date}}

{{item.tempMin}} °~ {{item.tempMax}} °

{{item.windDirDay}}

{{item.windScaleDay}} level

.wxss

Page {

Background-color: linear-gradient (to bottom, # ffffff,#ffffff, # F6F6F6)

Padding-bottom: 60rpx

}

/ * tool class * /

.row {

Display: flex

Align-items: center

}

.mb-32 {

Margin-bottom: 32rpx

}

/ * Page style * /

. header-modular {

Height: 400rpx

Background-color: # 64C8FA

Background: linear-gradient (to bottom, # 56CCF2, # 2F80ED)

Position: relative

Padding: 30rpx

}

. header-modular. Bg-wave {

Width: 100vw

Position: absolute

Bottom:-2px

Left: 0

Right: 0

Height: 120rpx

Mix-blend-mode: screen

}

. header-modular. Location-wrap {

Color: # ffffff

Font-weight: bold

Font-size: 36rpx

}

. header-modular. Location-wrap .icon {

Width: 40rpx

Height: 40rpx

Margin-right: 8rpx

}

. header-modular .tmp {

Font-size: 200rpx

/ * font-weight: bold; * /

Color: # ffffff

Margin-right: auto

}

. header-modular. Icon-weather {

Width: 200rpx

Height: 200rpx

}

. header-modular. Tips-wrap {

Display: flex

Justify-content: space-between

}

. header-modular .tips {

Font-size: 28rpx

Opacity: 0.8

Color: # ffffff

Flex: 1

}

. header-modular. Tips:nth-child (3) {

Text-align: right

}

. header-modular. Tips:nth-child (2) {

Text-align: center

}

. card-modular {

Padding:0 30rpx

Margin-top: 30rpx

}

.card-modular > .title {

Font-size: 40rpx

Font-weight: bold

Position: relative

Margin-left: 14rpx

Margin-bottom: 16rpx

}

.card-modular > .title:: before {

Content: ""

Position: absolute

Left:-14rpx

Top: 10rpx

Bottom: 10rpx

Width: 8rpx

Border-radius: 10rpx

Background-color: # 2F80ED

}

. card-modular. Card-wrap {

Width: 690rpx

Border-radius: 18rpx

Background-color: # ffffff

Box-shadow: 0 20rpx 0 rgba (0,0,0,0.2)

Overflow-x: auto

White-space: nowrap

}

. card-modular. Card-wrap .item {

Display: inline-flex

Flex-direction: column

Align-items: center

Font-size: 28rpx

Padding: 18rpx 0

}

. card-modular. Card-wrap .item.hourly {

Width: 138rpx

}

. card-modular. Card-wrap .item.daily {

Width: 172.5rpx

}

. card-modular. Card-wrap .item .icon {

Width: 60rpx

Height: 60rpx

Margin: 64rpx 0

}

. card-modular. Card-wrap .item. Text-gray {

Color: gray

}

. card-modular. Card-wrap .item. Text-primary {

Color: # 2F80ED

}

.js

Const APIKEY = ""; / / enter the KEY you applied for

Page ({

/ * *

* initial data of the page

, /

Data: {

}

/ * *

* Lifecycle function-- listen for page loading

, /

OnLoad: function (options) {

This.getLocation ()

}

/ / Select location

SelectLocation () {

Var that = this

Wx.chooseLocation ({

Success (res) {

/ / console.log (res)

That.setData ({

Location: res.longitude + "," + res.latitude

})

That.getWeather ()

That.getCityByLoaction ()

}

, fail () {

Wx.getLocation ({

Type: 'gcj02'

Fail () {

Wx.showModal ({

Title: 'failed to get map location'

Content:'in order to provide you with accurate weather forecasting services, please authorize [location Information] in the settings.

Success (mRes) {

If (mRes.confirm) {

Wx.openSetting ({

Success: function (data) {

If (data.authSetting ["scope.userLocation"] = true) {

That.selectLocation ()

} else {

Wx.showToast ({

Title: 'authorization failed'

Icon: 'none'

Duration: 1000

})

}

}, fail (err) {

Console.log (err)

Wx.showToast ({

Title: 'failed to evoke the settings page, please open it manually'

Icon: 'none'

Duration: 1000

})

}

})

}

}

})

}

})

}

})

}

/ * *

* get the location

, /

GetLocation () {

Var that = this

Wx.getLocation ({

Type: 'gcj02'

Success (res) {

That.setData ({

Location: res.longitude + "," + res.latitude

})

That.getWeather ()

That.getCityByLoaction ()

}, fail (err) {

Wx.showModal ({

Title: 'failed to get location information'

Content:'in order to provide you with accurate weather forecasting services, please authorize [location Information] in the settings.

Success (mRes) {

If (mRes.confirm) {

Wx.openSetting ({

Success: function (data) {

If (data.authSetting ["scope.userLocation"] = true) {

Wx.showToast ({

Title: 'authorization successful'

Icon: 'success'

Duration: 1000

})

That.getLocation ()

} else {

Wx.showToast ({

Title: 'authorization failed'

Icon: 'none'

Duration: 1000

})

That.setData ({

Location: "116.41 Magi 39.92"

})

That.getWeather ()

That.getCityByLoaction ()

}

}, fail (err) {

Console.log (err)

Wx.showToast ({

Title: 'failed to evoke the settings page, please open it manually'

Icon: 'none'

Duration: 1000

})

That.setData ({

Location: "116.41 Magi 39.92"

})

That.getWeather ()

That.getCityByLoaction ()

}

})

} else if (mRes.cancel) {

That.setData ({

Location: "116.41 Magi 39.92"

})

That.getWeather ()

That.getCityByLoaction ()

}

}

})

}

})

}

/ * *

* obtain city information according to coordinates

, /

GetCityByLoaction () {

Var that = this

Wx.request ({

Url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "& location=" + that.data.location

Success (result) {

Var res = result.data

If (res.code = "200") {

Var data = res.location [0]

That.setData ({

City: data.adm2

County: data.name

})

} else {

Wx.showToast ({

Title: "failed to get city information"

Icon: 'none'

})

}

}

})

}

/ * *

* get the weather

, /

GetWeather () {

Var that = this

Wx.showLoading ({

Title: 'loading'

})

Wx.request ({

Url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "& location=" + that.data.location

Success (result) {

Var res = result.data

/ / console.log (res)

That.setData ({

Now: res.now

})

}

})

Wx.request ({

Url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "& location=" + that.data.location

Success (result) {

Var res = result.data

/ / console.log (res)

Res.hourly.forEach (function (item) {

Item.time = that.formatTime (new Date (item.fxTime)) .hourly

})

That.setData ({

Hourly: res.hourly

})

}

})

Wx.request ({

Url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "& location=" + that.data.location

Success (result) {

Var res = result.data

/ / console.log (res)

Res.daily.forEach (function (item) {

Item.date = that.formatTime (new Date (item.fxDate)) .daily

Item.dateToString = that.formatTime (new Date (item.fxDate)) .dailyToString

})

That.setData ({

Daily: res.daily

})

Wx.hideLoading ()

}

})

}

/ / format time

FormatTime (date) {

Const year = date.getFullYear ()

Const month = date.getMonth () + 1

Const day = date.getDate ()

Const hour = date.getHours ()

Const minute = date.getMinutes ()

Const second = date.getSeconds ()

Const weekArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

Const isToday = date.setHours (0,0,0,0) = = new Date () .setHours (0,0,0,0)

Return {

Hourly: [hour, minute] .map (this.formatNumber) .join (":")

Daily: [month, day] .map (this.formatNumber) .join ("-")

DailyToString: isToday? Today: weekArray [date.getDay ()]

}

}

/ / Zero padding

FormatNumber (n) {

N = n.toString ()

Return n [1]? N:'0' + n

}

/ * *

* Lifecycle function-the listening page is rendered for the first time

, /

OnReady: function () {

}

/ * *

* Lifecycle function-- listen for page display

, /

OnShow: function () {

}

/ * *

* Lifecycle function-- listening for page hiding

, /

OnHide: function () {

}

/ * *

* Lifecycle function-- unload the listening page

, /

OnUnload: function () {

}

/ * *

* Page-related event handler function-listens for user drop-down actions

, /

OnPullDownRefresh: function () {

}

/ * *

* Handler for pull bottoming event on the page

, /

OnReachBottom: function () {

}

/ * *

* users click on the upper right corner to share

, /

OnShareAppMessage: function () {

}

})

App.json

{

"pages": [

"pages/index/index"

]

"window": {

"backgroundTextStyle": "light"

"navigationBarBackgroundColor": "# fff"

"navigationBarTitleText": "weather forecast"

"navigationBarTextStyle": "black"

}

"permission": {

"scope.userLocation": {

"desc": "your location information will be used for weather forecast positioning"

}

}

"style": "v2"

"sitemapLocation": "sitemap.json"

}

Pay attention to the problem (must see)

To ensure that Mini Program can be used properly, please upgrade to a personal developer on the mild Weather console (ps: real name information needs to be uploaded for this upgrade).

In the js code, please enter the key you just applied for into the APIKEY

Thank you for your reading. the above is the content of "how to realize the weather forecast function of WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to realize the weather forecast function of WeChat Mini Programs. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.