WeChat small program weather forecast development example code source code

WeChat small program weather forecast

Automatic positioning the city
  1. according to the Located City Acquisition of Weather Information
  2. Show weather conditions in the coming days
  3. See the details of the day
  4. First look at the effect map

WeChat applet 微信小程序 天气预报开发实例代码源码

WeChat applet – Weather Details page

微信小程序 天气预报开发实例代码源码

WX.GETLOCATION: WX.GetLocation can be seen from the API of the official documentation to get the current geographic location and speed, but obtained The location is just a latitude and longitude, not the real city name, but we can get information such as city name according to this latitude (need to use a third-party interface), then obtain the corresponding weather information through the city name and city ID.

In the .JS logic layer increased function:

Data: {weatherthePikey: ‘, // Weather Apikey, at http://apistore.baidu .com application city: ”, // City Name Areaid: ”, // City Corresponding ID CURWD: {}, // Weather Situation INDEXS: {}, // Weather Details Forecast: {} / / Future 4 days weather conditions}, online: function (options) {// Lifecycle Function – Listening Page Load this.SetData ({WeatheraPikey: getApp (). GlobalData.WeatheRapiKey}; thIS.LOADLOCATION ();}, // Get current location information, ie latitude and longitude loadLocation: function () {var Page = this; wx.getlocation ({type: ‘gcj02’, // default is WGS84 Return GPS coordinate, gcj02 Returns the coordinate of WX.OpenLocation: Function (RES) {// Success Var Latitude = Res. Latude; Var longitude = res.longitude; // Get City Page.LoadCity (Latitude, longitude);}})} // Get the city with latitude: function (latitude, longitude) {var page = this; // This key is a VAR key = “xSwbz-EVQ3V-UMLPA-U4TP6) applied by himself on http://apistore.baidu.com -6mqfz-uufsl “; var URL =” http://apis.map.qq.com/ws/geocoder/v1/?Location=”+ choity+”, “+longitude+”&key=”+key +”&get_poi=1” WX.Request ({URL: URL, DATA: {}, method: ‘get’, // Options, get, head, post, put, delete, trace, connect // header: {}, // setup request Header Success: Function (RES) {// Success Var City= Res. Data.Result.address_component.city; city = city.replace (“city”, “”); // will remove “city”, or not to get weather information Page.SetData ({city: city}); Page.LoadId (City);}}}}}, // Get the city’s unique idloadid: 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; Page.LoadWeather (City, CityID); }}}}, // Get weather conditions through the city name and city ID LoadWeather: function (city, area; 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 Weather Details Page Gotodetail: Function (Event) {// Console.log (this.Data.areAid + “== Jumping ==” + this.data.city); wx .navigateto ({URL: ‘../detail/detail?city=’ +this.data.city+”&cityid=”+.data.areaid})

Note: page.setData or this.setData data are used to set the values ​​of the data. It can be seen from the above logic layer that is basically processing data and some event bindings, and WeChat itself has encapsulated many practical functions for us, such as: wx.navigateto, wx.Request, wx. GetLocation, a bit similar to the two-way data binding similar to AngularJS when communicating with the view.
 INDEX.WXML analysis   

          Description: Some components of WeChat here are used here, such as: view: view container; block: Will not Leave anything on the page, use this to use this not to add additional tags; Template: Reference template; import: Import Template information, only after importing; {{}}: Reference data; wx: for: loop.      Template file is actually WXML file        


{{curwd.type} } {{curwd.lowtemp}} / {{curwd.hightemp}}


    Note: About the description of the template can be referred to the official document template and reference.   Source code download: http://xiazai.jb51.net/201701/yuanma/weather (jb51.net) .rar   In addition, there is a weather inquiry on the online tool applet Tools, tools, have also added city selection to switch features, interested friends can scan the following small program code:      Thanks for reading, I hope to help everyone, thank you for your support of this site!                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment