1. 获取城市列表:
- 在小程序中提供用户选择城市的功能,可以通过调用后台接口获取城市列表。
<!-- cityList.wxml -->
<view>
<picker mode="selector" range="{{cityList}}" bindchange="cityChange">
<view class="picker">
{{selectedCity}}
</view>
</picker>
<button bindtap="getWeather">查询天气</button>
<view wx:if="{{weatherInfo}}">
<text>当前城市:{{selectedCity}}</text>
<text>天气情况:{{weatherInfo}}</text>
</view>
</view>
// cityList.js
Page({
data: {
cityList: ['北京', '上海', '广州', '深圳', '成都', '重庆', '杭州'], // 示例城市列表
selectedCity: '北京',
weatherInfo: '', // 用于显示天气信息
},
cityChange: function (e) {
const selectedCity = this.data.cityList[e.detail.value];
this.setData({
selectedCity: selectedCity,
});
},
getWeather: function () {
// 根据选定的城市调用后台服务查询天气信息
const selectedCity = this.data.selectedCity;
this.queryWeather(selectedCity);
},
queryWeather: function (city) {
// 向后台服务发送查询天气的请求
wx.request({
url: 'https://your-backend-api.com/queryWeather',
method: 'GET',
data: {
city: city,
},
success: (res) => {
if (res.data.success) {
// 更新界面显示天气信息
this.setData({
weatherInfo: res.data.weatherInfo,
});
} else {
wx.showToast({
title: '查询失败',
icon: 'none',
duration: 2000,
});
}
},
fail: (err) => {
console.error('查询请求失败', err);
},
});
},
});
2. 后台服务提供查询天气接口:
- 在后台服务中实现查询天气的逻辑,接收小程序发送的查询请求,查询天气信息并返回。
// 示例中的 Node.js Express 框架代码
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/queryWeather', (req, res) => {
const city = req.query.city;
// 在这里进行天气查询逻辑,可以调用天气接口或其他天气数据源
// 示例中直接返回一个假的查询结果
const weatherInfo = `晴天`;
// 返回查询结果给小程序
res.json({ success: true, weatherInfo: weatherInfo });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在实际应用中,城市服务可能包括更多的功能,如查询交通信息、城市景点推荐等。具体实现会根据你的业务需求和可用数据源而有所不同。请确保后台服务的安全性和稳定性,并根据实际需求进行错误处理。
转载请注明出处:http://www.pingtaimeng.com/article/detail/750/微信小程序