👥
👥
👥
👥

‘宠物医院预约表单’小程序为何被拒3次?第4次上线靠删掉这行CSS:`position: fixed`

站长
2026年4月11日 · 阅读 2577 · 点赞 31 · 预计 4 分钟
分享:

‘宠物医院预约表单’小程序为何被拒3次?第4次上线靠删掉这行CSS:position: fixed

> “页面存在吸底按钮,诱导用户点击,不符合《微信小程序设计规范》第4.3条”
> ——微信小程序审核拒绝理由(第3次)

不是功能问题,不是逻辑漏洞,而是一行CSS。

这是一个真实案例:学员阿哲(零基础,开宠物用品店),用Claude Code生成了一个「宠物疫苗预约」小程序,核心功能完美:选医院、选时间、填宠物信息、微信支付。但三次提交全被拒,原因全是同一句。

他以为要重写,其实——只需要删1行代码,加2行新代码。

---

❌ 为什么position: fixed是雷区?

微信官方明确禁止:
> “禁止使用CSS position: fixed 实现悬浮按钮、吸底导航、浮动广告等诱导点击元素”

但Claude Code默认生成的「提交预约」按钮,为了视觉突出,常自动加上:

.submit-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}

它看起来很美,但审核机器人一眼识别为“诱导点击”。

---

✅ 正确解法:用微信原生

别自己写按钮。用小程序真正认可的组件:

Step 1:删掉所有position: fixed相关CSS

index.wxss中搜索fixed,全部删除。

Step 2:把自定义按钮,换成微信原生按钮

index.wxml中,删掉:


立即预约

换成:



Step 3:给按钮加「非吸底」视觉(关键!)

index.wxss中,写:

.submit-btn {
/* 删除所有 position/fixed/transform */
background: #4a90e2;
color: white;
border-radius: 8px;
font-size: 16px;
padding: 14px 0;
margin: 32px auto;
}

✅ 审核通过要点:

  • 按钮是

  • position: fixedposition: absolute(尤其不能bottom: 0

  • 按钮位于页面流中(有上下margin,不悬浮)
  • ---

    🛠️ 如何让Claude Code下次不犯错?(Prompt急救包)

    在下次生成表单类小程序时,在Prompt末尾加:

    ⚠️ 重要约束:
  • 所有按钮必须使用微信原生

  • 禁止使用CSS position: fixed / position: absolute / bottom / top 属性

  • 提交按钮必须位于页面正常文档流中,用margin控制间距

  • 若需视觉突出,请用background-color + padding + border-radius,而非定位

  • Claude Code会严格遵守。我们测试过12次,0次违规。

    ---

    📈 审核提速技巧(亲测)

  • 截图标注:在提审备注里写:“已移除所有fixed定位,按钮为原生button组件,位于文档流中”,并附对比截图

  • 命名去诱导:按钮文字不要用“马上抢”“限时”“仅剩X名额”,改用“提交预约”“确认信息”

  • 页面留白:提交按钮下方保留至少100px空白区域(防止误判为吸底)
  • 阿哲第4次提审,2小时过审。当天收到2家宠物医院咨询:“能改成我们医院的皮肤科预约吗?”

    ---

    💡 给所有新手的提醒

    AI编程最大的风险,不是写错逻辑,而是写出‘看起来对、实际上违规’的代码

    微信审核规则每天更新,但核心原则不变:

  • 尊重用户注意力(不强推)

  • 遵守平台组件规范(不用view冒充button)

  • 保持页面呼吸感(不塞满、不悬浮)
  • 你不需要背规则。只需要在Prompt里,把规则写成“禁止条款”。

    就像告诉朋友:“别穿拖鞋来我家吃饭”——比说“请穿正式些”管用100倍。

    (附:微信小程序审核避坑清单v2.3,含所有已知CSS雷区 → [woshird.com/docs/wechat-audit-cheatsheet](https://woshird.com/docs/wechat-audit-cheatsheet))

    站长
    人人都是程序员,站长
    分享: