在小程序/App 中嵌入黄历：日期选择器联动黄历运势
# 在小程序/App 中嵌入黄历：日期选择器联动黄历运势
> 接口 黄历运势（apiCode=856） · 免费服务 · 适用人群：小程序/移动端开发者 · 阅读时间约 7 分钟
## TL;DR
- 前端日期选择器选中某个公历日期后，把 `ymd`（`yyyyMMdd`）传给黄历运势接口即可联动展示。
- 三种接入点返回结构不同：856-2 扁平字段、856-3 是 12 时辰对象、856-4 是神煞字段，前端需分别处理。
- 建议「选中日期 → 调接口 → 渲染」，并配合按日缓存减少调用（见 [缓存策略](https://www.showapi.com/guides/huangli-cache-cost-856)）。
## Why：为什么要在前端联动
日历/日程类小程序里，用户选一天就想知道「今天宜忌、冲煞、吉时」。把黄历运势和原生日期选择器绑定，是最自然的体验。本文给一个可直接改的小程序/前端实现。
## What：前端调用约定
| 项目 | 说明 |
|------|------|
| 请求地址 | `https://route.showapi.com/856-2`（黄历）等 |
| 鉴权 | `appKey` 走 query 参数 |
| 必填 | `ymd` = 选中的公历日期，8 位 `yyyyMMdd` |
| 返回 | `showapi_res_body` 内业务字段 |
> ⚠️ 安全提示：`appKey` 直接放前端会被用户看到。生产环境建议由你的**后端**持有 AppKey 并代理调用，前端只调你自己的服务；下方示例为演示用直连写法。
## How：日期选择器联动
### 步骤 1：小程序/前端选择日期并格式化
```js
// 小程序 picker 返回 "2026-02-11"，转为 ymd
function toYmd(dateStr) {
const d = dateStr.split("-");
return d.join(""); // "20260211"
}
// 选中日期后调用
async function loadHuangli(dateStr) {
const ymd = toYmd(dateStr);
const url = `https://route.showapi.com/856-2?appKey=YOUR_APPKEY&ymd=${ymd}`;
const data = await (await fetch(url)).json();
const b = data.showapi_res_body || {};
if (b.ret_code !== 0) { console.log("失败：", b.msg); return; }
return {
nongli: b.nongli,
yi: (b.yi || "").split(" "),
ji: (b.ji || "").split(" "),
chongsha: b.chongsha,
zhishen: b.zhishen,
};
}
```
### 步骤 2：渲染（以小程序 wxml 思路）
```xml
<view class="card">
<text>农历：{{nongli}}</text>
<text>值神：{{zhishen}}</text>
<text>宜：{{yi}}</text>
<text>忌：{{ji}}</text>
<text>冲煞：{{chongsha}}</text>
</view>
```
### 步骤 3：吉时接入点（856-3）的前端解析
```js
async function loadHours(dateStr) {
const ymd = toYmd(dateStr);
const b = (await (await fetch(`https://route.showapi.com/856-3?appKey=YOUR_APPKEY&ymd=${ymd}`)).json()).showapi_res_body || {};
if (b.ret_code !== 0) return [];
const order = ["zi","chou","yin","mao","chen","si","wu","wei","shen","you","xu","hai"];
return order.map(k => ({ time: b[k]?.shijian, ji: b[k]?.jixiong, shen: b[k]?.jishen }));
}
```
## 进阶 / 边界
- **AppKey 别直连前端**：演示用直连仅方便理解；正式发布前务必改为「前端 → 你的后端 → ShowAPI」，避免 key 泄露。
- **空值兜底**：`wxcy`、部分神煞字段可能为空，渲染前做 `|| ""` 兜底。
- **十二时辰顺序**：按固定数组 `zi→hai` 遍历，不依赖返回对象顺序。
- **调用量**：每次切日期都调用会累积次数，建议前端做「同日期不重复请求」+ 后端按日缓存。
## FAQ
**Q1：小程序能直接调 route.showapi.com 吗？**
A：需在小程序后台配置 request 合法域名；但更推荐走你自己的后端代理（见上方安全提示），既保护 key 也方便缓存。
**Q2：日期选择器怎么拿到 ymd？**
A：把选择器返回的 `yyyy-MM-dd` 去掉分隔符即可（`"2026-02-11"` → `"20260211"`）。
**Q3：三个接入点前端要写三套渲染吗？**
A：结构不同，建议分别写渲染组件；共用一个「按 ymd 拉取」的工具函数即可。
## 相关能力 / 下一步阅读
- [5 分钟接入黄历运势：从注册到第一条黄历数据](https://www.showapi.com/guides/huangli-quickstart-856) —— 调用基础。
- [黄历查询接入点详解：宜忌、冲煞、值神怎么用](https://www.showapi.com/guides/huangli-day-almanac-856) —— 856-2 字段含义。
- [吉时查询接入点：如何给用户推荐当日吉时](https://www.showapi.com/guides/huangli-auspicious-hours-856) —— 856-3 解析。
- [免费接口如何做缓存：黄历运势按日期缓存省调用次数](https://www.showapi.com/guides/huangli-cache-cost-856) —— 控量。
- **本系列共 11 篇**：查看[黄历运势指南总目录](https://www.showapi.com/guides/huangli-guides-856)
