‘宠物医院预约表单’小程序为何被拒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%);
}

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

---

✅ 正确解法：用微信原生<button open-type="getPhoneNumber">替代

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

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

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

Step 2：把自定义按钮，换成微信原生按钮

在index.wxml中，删掉：

<!-- ❌ 删除这个 -->
<view class="submit-btn">立即预约</view>

换成：

<!-- ✅ 微信认证按钮 -->
<button 
  class="submit-btn" 
  bindtap="onSubmit" 
  style="width:90%;margin:32px auto;"
>
  立即预约
</button>

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;
}

✅ 审核通过要点：

---

🛠️ 如何让Claude Code下次不犯错？（Prompt急救包）

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

⚠️ 重要约束：
- 所有按钮必须使用微信原生<button>组件，禁止用<view>模拟
- 禁止使用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）