Utilisez l'API Baidu Map Weather pour développer le mini programme WeChat

Mise à jour du 24/11/2020: la source des données météorologiques a été modifiée, et les prévisions horaires et les prévisions pour les 6 prochains jours ont été ajoutées.
2020.11.19 mise à jour: Depuis l'API de Baidu a toujours été problématique, la méthode de positionnement après l'entrée initiale a été modifiée.
Mise à jour du 05/11/2020: Récemment, l'API de Baidu a un problème. La date actuelle revient toujours au 16 septembre et il n'y a pas de données de rappel de vie.

---

Prenez d'abord une capture d'écran:

Capture d'écran

Capture d'écran

Code QR du mini programme:

Code complet: adresse du projet GItHub
https://github.com/MichaelLee826/weather_forecast

1. Postulez pour l'AK of Baidu Maps

Dans Baidu map, ouvrez la plate-forme sur le compte enregistré et connectez-vous, puis créez une application dans la "console".

Sélectionnez "WeChat Mini Program" et remplissez l'ID APP obtenu lors de la création du mini programme.

Après la soumission, vous pouvez voir l'AK de l'application nouvellement créée sur la page précédente.

2. Téléchargez le SDK

Cliquez sur "API JavaScript du mini programme WeChat" dans "Documents de développement" et cliquez sur "

Tout télécharger " dans "Téléchargements associés".

Le package compressé comprend principalement deux dossiers: demoet src, srcle fichier js principalement utilisé en développement : bmap-wx.js(Pour la commodité de l'explication, cet article ne l'utilise pas .min).

Troisièmement, configurez le nom de domaine du serveur

Connectez-vous à l'arrière-plan de gestion de l'applet WeChat et entrez les paramètres de développement - développement.

Dans le nom de domaine du serveur , remplissez la demande de nom de domaine légal : https://api.map.baidu.com

PS: WeChat exige que tous les noms de domaine soient https, donc certaines API dont l'API est http ne peuvent pas être utilisées.

Quatre, écrire du code

Ouvrez l' outil de développement WeChat et créez un petit projet de programme, et certains fichiers seront automatiquement générés (la méthode de création d'un nouveau projet, le rôle de chaque fichier, il existe de nombreux tutoriels sur Internet, donc je n'entrerai pas dans les détails ).

1. Ouvrez le index.jsfichier et ajoutez bmap-wx.jsune référence au fichier:

//index.js
//获取应用实例
const app = getApp()
//调用百度地图天气API的js文件
var bmap = require('../../utils/bmap-wx.js'); 

2. Dans la onLoadméthode, créez un nouvel BMapWXobjet et remplissez AK:

var BMap = new bmap.BMapWX({
    
    
	ak: '你申请的百度地图AK'
});

3. Dans la onLoadméthode, lancez une requête pour interroger la météo:

BMap.weather({
    
    
	fail: fail,
	success: success
});

4. Dans la onLoadméthode, définissez la méthode de réussite et d'échec de la requête:

var fail = function(data) {
    
    
	console.log('查询失败')
};
var success = function(data) {
    
    
	console.log('查询成功');
	var currentWeather = data;
	this.setData({
    
    
		currentWeather: currentWeather
	});
}

Notez que, setDatadans le currentWeathervers et Pagedans la datapartie correspondant à:

data: {
    
    
        currentWeather: ''
    },

À ce stade, les données météorologiques renvoyées peuvent être obtenues et le travail restant consiste à analyser les données renvoyées.

Cinq, analysez les données

Dans la troisième étape, les données renvoyées obtenues par la requête dataincluent avec succès les informations que nous devons afficher, de sorte que le travail d'analyse est principalement visé data.

dataIl comprend principalement deux parties: currentWeatheret originalData

1. La data.currentWeather
structure d' analyse est la suivante: la

méthode d'analyse est la suivante:

var currentWeather = data.currentWeather[0];
	//currentWeather.currentCity："济南市"
	//currentWeather.date："周四 01月17日 (实时：3℃)"
	//currentWeather.pm25："85"
	//currentWeather.temperature："7 ~ -2℃"
	//currentWeather.weatherDesc："晴"
	//currentWeather.wind："南风微风"

Notez qu'il data.currentWeatherexiste un tableau JSON de données critiques data.currentWeather[0]dans

2, analyse de data.originalData
la structure suivante:

data.originalDataest au format JSON, nous sommes préoccupés par la présence du data.originalData.resultstableau de données , structuré comme suit:

Comme on peut le voir, data.originalData.results[0]le tableau est composé de deux éléments clés: indextableaux et weather_datatableaux:

data.originalData.results[0].index[0]une information liée à l'habillage
data.originalData.results[0].index[1]est une information liée au lave-auto est une information relative au
data.originalData.results[0].index[2]froid
data.originalData.results[0].index[3]est une information liée au mouvement
data.originalData.results[0].index[4]est liée à l'intensité des UV

data.originalData.results[0].weather_data[0]est la météo d'aujourd'hui est la météo de
data.originalData.results[0].weather_data[1]demain
data.originalData.results[0].weather_data[2]est la météo après-demain
data.originalData.results[0].weather_data[3]est la météo après-demain

À ce stade, l'analyse des données est terminée et les données setDatapeuvent être index.wxmlliées aux variables qu'elle contient. Modifier successcomme suit:

var success = function(data) {
    
    
	console.log('查询成功');
	//实时天气
	var currentWeather = data.currentWeather[0];
	//感冒信息
	var flu = data.originalData.results[0].index[2];
	//未来三天的天气
	var forecast = new Array(3);
	for (var i = 0; i < 3; i++) {
    
    
		forecast[i] = data.originalData.results[0].weather_data[i + 1];
	}
	//配置数据
	this.setData({
    
    
		currentWeather: currentWeather,
		flu: flu,
		forecast: forecast
	});
}

index.wxmlAppeler le fichier:

<!--当前定位的城市-->
<view class='cityName'>{
   
   {currentWeather.currentCity}}</view>

<!--未来3天的天气情况，包括日期、天气描述、温度范围、风力-->
  <view class='forecast'>
    <view class='next-day' wx:key="{
     
     {index}}" wx:for="{
     
     {forecast}}"> 
      <view class='detail date'>{
   
   {item.date}}</view>
      <view class='detail'>{
   
   {item.weather}}</view>
      <view class='detail'>{
   
   {item.temperature}}</view>
      <view class='detail'>{
   
   {item.wind}}</view>
    </view>
  </view>
  
<!--感冒信息-->
<view class='tips'>   
	<view class='index'>感冒指数：{
   
   {flu.zs}}</view>
	<view class='description'>{
   
   {flu.des}}</view>
</view>

Six, une bmap-wx.jsbrève introduction

Ouvrez le bmap-wx.jsfichier et vous pouvez voir qu'il n'y a qu'une seule classe BMapWX. Cette classe contient quatre méthodes, et ce que nous devons utiliser est la weather(param)méthode:

/**
* 天气检索
*
* @param {Object} param 检索配置
*/
weather(param) {
    
    
	var that = this;
	param = param || {
    
    };
	let weatherparam = {
    
    
		coord_type: param["coord_type"] || 'gcj02',
        output: param["output"] || 'json',
        ak: that.ak,
        sn: param["sn"] || '',
        timestamp: param["timestamp"] || ''
	};
	let otherparam = {
    
    
		success: param["success"] || function () {
    
    },
		fail: param["fail"] || function () {
    
    }
	};
	let type = 'gcj02';
	let locationsuccess = function (result) {
    
    
		weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
		wx.request({
    
    
			url: 'https://api.map.baidu.com/telematics/v3/weather',
			data: weatherparam,
			header: {
    
    "content-type": "application/json"},
			method: 'GET',
			success(data) {
    
    
				let res = data["data"];
				if (res["error"] === 0 && res["status"] === 'success') {
    
    
					let weatherArr = res["results"];
					// outputRes 包含两个对象，
					// originalData为百度接口返回的原始数据
					// wxMarkerData为小程序规范的marker格式
					let outputRes = {
    
    };
					outputRes["originalData"] = res;
					outputRes["currentWeather"] = [];    
					outputRes["currentWeather"][0] = {
    
    
			 			currentCity: weatherArr[0]["currentCity"],
						pm25: weatherArr[0]["pm25"],
						date: weatherArr[0]["weather_data"][0]["date"],
						temperature: weatherArr[0]["weather_data"][0]["temperature"],
						weatherDesc: weatherArr[0]["weather_data"][0]["weather"],
						wind: weatherArr[0]["weather_data"][0]["wind"]
					};
					otherparam.success(outputRes);
				} else {
    
    
					otherparam.fail({
    
    
						errMsg: res["message"],
						statusCode: res["status"]
					});
				}
			},
			fail(data) {
    
    
				otherparam.fail(data);
			}
		});
	}
	let locationfail = function (result) {
    
    
		otherparam.fail(result);
	}
	let locationcomplete = function (result) {
    
    
	}
	if (!param["location"]) {
    
    
		that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
	} else {
    
    
		let longitude = param.location.split(',')[0];
		let latitude = param.location.split(',')[1];
		let errMsg = 'input location';
		let res = {
    
    
			errMsg: errMsg,
			latitude: latitude,
			longitude: longitude
		};
		locationsuccess(res);
	}
}

Comme on peut le voir, les données sont renvoyées avec succès data, grâce à l'analyse, nous sommes empaquetés dans un front data.currentWeatheret data.originalDatadeux tableaux.

De plus, la ville interrogée par défaut dans le programme est la ville actuellement localisée, et le paramètre est les coordonnées de latitude et de longitude.

weatherparam["location"] = result["longitude"] + ',' + result["latitude"];

Si vous souhaitez interroger d'autres villes, telles que Pékin, vous pouvez le modifier comme suit:

weatherparam["location"] = param["北京"];

Parmi eux se paramtrouvent weather()les paramètres de la fonction.

---

Bienvenue à suivre mon compte public WeChat: