Wettervorhersage für die Miniprogrammentwicklung

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}

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

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

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

4. Mini-Programmseite und

module.exports = {
    loadWeatherData: loadWeatherData
}

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

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>

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

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

[Verwandte Empfehlungen]

1.

WeChat-Applet vollständiger Quellcode-Download

2.

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!