今日油价：公众号/小程序油价查询方案，菜单触发+省份选择+卡片展示
# 今日油价：公众号/小程序油价查询方案，菜单触发+省份选择+卡片展示
> 接口/接入点：今日油价 · 查询油价（138-46） · 免费 · 适用人群：公众号/小程序运营、汽车类自媒体 · 阅读时间：约 7 分钟
## TL;DR
- 公众号菜单/小程序首页挂一个「油价查询」入口，用户选省份即可看到 92/95/0 号柴油价格。
- 架构：小程序前端 → 你的云函数/后端（持有 AppKey）→ 今日油价 → 返回渲染。
- 结合每日 7 点更新做缓存，避免免费档位被刷爆。
## Why
车主类公众号、养车小程序天然适合放油价查询：用户主动查、分享率高、还能顺带推加油优惠。今日油价免费、覆盖全国 31 省，是最轻量的起步功能。
## What
| 项 | 说明 |
|----|------|
| 接入点 | 查询油价（138-46） |
| 前端 | 小程序 picker 选省 → 调云函数 |
| 后端 | 云函数/服务端代理（持有 AppKey） |
| 计费 | 免费，有档位限制 |
## How
**步骤 1：小程序省份选择（picker）**
```html
<picker mode="selector" range="{{provinces}}" bindchange="onProv">
<view>选择省份：{{provinces[idx]}}</view>
</picker>
```
**步骤 2：云函数代理（持有 AppKey，避免暴露）**
```javascript
// 云函数入口（Node.js）
const cloud = require('wx-server-sdk');
const fetch = require('node-fetch');
exports.main = async (event) => {
const prov = event.prov || '北京';
const r = await fetch('https://route.showapi.com/138-46', {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ appKey: process.env.OIL_APPKEY, prov }),
});
const item = (await r.json()).showapi_res_body.list[0];
return {
prov: item.prov,
p92: item.p92 || null, p95: item.p95 || null, p0: item.p0 || null, ct: item.ct,
};
};
```
cURL（本地验证）：
```bash
curl -X POST "https://route.showapi.com/138-46?appKey=YOUR_APPKEY" \
-H "content-type: application/x-www-form-urlencoded" -d "prov=%E5%8C%97%E4%BA%AC"
```
**步骤 3：前端卡片渲染**
```javascript
Page({
data: { provinces: ['北京','上海','广东','广西',/* ...31省 */], idx: 0, price: null },
async onProv(e) {
const prov = this.data.provinces[e.detail.value];
const res = await wx.cloud.callFunction({ name: 'oilPrice', data: { prov } });
this.setData({ price: res.result });
}
});
```
## 返回示例与解析
云函数把字符串价格透传前端，历史标号空值用 `null` 表示，前端显示「—」。
## 进阶/边界
- **AppKey 进环境变量**：放云函数环境变量，别写死在前端代码。
- **缓存很关键**：免费有档位限制，云函数层按省缓存（TTL 对齐 7 点，见[《免费也有档次限制，如何设计缓存避免超限？》](https://www.showapi.com/guides/oilprice-cache-138)）。
- **调价提醒**：结合查询行情的 `next_change_time` 做订阅消息推送（见[《涨跌幅怎么查？》](https://www.showapi.com/guides/oilprice-trend-138)）。
## FAQ
**Q：AppKey 能放小程序前端吗？**
A：不能，放云函数或后端环境变量，由服务端代理请求。
**Q：免费档位够公众号用吗？**
A：试用足够；若用户量大，做缓存并按需积分兑换更高档位。
**Q：省份 picker 怎么列全 31 省？**
A：用标准省名数组，参考[《全国 31 省油价怎么一次性拉全？》](https://www.showapi.com/guides/oilprice-province-list-138)。
## 相关能力 / 下一步阅读
- [今日油价：免费也有档次限制，如何设计缓存避免超限？](https://www.showapi.com/guides/oilprice-cache-138)
- [今日油价：车主服务 APP 如何集成？从加油页到实时油价卡片的全链路设计](https://www.showapi.com/guides/oilprice-app-integration-138)
- **本系列共 13 篇**：查看[今日油价开发指南总目录](https://www.showapi.com/guides/oilprice-guides-138)
