WeChat applet weather forecast development instance code source code, Applet instance

Sample Code source code and sample code

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 homepage

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, apply for city:'' on the http://apistore.baidu.com, // city name areaid: '', // the id of the city corresponding to curWd: {}, // weather condition of the day indexs :{}, // weather details of the day forecast :{}// weather condition of the next 4 days}, onLoad: function (options) {// lifecycle 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', // w by default Gs84 returns the gps coordinates, and gcj02 returns the coordinates that can be used for wx. coordinate success: function (res) {// success var latitude = res. latitude; var longdistance = res. longpolling; // obtain the city page. loadCity (latitude, longpolling) ;}}, // obtain the city loadCity: function (latitude, longpolling) {var page = this; // This key is the var key = "http://apistore.baidu.com"; var url = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL? 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 I of a city by city name DloadId: 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. loadWeathe R (city, cityid) ;}}, // obtain the weather condition loadWeather through the city name and city ID: 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? 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

<view class="main-container">  <import src="../templates/today-tpl"/>  <view bindtap="gotoDetail">  <template is="today-tpl" data="{{city, curWd}}"/>  </view>  <import src="../templates/index-tpl"/>  <view class="index-content">    <block wx:for="{{indexs}}" wx:key="item" wx:for-index="idx">      <template is="index-tpl" data="{{item,idx}}"></template>    </block>  </view>  <import src="../templates/forecast-tpl"/>  <view class="forecast">    <block wx:for="{{forecast}}" wx:key="item">      <template is="forecast-tpl" data="{{item}}"/>    </block>  </view></view>

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.

<template name="today-tpl">  <view class="today">    <view class="city">{{city}}</view>    <view class="date">{{curWd.date}} {{curWd.week}}</view>    <view class="temp">{{curWd.curTemp}}</view>    <view class="weather">{{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>    <view class="wd">{{curWd.wd}}</view>  </view></template>

NOTE: For the template description, refer to the official document template and reference.

Source code download: http://xiazai.jb51.net/201701/yuanma/weather (jb51.netw..rar

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!