Wettervorhersage für die Miniprogrammentwicklung-Mini-Programmentwicklung-php.cn

Wettervorhersage für die Miniprogrammentwicklung

Y2J

Freigeben： 2017-05-08 10:16:33

Original

2356 Leute haben es durchsucht

In diesem Artikel wird erläutert, wie Sie mit dem WeChat-Applet die Funktion Wettervorhersage entwickeln.

1. Projektdateiliste

2. Miniprogrammkonfiguration

Verwenden Sie die Datei app.json, um das WeChat-Applet global zu konfigurieren, den Pfad der Auslagerungsdatei und die Fensterleistung zu bestimmen, das Netzwerk-Timeout festzulegen, mehrere Registerkarten festzulegen usw.

{  "pages":[    "pages/index/index"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "天气预报",    "navigationBarTextStyle":"black"
  },  "networkTimeout": {    "request": 10000
  },  "debug": true}

Nach dem Login kopieren

Da das Projekt nur eine Seite hat, sind keine unteren Tabs erforderlich. Stellen Sie außerdem die Netzwerkanforderungszeit auf 10 Sekunden ein und aktivieren Sie den

Debug-Modus.

3. Miniprogramm-Logikschicht

Verwenden Sie zunächst die Schnittstelle „Get User's Current Geographic Location“

in common.js, um die Koordinatenadresse des Benutzers abzurufen, und wählen Sie gcj02 als aus Koordinatentyp. //Den aktuellen Standort abrufen
Koordinaten

Nachdem Wx.getlocation erfolgreich aufgerufen wurde, werden die Koordinateninformationen an die Rückruf-

function getLocation(callback) {
    wx.getLocation({
        type: 'gcj02',
        success: function(res) {
            callback(true, res.latitude, res.longitude);
        },
        fail: function() {
            callback(false);
        }
    })
}

Nach dem Login kopieren

Funktion

zurückgegeben. Übergeben Sie bei einem Fehler „false“ an die Rückruffunktion. Nachdem Sie die Koordinaten erhalten haben, verwenden Sie die Baidu-Schnittstelle , um
das Wetter abzufragen. Der entsprechende Abfragecode wird unten angezeigt.

Definieren Sie im obigen Code zunächst ak der Baidu-Schnittstelle und erstellen Sie dann andere Teile der URL durch Spleißparameter. Rufen Sie dann wx.request auf, um Wettervorhersagedaten anzufordern.

function getWeather(latitude, longitude, callback) {    var ak = "";//换成自己的ak,不要用方倍工作室的
    var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + longitude + "," + latitude + "&output=json&ak=" + ak;
    wx.request({
        url: url,
        success: function(res){
            console.log(res);
            callback(res.data);            
        }
    });
}

Nach dem Login kopieren

Als nächstes kombinieren Sie die oben genannten Schnittstellen, um eine Schnittstelle für die Anwendungsschicht zu bilden. Der entsprechende Code lautet wie folgt.

Schließlich wird die Schnittstelle über module.exports der Außenwelt zugänglich gemacht. Der Code wird unten angezeigt.

function loadWeatherData(callback) {
    getLocation(function(success, latitude, longitude){  
        getWeather(latitude, longitude, function(weatherData){
            callback(weatherData);   
        });
    });
}

Nach dem Login kopieren

4. Mini-Programmseite und

module.exports = {
    loadWeatherData: loadWeatherData
}

Nach dem Login kopieren

Ansicht

Verwenden Sie in der Seitendatei

require

, um den öffentlichen Code einzuführen. Der Code wird unten angezeigt.

In der Seitenfunktion der Seite werden Daten als Initialisierungsdaten des Wetters definiert, die in Form von JSON von der Logikschicht an die Rendering-Schicht übertragen werden. Verwenden Sie in der onLoad-Methode gemeinsam die Methode „loadWeatherData“, um Wetterdaten abzurufen und auf die Benutzeroberfläche festzulegen, und verwenden Sie die Methode „setData“, um die erhaltenen Daten auf der Datenschicht festzulegen.

//index.jsvar common = require('common.js')

Page({
    data: {
        weather: {}
    },
    onLoad: function () {        var that = this;
        common.loadWeatherData(function(data){
            that.setData({
                weather: data
            });
        });    
    }
})

Nach dem Login kopieren

In der Schnittstellenimplementierung der Seite lautet der entsprechende Code wie folgt.

Die äußerste Ebene ist eine Ansicht mit Klassencontainer, die zwei Unteransichten enthält, die zum Speichern des Seitenkopfs bzw. der Seitenliste verwendet werden. Der Name und die Uhrzeit der Stadt werden im Seitenkopf gespeichert. Die Seitenliste dient der Speicherung der Wetterbedingungen der letzten Tage.

<!--index.wxml--><view class="container">  
  <view class="header">
      <view class="title">{{weather.results[0].currentCity}}</view>
      <view class="desc">{{weather.date}}</view>
  </view>

  <view class="menu-list">
      <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this">
        <view class="menu-item-main">
          <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text>
          <image class="menu-item-arrow" src="{{item.dayPictureUrl}}"></image>
        </view>
      </view>
  </view></view>

Nach dem Login kopieren

Die Stylesheet-Implementierung der Seite ist wie folgt.

Die oben genannten Seitendateien und Stylesheets stammen alle aus der offiziellen WeChat-Demo.

.header {
  padding: 30rpx;
  line-height: 1;
}.title {
  font-size: 52rpx;
}.desc {
  margin-top: 10rpx;
  color: #888888;
  font-size: 28rpx;
}.menu-list {
  display: flex;
  flex-direction: column;
  background-color: #fbf9fe;
  margin-top: 10rpx;
}.menu-item {
  color: #000000;
  display: flex;
  background-color: #fff;
  margin: 10rpx 30rpx;
  flex-direction: column;
}.menu-item-main {
  display: flex;
  padding: 40rpx;
  border-radius: 10rpx;
  align-items: center;
  font-size: 32rpx;
  justify-content: space-between;
}.menu-item-arrow {
  width: 96rpx;
  height: 96rpx;
  transition: 400ms;
}

Nach dem Login kopieren

Der endgültige Effekt des Wettervorhersage-Applets ist in der Abbildung dargestellt.

[Verwandte Empfehlungen]

WeChat-Applet vollständiger Quellcode-Download

Demo des WeChat-Miniprogramms: Guoku und neue Version

Das obige ist der detaillierte Inhalt vonWettervorhersage für die Miniprogrammentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!