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

This article mainly introduces "how to realize the weather forecasting function in WeChat Mini Programs". In the daily operation, I believe that many people have doubts about how to realize the weather forecasting function in WeChat Mini Programs. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the weather forecasting function in WeChat Mini Programs". Next, please follow the editor to study!

WeChat Mini Programs weather forecast

Main functions of an example

Automatically locate the city where it is located

Obtain weather information according to the location of the city

Show the weather in the next few days

Check the details of the weather for the day

Take a look at the effect picture first.

WeChat Mini Programs-Weather Home Page

WeChat Mini Programs-Weather details page

The train of thought and coding part automatically locate the city where it is located.

Wx.getLocation: you can see in the API of the official document that wx.getLocation can obtain the current geographical location and speed, but the geographical location obtained is only latitude and longitude, not the real city name. However, we can obtain information such as city name according to this latitude and longitude (we need to use third-party interface), and then obtain the corresponding weather information through city name and city ID.

Add functions to the .js logic layer:

Data: {weatherApikey:'', / / Weather apikey Apply for city:'', / / City name areaid:'', / / id curWd corresponding to the city on http://apistore.baidu.com: {}, / / Weather conditions of the day indexs: {}, / / Weather details of the day forecast: {} / / Weather conditions for the next 4 days} OnLoad:function (options) {/ / Lifecycle function-- listen for page loading this.setData ({weatherApikey:getApp () .globalData.weatherApikey}) This.loadLocation ();}, / / get the current location information, that is, longitude and latitude loadLocation: function () {var page = this; wx.getLocation ({type: 'gcj02', / / defaults to wgs84 returns gps coordinates, gcj02 returns coordinates available for wx.openLocation success: function (res) {/ / success var latitude = res.latitude; var longitude = res.longitude; / / get city page.loadCity (latitude, longitude) }})}, / / obtain the city loadCity through latitude and longitude: function (latitude, longitude) {var page = this; / / this key is the var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL" that you applied for on http://apistore.baidu.com; var url = "http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1";" Wx.request ({url: url, data: {}, method: 'GET', / / OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT / / header: {}, / / set the header success of the request: function (res) {/ / success var city = res.data.result.address_component.city; city = city.replace ("city", "") / / remove the "city", otherwise you cannot get the weather information page.setData ({city: city}); page.loadId (city);}}, / / obtain the unique IDloadId of the city through the city name: function (city) {var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/citylist";" Wx.request ({url: url, data: {cityname: city}, header: {apikey:page.data.weatherApikey}, method: 'GET', / / OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function (res) {/ / success var cityid = res.data.retData [0] .area _ id; page.setData ({areaid: cityid}); page.loadWeather (city, cityid) }})}, / / obtain weather conditions through city name and city ID loadWeather: function (city, areaId) {var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers"; Wx.request ({url: url, data: {cityname:city, cityid: areaId}, header: {apikey: page.data.weatherApikey}, method: 'GET', / / OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function (res) {/ / success page.setData ({curWd: res.data.retData.today, indexs: res.data.retData.today.index, forecast:res.data.retData.forecast}) }})}, / / event binding, jump to the weather details page gotoDetail: function (event) {/ / console.log (this.data.areaid+ "= = jump here = =" + this.data.city); wx.navigateTo ({url:'. / detail/detail?city='+this.data.city+ "& cityid=" + this.data.areaid})}

Note: both page.setData and this.setData are used to set data values in data. From the above logic layer, we can see that here is basically dealing with data and some event binding, and Wechat itself has encapsulated a lot of practical functions for us, such as: wx.navigateTo, wx.request, wx.getLocation, which is similar to the bidirectional data binding of AngularJS when communicating with the view.

Index.wxml parsing

Note: some components of Wechat are used here, such as: view: view container; block: do not leave anything on the page, loop when using this will not add additional tags; template: reference template; import: import template information, only after import can be referenced; {{}}: reference data; wx:for: loop.

Template file

Template files are actually wxml files.

{{city}} {{curWd.date}} {{curWd.week}} {{curWd.curTemp}} {{curWd.type}} {{curWd.lowtemp}} / {{curWd.hightemp}} {{curWd.wd}}

Note: the description of the template can refer to the official document template and references.

At this point, the study on "how to achieve the weather forecast function in WeChat Mini Programs" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.