微信小程序实现天气预报功能（支持自动定位）
前言：
由于和风天气API的更新，之前写的那篇文章可能会出现版本不兼容的情况。所以，我们更新了这个使用新版API的小程序。
效果图：
![效果图]( 登录到微信小程序后台，进入"开发者工具"页面。
2. 点击"后台域名配置"按钮。
3. 添加一个新的域名，例如： 登录到微信小程序后台，进入"开发者工具"页面。
2. 点击"后台域名配置"按钮。
3. 添加一个新的域名，例如： index.wxml -->
```
```javascript// index.jsPage({
data: {
weather: '',
location: '',
icon: ''
},
// 生命周期函数 onShow() {
this.getWeather();
},
// 获取天气数据 getWeather() {
wx.cloud.callFunction({
name: 'getWeather',
data: {
city: wx.getStorageSync('city')
}
}).then(res => {
const weather = res.result;
this.setData({
weather: weather.now.text,
location: weather.location,
icon: ` });
});
},
// 定位 getLocation() {
wx.getLocation({
type: 'wgs84',
success: res => {
const latitude = res.latitude;
const longitude = res.longitude;
this.getWeatherByLocation(latitude, longitude);
}
});
},
// 根据位置获取天气数据 getWeatherByLocation(latitude, longitude) {
wx.cloud.callFunction({
name: 'getWeather',
data: {
latitude,
longitude }
}).then(res => {
const weather = res.result;
this.setData({
weather: weather.now.text,
location: weather.location,
icon: ` });
});
}
});
```
```javascript// getWeather.jsconst db = wx.cloud.database();
export default {
name: 'getWeather',
data: {},
// 获取天气数据 getWeather(city) {
return db.collection('weather').where({
city }).get().then(res => {
const weather = res.data[0];
return weather;
});
}
};
```
注意问题（必看）
1. 在微信小程序后台中，需要配置一个域名，以便我们可以使用和风天气API。
2. 需要在 `index.js` 中调用 `getWeather()` 方法来获取天气数据。
3. 需要在 `getLocation()` 方法中获取定位信息，并调用 `getWeatherByLocation()` 方法来获取天气数据。
源码
以下是完整的源码：
```html
```
```javascript// index.jsPage({
data: {
weather: '',
location: '',
icon: ''
},
// 生命周期函数 onShow() {
this.getWeather();
},
// 获取天气数据 getWeather() {
wx.cloud.callFunction({
name: 'getWeather',
data: {
city: wx.getStorageSync('city')
}
}).then(res => {
const weather = res.result;
this.setData({
weather: weather.now.text,
location: weather.location,
icon: ` });
});
},
// 定位 getLocation() {
wx.getLocation({
type: 'wgs84',
success: res => {
const latitude = res.latitude;
const longitude = res.longitude;
this.getWeatherByLocation(latitude, longitude);
}
});
},
// 根据位置获取天气数据 getWeatherByLocation(latitude, longitude) {
wx.cloud.callFunction({
name: 'getWeather',
data: {
latitude,
longitude }
}).then(res => {
const weather = res.result;
this.setData({
weather: weather.now.text,
location: weather.location,
icon: ` });
});
}
});
```
```javascript// getWeather.jsconst db = wx.cloud.database();
export default {
name: 'getWeather',
data: {},
// 获取天气数据 getWeather(city) {
return db.collection('weather').where({
city }).get().then(res => {
const weather = res.data[0];
return weather;
});
}
};
```
留言
如果您有任何问题或建议，请在下面留言。
![微信小程序：实名认证登录 [2018年]](/UploadFile/pic/shuiyin/20241019/af40103db7fc4f90a75145c627923ca0.jpg)
