Utilice la API de Baidu Map Weather para desarrollar el mini programa WeChat

Actualización 2020.11.24: Se ha cambiado la fuente de datos meteorológicos y se han agregado el pronóstico por hora y el pronóstico para los próximos 6 días.
Actualización 2020.11.19: dado que la API de Baidu siempre ha sido problemática, se ha modificado el método de posicionamiento después de la entrada inicial.
Actualización 2020.11.05: Recientemente, la API de Baidu tiene un problema. La fecha actual siempre regresa al 16 de septiembre y no hay datos de recordatorio de vida.

---

Primero tome una captura de pantalla:

Captura de pantalla

Captura de pantalla

Código QR del mini programa:

Código completo: dirección del proyecto GItHub
https://github.com/MichaelLee826/weather_forecast

1. Solicite el AK de Baidu Maps

En el mapa Baidu, abra la plataforma en la cuenta registrada e inicie sesión, luego cree una aplicación en la "consola" en.

Seleccione "Mini programa WeChat" y complete la ID de la aplicación obtenida al crear el mini programa.

Después del envío, puede ver el AK de la aplicación recién creada en la página anterior.

2. Descarga el SDK

Haga clic en "API de JavaScript del programa WeChat Mini" en "Documentos de desarrollo" y haga clic en "

Descargar todo " en "Descargas relacionadas".

El paquete comprimido incluye principalmente dos carpetas: demoy src, srcel archivo js que se usa principalmente en el desarrollo : bmap-wx.js(Para mayor comodidad de la explicación, este artículo no lo usa .min).

Tres, configure el nombre de dominio del servidor

Inicie sesión en el fondo de administración del applet de WeChat e ingrese el desarrollo - configuración de desarrollo.

En el nombre de dominio del servidor , complete la solicitud de nombre de dominio legal : https://api.map.baidu.com

PD: WeChat requiere que todos los nombres de dominio sean https, por lo que no se pueden utilizar algunas API cuya API es http.

Cuatro, escribe código

Abra la herramienta de desarrollo de WeChat y cree un pequeño proyecto de programa, y ​​algunos archivos se generarán automáticamente (el método para crear un nuevo proyecto, la función de cada archivo, hay muchos tutoriales en Internet, así que no entraré en detalles ).

1. Abra el index.jsarchivo y agregue bmap-wx.jsuna referencia al archivo:

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

2. En el onLoadmétodo, cree un nuevo BMapWXobjeto y complete AK:

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

3. En el onLoadmétodo, inicie una solicitud para consultar el clima:

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

4. En el onLoadmétodo, defina el método de éxito y fracaso de la consulta:

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

Tenga setDataen cuenta que, en el currentWeatheray Pageen la dataporción correspondiente a:

data: {
    
    
        currentWeather: ''
    },

En este punto, se pueden obtener los datos meteorológicos devueltos y el trabajo restante es analizar los datos devueltos.

Cinco, analiza los datos

En el tercer paso, los datos devueltos obtenidos por la consulta dataincluyen con éxito la información que necesitamos mostrar, por lo que el trabajo de análisis está principalmente dirigido data.

dataIncluye principalmente dos partes: currentWeathery originalData

1. La data.currentWeather
estructura del análisis es la siguiente: el

método de análisis es el siguiente:

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

Tenga en cuenta que data.currentWeatherexiste una matriz JSON de datos críticos data.currentWeather[0]en

2, analizando data.originalData
la siguiente estructura:

data.originalDataes formato JSON, nos preocupa la presencia de la data.originalData.resultsmatriz de datos , estructurada de la siguiente manera:

Como se puede ver, data.originalData.results[0]la matriz es dos partes clave: indexmatrices y weather_datamatrices:

data.originalData.results[0].index[0]una información relacionada con el apósito
data.originalData.results[0].index[1]está relacionada con la información para el lavado de autos
data.originalData.results[0].index[2]está relacionada frío-información
data.originalData.results[0].index[3]es la información relacionada con el movimiento
data.originalData.results[0].index[4]está relacionado con la intensidad de la radiación UV

data.originalData.results[0].weather_data[0]es el tiempo de hoy
data.originalData.results[0].weather_data[1]es el tiempo de mañana
data.originalData.results[0].weather_data[2]es el clima el día después de mañana
data.originalData.results[0].weather_data[3]es el día después del tiempo mañana

En este punto, se completa el análisis de datos y los datos setDatase pueden index.wxmlvincular a las variables que contiene. Modifíquese successcomo sigue:

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.wxmlLlame en el archivo:

<!--当前定位的城市-->
<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>

Seis, una bmap-wx.jsbreve introducción

Abra el bmap-wx.jsarchivo y verá que solo hay una clase BMapWX. Esta clase contiene cuatro métodos, y lo que necesitamos usar es el weather(param)método:

/**
* 天气检索
*
* @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);
	}
}

Como se puede ver, los datos se devuelven con éxito data, a través del análisis, se empaquetan en un frente data.currentWeathery data.originalDatados arreglos.

Además, la ciudad consultada por defecto en el programa es la ciudad ubicada actualmente, y el parámetro son las coordenadas de latitud y longitud.

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

Si desea consultar otras ciudades, como Beijing, puede modificarlo para:

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

Entre ellos se paramencuentran weather()los parámetros de la función.

---

Bienvenido a seguir mi cuenta pública de WeChat: