Code für die Wettervorhersageentwicklung im WeChat-Applet

In diesem Artikel werden hauptsächlich relevante Informationen zum Quellcode des WeChat Mini-Programms für die Wettervorhersage vorgestellt. Der Quellcode ist hier enthalten.

WeChat Mini-Programm Wettervorhersage

Hauptfunktionen der Instanz

1. Stadt automatisch lokalisieren

2. Wetterinformationen basierend auf abrufen lokalisierte Stadt

3. Wetterbedingungen für die nächsten Tage anzeigen

4. Detaillierte Wetterinformationen für den Tag anzeigen

Sehen Sie sich zuerst die Renderings an

WeChat Mini-Programm – Wetter-Homepage

WeChat Mini-Programm – Wetterdetails Seite

Ideen- und Codierungsabteilung Automatische Lokalisierung der Stadt

wx.getLocation: Aus der API der offiziellen Dokumentation ist ersichtlich, dass wx.getLocation den aktuellen Stand abrufen kann geografischer Standort und Geschwindigkeit, aber der erhaltene geografische Standort ist nur Längen- und Breitengrad, nicht der tatsächliche Stadtname, aber wir können den Stadtnamen und andere Informationen basierend auf diesem Längen- und Breitengrad erhalten (die Verwendung einer Schnittstelle eines Drittanbieters ist erforderlich) und Erhalten Sie dann die entsprechenden Wetterinformationen über den Stadtnamen und die Stadt-ID.

Funktionen in der .js-Logikebene hinzufügen:

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
})
}

Hinweis: page.setData oder this.setData sind Both Wird zum Festlegen des Datenwerts in Daten verwendet. Aus der obigen Logikebene können wir ersehen, dass wir hier grundsätzlich Daten und einige Ereignisbindungen verarbeiten und WeChat selbst viele praktische Funktionen für uns gekapselt hat, wie zum Beispiel: wx.navigateTo, wx.request, wx, die denen von AngularJS etwas ähneln bidirektionale Datenbindung bei der Kommunikation mit der Ansicht.

index.wxml-Analyse

<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>

Erläuterung: Einige Komponenten von WeChat werden hier verwendet, wie zum Beispiel: Ansicht: Ansichtsblock: Nein Wenn Sie dies verwenden, werden beim Schleifen keine zusätzlichen Tags hinzugefügt .

Vorlagendatei

Vorlagendatei ist eigentlich eine WXML-Datei

<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>

Hinweis: Über Vorlagen Die Beschreibung kann auf die offizielle Dokumentation Vorlage und Referenz verweisen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

WeChat-Applet implementiert Nachtmodus für Skin

Implementierung der Warenkorbfunktion im WeChat-Applet

Implementierung des Romanlese-Applets im WeChat-Applet

Das obige ist der detaillierte Inhalt vonCode für die Wettervorhersageentwicklung im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!