‘宠物医院预约表单’小程序为何被拒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: fixed、position: absolute(尤其不能bottom: 0)---
🛠️ 如何让Claude Code下次不犯错?(Prompt急救包)
在下次生成表单类小程序时,在Prompt末尾加:
⚠️ 重要约束:
所有按钮必须使用微信原生
禁止使用CSS position: fixed / position: absolute / bottom / top 属性
提交按钮必须位于页面正常文档流中,用margin控制间距
若需视觉突出,请用background-color + padding + border-radius,而非定位
Claude Code会严格遵守。我们测试过12次,0次违规。
---
📈 审核提速技巧(亲测)
阿哲第4次提审,2小时过审。当天收到2家宠物医院咨询:“能改成我们医院的皮肤科预约吗?”
---
💡 给所有新手的提醒
AI编程最大的风险,不是写错逻辑,而是写出‘看起来对、实际上违规’的代码。
微信审核规则每天更新,但核心原则不变:
你不需要背规则。只需要在Prompt里,把规则写成“禁止条款”。
就像告诉朋友:“别穿拖鞋来我家吃饭”——比说“请穿正式些”管用100倍。
(附:微信小程序审核避坑清单v2.3,含所有已知CSS雷区 → [woshird.com/docs/wechat-audit-cheatsheet](https://woshird.com/docs/wechat-audit-cheatsheet))