Prévisions météorologiques pour le développement du mini-programme

Cet article présente comment utiliser l'applet WeChat pour développer la fonction prévisions météo.

1. Liste des fichiers du projet

2. Configuration du mini programme

Utilisez le fichier app.json pour configurer globalement l'applet WeChat, déterminer le chemin du fichier d'échange, les performances de la fenêtre, définir le délai d'expiration du réseau, définir plusieurs onglets, etc.

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

Étant donné que le projet n'a qu'une seule page, il n'est pas nécessaire d'avoir des onglets inférieurs. Définissez également le temps de requête réseau sur 10 secondes et activez le mode débogage.

3. Couche logique du mini programme

Tout d'abord, utilisez l'interface Obtenir l'emplacement géographique actuel de l'utilisateur dans common.js pour obtenir l'adresse des coordonnées de l'utilisateur et sélectionnez gcj02 comme valeur. type de coordonnées.
//Obtenir l'emplacement actuelcoordonnées

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

Une fois l'appel Wx.getlocation réussi, les informations de coordonnées sont renvoyées à la fonction de rappel. En cas d'échec, transmettez false à la fonction de rappel.
Après avoir obtenu les coordonnées, utilisez l'interface Baidu pour interroger la météo. Le code de requête correspondant est affiché ci-dessous.

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

Dans le code ci-dessus, définissez d'abord ak de l'interface Baidu, puis construisez d'autres parties de l'URL via les paramètres d'épissage. Appelez ensuite wx.request pour demander des données de prévisions météorologiques.
Ensuite, combinez les interfaces ci-dessus pour former une interface pour la couche application. Le code correspondant est le suivant.

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

Enfin, l'interface est exposée au monde extérieur via module.exports. Le code est affiché ci-dessous.

module.exports = {
    loadWeatherData: loadWeatherData
}

4. Mini page du programme et View

Dans le fichier de la page, utilisez require pour introduire le code public. Le code est affiché ci-dessous.

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

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

Dans la fonction Page de la page, les données sont définies comme les données d'initialisation de la météo, qui seront transmises de la couche logique à la couche de rendu sous forme de JSON. Dans la méthode onLoad, utilisez la méthode loadWeatherData en commun pour obtenir des données météorologiques et les définir sur l'interface utilisateur, et utilisez la méthode setData pour définir les données obtenues sur la couche de données.
Dans l'implémentation de l'interface de la page, le code correspondant est le suivant.

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

La couche la plus externe est un conteneur de vue avec classe, qui contient deux sous-vues, qui sont utilisées pour stocker respectivement l'en-tête de page et la liste de pages. Le nom de la ville et l'heure sont stockés dans l'en-tête de la page. La liste des pages permet de stocker les conditions météorologiques des derniers jours.
L'implémentation de la feuille de style de la page est la suivante.

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

Les fichiers de page et les feuilles de style ci-dessus sont tous transplantés à partir de la démo officielle de WeChat.
L'effet final de l'applet de prévisions météo est illustré dans la figure.

[Recommandations associées]

1.Téléchargement complet du code source de l'applet WeChat

2. Démo du mini programme WeChat : Guoku et la nouvelle version

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!