Sample code for developing weather forecasts using WeChat applets

This article mainly introduces the information about the sample code of the weather forecast developed by the applet. it contains the source code. if you need it, you can refer to this article to introduce the relevant information about the sample code of the weather forecast developed by the applet, the source code is included here. For more information, see

Applet weather forecast

Main functions of the instance

1. Automatically locates the city

2. Obtain weather information based on the target city

3. Show weather conditions in the next few days

4. View the weather details of the day

First Look

Mini-weather details page

Ideas and codes automatically locate the city

Wx. getLocation: The wx. getLocation can get the current geographic location and speed, but the obtained geographic location is only the latitude and longitude, not the real city name, however, we can obtain the city name and other information based on the longitude and latitude (a third-party interface is required), and then obtain the corresponding weather information through the city name and city ID.

Add a function in the. js logic layer:

Data: {weatherApikey: '', // weather apikey, in http://apistore.baidu.com Apply for city: '', // city name areaid:'', // city id curWd :{}, // weather condition indexs :{}, // weather details for the current day: forecast :{}// weather conditions for the next 4 days}, onLoad: function (options) {// Life cycle function -- listen to the page to load this. setData ({weatherApikey: getApp (). globalData. weatherApikey}); this. loadLocation () ;}, // Obtain the current location information, that is, the latitude and longitude loadLocation: function () {var page = this; wx. getLocation ({type: 'gcj02', // The default value is wgs84. the gps coordinates are returned. gcj02 can be used for wx. coordinate success: function (res) {// success var latitude = res. latitude; var longdistance = res. longpolling; // Obtain the city page. loadCity (latitude, longbench) ;}}, // Obtain the city loadCity: function (latitude, longbench) {var page = this through latitude and longitude; // The key is stored in http://apistore.baidu.com Var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL"; var url =" http://apis.map.qq.com/ws/geocoder/v1/?location= "+ Latitude +", "+ longpolling +" & key = "+ key +" & get_poi = 1 "; wx. request ({url: url, data :{}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // Set the request header success: function (res) {// success var city = res. data. result. address_component.city; city = city. replace ("city", ""); // remove "city". Otherwise, the weather information page cannot be obtained. setData ({city: city}); page. loadId (city) ;}}, // Obtain the unique IDloadId of a city using 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 the weather conditions using the 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) {// consol E. log (this. data. areaid + "= jump here =" + this. data. city); wx. navigateTo ({url :'.. /detail? City = '+ this. data. city + "& cityid =" + this. data. areaid })}

Note:Page. setData or this. setData are used to set data values in data. From the logic layer above, we can see that data processing is basically bound to some events, and a lot of practical functions have been encapsulated for us, such as wx. navigateTo, wx. request, wx. getLocation, which is similar to the bidirectional data binding of AngularJS in communication with views.

Index. wxml parsing

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

Template File

The template file is actually a wxml file.

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

The above is the details of the sample code for the weather forecast developed by the applet. For more information, see other related articles in the first PHP community!