微信小程序农户手机上的「农场管家」平台搭好了但农户不可能打开电脑看数据。他们需要手机上扫一下就能看到大棚温湿度、点一下就能远程开水泵。这篇用 UniAppVue 3开发一个小程序实时数据、远程控制、告警推送、农事记录。为什么不学微信原生开发微信原生开发用 WXML WXSS JS语法独一份不能用 Vue/React 生态。UniApp 的好处一套代码编译到微信小程序 H5 App用 Vue 3 组合式 API前端人不需额外学习成本插件生态uView UI 等够用微信扫码即用农户零安装安装 UniApp CLInpminstall-gdcloudio/uvm uvm use3.0.0 npx degit dcloudio/uni-preset-vue#vite farm-miniappcdfarm-miniappnpminstall页面架构——四个 Tab 搞定TabBar ├── 首页 → 大棚/地块卡片列表 ├── 监控 → 选中地块的实时数据 曲线 ├── 控制 → 灌溉/通风/补光 远程开关 └── 我的 → 设置/农事记录/关于首页大棚卡片!-- pages/home/index.vue -- script setup import { ref, onMounted, onUnmounted } from vue; import { connectMQTT } from /utils/mqtt; const devices ref([]); let mqttClient null; onMounted(async () { // 先从服务端拉设备列表 const res await uni.request({ url: ${BASE_URL}/api/devices }); devices.value res.data; // 再连 MQTT 收实时数据更新卡片 mqttClient connectMQTT(); mqttClient.on(message, (topic, payload) { const data JSON.parse(payload); const device devices.value.find(d d.deviceId data.dev); if (device) { device.airTemp data.data.air_temp; device.airHumidity data.data.air_humidity; device.soilMoisture data.data.soil_moisture; device.lastUpdate new Date(data.ts * 1000); } }); mqttClient.subscribe(farm//sensor//data); }); onUnmounted(() mqttClient?.disconnect()); const navigateToDetail (device) { uni.navigateTo({ url: /pages/monitor/index?deviceId${device.deviceId} }); }; /script template view classhome view classheader text classtitle我的农场/text text classweather晴 26℃/text /view scroll-view classdevice-list scroll-y view v-fordevice in devices :keydevice.deviceId classdevice-card :class{ offline: !device.online } clicknavigateToDetail(device) view classcard-header text classcard-title{{ device.name }}/text view classstatus-dot :classdevice.online ? online : offline / /view view classcard-body view classdata-item text classdata-value{{ device.airTemp ?? -- }}℃/text text classdata-label温度/text /view view classdata-item text classdata-value{{ device.airHumidity ?? -- }}%/text text classdata-label湿度/text /view view classdata-item text classdata-value{{ device.soilMoisture ?? -- }}%/text text classdata-label土壤/text /view /view text classcard-time{{ device.lastUpdate ?? 暂无数据 }}/text /view view v-ifdevices.length 0 classempty text还没有添加设备联系管理员/text /view /scroll-view /view /template监控页实时曲线用 ECharts 的微信小程序版echarts-for-weixin画实时曲线!-- pages/monitor/index.vue -- script setup import { ref, onMounted, onUnmounted } from vue; const chartData ref({ temp: [], humidity: [], soil: [] }); let ws null; onMounted(() { // WebSocket 订阅该设备的历史 实时数据 ws uni.connectSocket({ url: wss://your-server/ws/device/${deviceId}, }); ws.onMessage((res) { const point JSON.parse(res.data); chartData.value.temp.push([point.ts * 1000, point.air_temp]); chartData.value.humidity.push([point.ts * 1000, point.air_humidity]); chartData.value.soil.push([point.ts * 1000, point.soil_moisture]); // 只保留最近 500 个点防止内存溢出 if (chartData.value.temp.length 500) { chartData.value.temp.shift(); } }); }); onUnmounted(() ws?.close()); /script template view classmonitor view classcurrent-values text classbig-temp26.5℃/text text classsub-value湿度 68% | 土壤 35%/text /view !-- echarts 组件用 echarts-for-weixin -- ec-canvas refchart canvas-idmonitor-chart :ecchartOption / view classtime-tabs text classtab active1h/text text classtab6h/text text classtab24h/text text classtab7d/text /view /view /template控制页一键灌溉远程控制的核心是「小程序 → MQTT → ESP32 → 继电器 → 电磁阀」。!-- pages/control/index.vue -- script setup import { ref } from vue; const BASE_URL https://your-server; const valves ref([ { id: 1, name: 大棚A 灌溉阀, status: false, deviceId: pump_01 }, { id: 2, name: 大棚A 通风扇, status: false, deviceId: fan_01 }, { id: 3, name: 大棚A 补光灯, status: false, deviceId: light_01 }, ]); const toggleValve async (valve) { // 1. 调后端 API后端 publish MQTT 指令 const res await uni.request({ url: ${BASE_URL}/api/devices/${valve.deviceId}/cmd, method: POST, data: { cmd: valve.status ? off : on, seq: Date.now() } }); if (res.data.success) { valve.status !valve.status; uni.showToast({ title: ${valve.name} ${valve.status ? 已开启 : 已关闭} }); } }; // 定时灌溉 const startTimedIrrigation () { uni.request({ url: ${BASE_URL}/api/devices/pump_01/cmd, method: POST, data: { cmd: irrigate, seq: Date.now(), params: { duration: 600, valve: 1 } // 10 分钟 } }); }; /script template view classcontrol view classsection text classsection-title执行器/text view v-forvalve in valves :keyvalve.id classcontrol-item text{{ valve.name }}/text switch :checkedvalve.status changetoggleValve(valve) color#07c160 / /view /view view classsection text classsection-title快捷操作/text button classquick-btn clickstartTimedIrrigation 定时灌溉 10 分钟 /button /view /view /template告警推送微信服务通知普通消息模板需要用户主动打开小程序才能看到。要让农户及时收到告警必须用微信服务通知订阅消息。在微信公众平台 → 订阅消息 → 申请模板如「设备告警通知」用户在小程序里点击授权按钮后端检测到告警时调微信 API 推送// 后端发订阅消息publicvoidsendAlarmNotification(Stringopenid,AlarmRecordalarm){WxMaSubscribeMessagemsgnewWxMaSubscribeMessage();msg.setToUser(openid);msg.setTemplateId(模板ID);msg.setPage(pages/monitor/index?deviceIdalarm.getDeviceId());msg.addData(newData(thing1,alarm.getRuleName()));// 告警类型msg.addData(newData(thing2,alarm.getDeviceName()));// 设备名称msg.addData(newData(amount3,String.valueOf(alarm.getValue())));// 当前值msg.addData(newData(thing4,alarm.getLevelText()));// 告警级别wxMaService.getSubscribeService().sendSubscribeMsg(msg);}农事记录让农户在手机上记下每次浇水、施肥、打药的时间——这个功能做极简就行一个表单 一个列表。script setup const records ref([]); const form reactive({ type: , note: , date: new Date() }); const addRecord async () { await uni.request({ url: ${BASE_URL}/api/farm-records, method: POST, data: { ...form, deviceId: currentDevice.deviceId } }); records.value.unshift({ ...form }); form.note ; }; /script template view classrecord-form picker modeselector :range[浇水,施肥,打药,除草,采收] change(e) form.type [water,fertilize,pesticide,weed,harvest][e.detail.value] text{{ form.type || 选择类型 }}/text /picker textarea v-modelform.note placeholder备注... / button clickaddRecord记一笔/button /view /template小程序提醒首次打开需要微信授权登录uni.login→ 后端换 openid → 存用户绑定。UI 尽量大字、大按钮——农户里不少是 50 岁以上的大叔大妈别搞 12px 的极小字。下一篇《自动灌溉系统AI 什么时候浇水比老农还准》——从简单的定时/阈值控制到结合天气预报、作物生长周期的智能算法。