城市服务通常涉及到获取城市信息、查询天气、交通等城市相关的信息。以下是一个简单的微信小程序城市服务的示例,包括获取城市列表和查询天气两个功能:

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/微信小程序