Home > Article > WeChat Applet > WeChat applet development weather forecast example code
This article mainly introduces the development of WeChat mini programWeather forecastRelated information about the example code. The source code is included here. Friends in need can refer to it
WeChat mini program weather Forecast
Main functions of the instance
Automatically locate the city
Get weather information based on the located city
Display weather conditions for the next few days
View detailed weather information for the day
Look first Rendering
WeChat Mini Program-Weather Home Page
WeChat Mini Program - Weather details page
The ideas and coding part automatically locate the city
wx.getLocation: You can see it through the API of the official document wx.getLocation can obtain the current geographical location and speed, but the obtained geographical location is only the longitude and latitude, not the real city name, but we can obtain the city name and other information based on this longitude and latitude (need to use a third party Interface ), and then obtain the corresponding weather information through the city name and city ID.
Add function in the .js logical layer:
data:{ weatherApikey:'', //天气apikey,在http://apistore.baidu.com 上申请 city:'', //城市名称 areaid:'', //城市对应的id curWd:{}, //当天天气情况 indexs:{}, //当天天气详情说明 forecast:{} //未来4天的天气情况 }, onLoad:function(options){ // 生命周期函数--监听页面加载 this.setData({weatherApikey:getApp().globalData.weatherApikey}); this.loadLocation(); }, //获取当前的位置信息,即经纬度 loadLocation: function() { var page = this; wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 success: function(res){ // success var latitude = res.latitude; var longitude = res.longitude; //获取城市 page.loadCity(latitude, longitude); } }) }, //通过经纬度获取城市 loadCity: function(latitude, longitude) { var page = this; //这个key是自己在http://apistore.baidu.com上申请的 var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL"; 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: {}, // 设置请求的 header success: function(res){ // success var city = res.data.result.address_component.city; city = city.replace("市", ""); //将“市”去掉,要不然取不了天气信息 page.setData({city: city}); page.loadId(city); } }) }, //通过城市名称获取城市的唯一ID loadId: 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); } }) }, //通过城市名称和城市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}); } }) }, //事件绑定,跳转到天气详情页面 gotoDetail: function(event) { // console.log(this.data.areaid+"==在这里跳转=="+this.data.city); wx.navigateTo({ url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid }) }
Note: page.setData or this.setData are used to set the data value in data. From the above logic layer, we can see that here we basically process data and some event bindings, and WeChat itself has encapsulated many practical functions for us, such as: wx.navigateTo, wx.request, wx. getLocation is somewhat similar to AngularJS's two-way data binding when communicating with view.
index.wxmlAnalysis
<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>
Explanation: Some components of WeChat are used here, such as: view : View container; block: will not leave anything on the page. Using this when is looping will not add additional tags; template: refers to the template; import: imports template information, It can only be referenced after importing; {{}}: 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>
The above is the detailed content of WeChat applet development weather forecast example code. For more information, please follow other related articles on the PHP Chinese website!