手搓一个微信小程序【我的厕所】，查找离你最近的厕所你有没有过这样的经历：在陌生的商圈逛街，突然内急，却像走进了迷宫？

你有没有过这样的经历：在陌生的商圈逛街，突然内急，却像走进了迷宫？看着指示牌走了五分钟，发现那是“员工通道”或者正在“维修中”？带着老人小孩，急需找一个有“第三卫生间”或“母婴室”的地方，却问遍了保安都说不清？最尴尬的是，终于找到了，推开门却发现里面排起了长龙，或者卫生状况惨不忍睹……

那种“绝望”，懂的都懂。感兴趣的可以微信扫一扫看看。

微信图片_20260321111233_78_260.jpg

所以为了以后“方便”，干脆自己手搓了一个小程序。

一技术栈分析

1. 微信小程序基础框架

页面结构：使用 WXML + WXSS + JS 构建页面
组件：使用微信小程序内置组件如 map 、 scroll-view 、 button 等
生命周期：利用 onLoad 、 onTabItemTap 等生命周期函数管理页面状态

2. 位置服务技术

定位 API ：使用 wx.getLocation 获取用户当前位置
地图显示：使用 map 组件显示地图和厕所标记
导航功能：使用 wx.openLocation 唤起地图导航

3. 网络请求技术

API 调用：使用 wx.request 调用高德地图 API
数据处理：处理 API 返回的数据并转换为前端可用格式

4. 全局状态管理

全局数据：使用 app.globalData 存储厕所数据，实现页面间数据共享
数据传递：通过页面参数和全局变量传递厕所信息

5. UI/UX 设计技术

科技感界面：使用深色渐变背景、半透明卡片、发光效果等
响应式设计：适配不同屏幕尺寸
动画效果：添加加载动画、脉冲效果等增强用户体验

二核心功能实现

定位功能

// app.js getLocation: function() { wx.getLocation({ type: 'gcj02', // 使用高德地图坐标系 isHighAccuracy: true, success: (res) => { this.globalData.location = { latitude: res.latitude, longitude: res.longitude }; console.log('定位成功:', this.globalData.location); }, fail: (err) => { console.error('定位失败:', err); wx.showToast({ title: '定位失败，请开启定位权限', icon: 'none' }); } }); } AI写代码 javascript 运行

附近厕所搜索

// pages/index/index.js getNearbyToilets: function(latitude, longitude) { wx.showLoading({ title: '加载中...', mask: true });

// 调用高德地图API const key = '1f4f2846422914e399b36429b5dfc356'; wx.request({ url: 'restapi.amap.com/v3/place/ar…', method: 'GET', data: { key: key, keywords: '公共厕所', location: ${longitude},${latitude}, radius: 5000, offset: 20, page: 1, extensions: 'base' }, success: (res) => { wx.hideLoading(); if (res.data.status === '1' && res.data.pois) { // 处理API返回的数据 const toilets = res.data.pois.map((item, index) => ({ id: index + 1, name: item.name, address: item.address, latitude: parseFloat(item.location.split(',')[1]), longitude: parseFloat(item.location.split(',')[0]), distance: parseInt(item.distance), status: '可用', facilities: this.getFacilitiesFromAddress(item.address), rating: 4.0 }));

    // 按距离排序
    toilets.sort((a, b) => a.distance - b.distance);
    
    // 生成地图标记
    const markers = toilets.map(toilet => ({
      id: toilet.id,
      latitude: toilet.latitude,
      longitude: toilet.longitude,
      title: toilet.name,
      iconPath: '/images/toilet-marker.png',
      width: 30,
      height: 30
    }));
    
    // 存储到全局变量
    const app = getApp();
    app.setToilets(toilets);
    
    this.setData({
      toilets,
      markers
    });
  }
}

}); } AI写代码 javascript 运行

紧急导航功能

// pages/emergency/emergency.js emergencyNavigate: function() { this.setData({ loading: true, error: false, errorMessage: '', countdown: 3 });

const app = getApp();

// 检查是否有厕所数据 if (app.globalData.toilets && app.globalData.toilets.length > 0) { // 找到距离最近的厕所 const nearestToilet = app.globalData.toilets.reduce((nearest, current) => { return nearest.distance < current.distance ? nearest : current; });

// 自动唤起地图导航
wx.openLocation({
  latitude: nearestToilet.latitude,
  longitude: nearestToilet.longitude,
  name: nearestToilet.name,
  address: nearestToilet.address,
  success: () => {
    // 导航完成后返回首页
    wx.switchTab({
      url: '/pages/index/index'
    });
  }
});

} } AI写代码 javascript 运行

详情页功能

onLoad: function(options) { // 从首页传递的参数中获取厕所信息 const app = getApp(); const { id } = options;

// 从全局数据中获取厕所信息 if (app.globalData.toilets && app.globalData.toilets.length > 0) { const toilet = app.globalData.toilets.find(t => t.id == id); if (toilet) { this.setToiletData(toilet); } } } AI写代码 javascript 运行

三，技术亮点

科技感界面设计：采用深色渐变背景、半透明卡片、发光效果等现代化设计元素，提升用户体验。
紧急导航功能：针对紧急情况，提供一键导航到最近厕所的功能，解决用户燃眉之急。
高德地图集成：使用高德地图 API 获取附近厕所数据，提供准确的位置信息。
全局状态管理：通过全局变量实现页面间数据共享，减少重复请求，提升性能。
完善的错误处理：针对定位失败、网络错误等情况提供友好的错误提示，增强用户体验。
响应式设计：适配不同屏幕尺寸，确保在各种设备上都有良好的显示效果。