企业官网建设流程全解析

1. 底部悬浮输入框聚焦后键盘紧贴，问题到底出在哪

小程序里做聊天、评论、客服会话这类页面，底部悬浮输入框几乎是标配。页面结构通常是scroll-view撑满剩余高度，输入框用position: fixed; bottom: 0固定在底部，外面再包一层安全区适配。功能跑起来没问题，但一到真机上聚焦，很多人会看到同一个画面：键盘弹起，输入框被顶上去，可光标和键盘上沿几乎贴在一起，视觉上非常挤，手指点发送时也容易误触。

我一开始也以为这是样式问题，试过给输入框加padding-bottom、给外层容器加margin-bottom、甚至用env(safe-area-inset-bottom)去补，结果发现键盘弹起时这些样式根本不参与计算——因为键盘顶起输入框是小程序原生层的行为，不是 CSS 布局能控制的。真正决定这段距离的，是input/textarea组件上的cursor-spacing属性。

这个属性文档里写得很短：指定光标与键盘的距离，单位 px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值，作为光标与键盘的距离。很多人第一次看会误解成"设置多少就留多少"，其实它是取最小值，这点后面会展开。

这篇面向的是正在做小程序聊天/评论输入框、并且已经在真机上遇到"键盘紧贴输入框"的开发者。你会拿到可直接复制的cursor-spacing配置片段、adjust-position与键盘高度监听组合方案，以及 iOS / Android 真机对比验证步骤。核心检索词就是小程序输入框键盘间距、cursorSpacing 配置、adjust-position 组合方案，下面按可跟做的顺序展开。

需要先明确一个前提：cursor-spacing只对聚焦时键盘弹起的场景生效，它不改变输入框本身的布局位置，只影响"光标到键盘上沿"这段距离。理解这一点，后面排查失效原因时就不会跑偏。

2. 接入前的准备：TaoToken 配置与 cursorSpacing 生效条件

在动手改代码之前，先把两件事理清楚：一是cursor-spacing的生效条件，二是如果你打算用大模型能力辅助排查或生成配置，怎么把 TaoToken 的接入信息准备好。这两件事看起来不相关，但实际排查时经常一起用——比如让模型帮你分析一段键盘高度监听的逻辑，或者生成多端适配的配置片段。

先说cursor-spacing的生效条件，这是最容易踩坑的地方：

第一，它只在input和textarea组件上有效，普通view加contenteditable不生效。第二，它只在键盘弹起、组件聚焦时参与计算，失焦后无意义。第三，它的单位是 px，不是 rpx，写cursor-spacing="20"就是 20px，如果你按设计稿的 rpx 习惯写40，在 2 倍屏上实际只有 20px 的视觉距离，会显得偏小。第四，它取的是"input 距离底部的距离"和"cursor-spacing 指定值"的最小值，也就是说如果你的输入框本身离底部只有 10px，你设cursor-spacing=20，最终生效的是 10px，不是 20px。这一点是很多人设了没效果的根本原因。

再说 TaoToken 的接入准备。如果你要在排查过程中调用模型能力，比如让模型读一段键盘监听代码、生成 iOS/Android 差异对照表，需要先拿到 API Key 和 Base URL。TaoToken 的 API 地址是https://taotoken.net/api，模型对话入口在https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，API Key 在控制台的https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=页面创建。接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=。

如果你用的是 Claude Code 这类编码工具做长期开发，Coding Plan 入口在https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，Claude Code 的接入说明在https://taotoken.net/doc/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=。这些信息在排查阶段主要用来让模型帮你分析代码，不是必须项，但备好会省很多来回。

回到正题。在写配置之前，建议你先在真机上确认三件事：输入框当前距离底部实际多少 px、键盘弹起后输入框被顶到什么位置、光标和键盘上沿之间现在剩多少。这三个数据决定了cursor-spacing该设多少。测量方法很简单，用微信开发者工具的真机调试，或者直接在手机上截图后用标注工具量。我实测下来，聊天场景里输入框距离底部通常在 0 到 34px 之间（含安全区），所以cursor-spacing设 20 到 40 之间比较合理，设太大反而会让输入框被顶得过高，遮挡消息列表。

3. 可复制的 cursorSpacing 配置片段与 adjust-position 组合方案

这一节给可直接粘贴的配置。先看最基础的cursor-spacing写法，WXML 里：

<!-- 基础写法：cursor-spacing 单位是 px，不是 rpx --> <view class="chat-footer"> <input class="chat-input" type="text" value="{{inputValue}}" cursor-spacing="30" adjust-position="{{true}}" confirm-type="send" bindinput="onInput" bindconfirm="onSend" bindfocus="onFocus" bindblur="onBlur" /> </view>

对应的 WXSS，注意输入框本身离底部的距离会影响最终生效值：

.chat-footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px; /* 安全区适配，iOS 全面屏底部留白 */ padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eee; } .chat-input { height: 40px; line-height: 40px; background: #f5f5f5; border-radius: 20px; padding: 0 16px; font-size: 15px; }

这里有个关键点：.chat-footer的padding-bottom加上env(safe-area-inset-bottom)，会让输入框距离屏幕底部有一段距离。假设这段距离是 12px + 34px = 46px，而你设cursor-spacing="30"，那么最终生效的是min(46, 30) = 30，也就是 30px。如果你把cursor-spacing设成 60，最终生效的是min(46, 60) = 46，还是 46px。所以想让间距更大，要么调大cursor-spacing，要么调大输入框离底部的距离，两者取小。

再看adjust-position的组合。adjust-position默认是true，表示键盘弹起时页面自动上推。如果你把它设成false，页面不会自动上推，这时你需要自己监听键盘高度，手动控制输入框位置。这种方案适合输入框上方还有内容需要保持可见的场景，比如评论列表。

<!-- adjust-position=false 时，需要自己监听键盘高度 --> <view class="chat-footer" style="bottom: {{keyboardHeight}}px;"> <input class="chat-input" cursor-spacing="30" adjust-position="{{false}}" bindfocus="onFocus" bindblur="onBlur" bindkeyboardheightchange="onKeyboardHeightChange" /> </view>

Page({ data: { keyboardHeight: 0, inputValue: '' }, onKeyboardHeightChange(e) { // e.detail.height 是键盘高度，单位 px // e.detail.duration 是动画时长 const { height } = e.detail; this.setData({ keyboardHeight: height }); }, onFocus() { // 聚焦时可以做一些滚动到底部的操作 }, onBlur() { this.setData({ keyboardHeight: 0 }); }, onInput(e) { this.setData({ inputValue: e.detail.value }); }, onSend() { // 发送逻辑 this.setData({ inputValue: '' }); } });

bindkeyboardheightchange是小程序提供的键盘高度变化事件，iOS 和 Android 都会触发，但触发时机和高度值有差异。iOS 上键盘高度通常包含安全区，Android 上则不一定。实测下来，iOS 的键盘高度在 336px 左右（含底部安全区），Android 在 280 到 320px 之间浮动，具体看机型和输入法。

如果你用的是textarea，配置方式一样，但要注意textarea在 iOS 上有原生层级问题，cursor-spacing同样生效：

<textarea class="chat-textarea" value="{{inputValue}}" cursor-spacing="30" adjust-position="{{true}}" auto-height bindinput="onInput" />

这里给一个对照表，方便你根据场景选方案：

如果你在排查过程中需要让模型帮你分析这段配置，可以把上面的代码片段贴给模型，配合 TaoToken 的模型对话入口https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=使用。模型对话适合做单次分析，长期编码场景用 Coding Plan 更合适。

4. 验证请求与真机对比：iOS / Android 键盘间距实测

配置写完，必须上真机验证。开发者工具的模拟键盘和真机键盘行为差异很大，尤其是cursor-spacing的生效值，模拟器上经常看不出问题。下面是我实测的验证步骤，你可以照着走一遍。

第一步，准备两台设备，一台 iOS（建议 iPhone 12 及以上，带全面屏），一台 Android（建议中端机，比如骁龙 7 系）。两台都装上微信，用真机调试打开你的小程序页面。

第二步，在 iOS 上聚焦输入框，观察三件事：键盘弹起后输入框顶部到键盘上沿的距离、光标位置、输入框是否被顶得过高遮挡消息。用截图工具量一下光标到键盘上沿的像素距离，和你设的cursor-spacing对比。我实测 iOS 上设cursor-spacing="30"，实际生效约 30px，但因为 iOS 键盘自带一段工具栏（比如"完成"按钮），视觉上会显得比 30px 略大。

第三步，在 Android 上做同样操作。Android 的差异主要在两点：一是键盘高度不含安全区，二是部分输入法（比如搜狗、讯飞）会自带候选词栏，导致键盘实际高度比系统键盘高。我实测 Android 上设cursor-spacing="30"，实际生效约 30px，但因为候选词栏的存在，输入框和键盘之间的视觉距离会比 iOS 小。

第四步，对比两台设备的截图，如果 Android 上明显更挤，可以把cursor-spacing调到 40，或者在 Android 上单独做条件判断。小程序里可以用wx.getSystemInfoSync().platform判断平台：

const platform = wx.getSystemInfoSync().platform; const cursorSpacing = platform === 'android' ? 40 : 30;

<input cursor-spacing="{{cursorSpacing}}" ... />

第五步，验证adjust-position=false的组合方案。把adjust-position设成false，聚焦后观察输入框是否跟随键盘高度上移。如果没上移，检查bindkeyboardheightchange是否绑定成功，以及keyboardHeight是否更新到了style上。这里有个坑：style="bottom: {{keyboardHeight}}px;"里的keyboardHeight必须是数字，如果是字符串会拼接失败。

第六步，验证失焦后输入框是否回到底部。onBlur里要把keyboardHeight重置为 0，否则输入框会停在半空。

实测下来，iOS 和 Android 的主要差异集中在键盘高度、安全区、输入法候选栏这三块。如果你不想做平台判断，可以把cursor-spacing统一设成 35，两端都能接受，但 Android 上会略挤一点。追求精细的话，还是分平台设置更稳。

验证过程中如果遇到报错，比如键盘高度监听不触发、输入框位置跳动，可以对照下一节的排查清单。

5. 常见报错与失效排查：401、local proxy failed、reading choices、OAuth

这一节整理我在排查cursor-spacing和键盘监听时遇到的真实报错，以及对应的处理方式。有些报错和 TaoToken 接入相关，一并列出。

报错一：cursor-spacing设了没效果，键盘还是紧贴输入框。

这是最高频的问题。排查顺序：先确认你用的是input或textarea，不是view；再确认单位是 px，不是 rpx；然后确认输入框距离底部的距离是否小于cursor-spacing的值，如果是，最终生效的是那个更小的值；最后确认adjust-position是否为true，如果是false且没做键盘高度监听，输入框不会自动上移，cursor-spacing也就无从体现。

报错二：401 Unauthorized。

如果你在排查时调用了 TaoToken 的 API 做模型分析，遇到 401 通常是 API Key 没带对或已失效。检查请求头里的Authorization: Bearer <你的Key>，Key 从https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=获取。Base URL 用https://taotoken.net/api，不要多加路径。

报错三：local proxy failed。

这个报错通常出现在本地开发环境配置了代理，但代理地址不可达。检查你的开发工具网络设置，确认没有残留的代理配置。小程序真机调试时，手机和电脑要在同一网络下，且电脑防火墙没有拦截调试端口。

报错四：reading choices相关报错。

这类报错一般出现在解析模型返回结果时，返回结构里没有choices字段。检查请求的model参数是否正确，以及响应体是否被中间层改写。用curl直接请求一次，看原始返回：

curl https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer $TAOTOKEN_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "gpt-4o-mini", "messages": [{"role": "user", "content": "分析这段小程序键盘监听代码"}] }'

报错五：OAuth相关报错。

如果你用 Claude Code 接入，遇到 OAuth 报错，检查settings.json里的配置。Claude Code 的接入需要三件套：Base URL、API Key、Model ID。Base URL 用https://taotoken.net/api，API Key 从控制台获取，Model ID 按文档填写。配置片段参考：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的Key", "ANTHROPIC_MODEL": "claude-3-5-sonnet-20241022" } }

如果你用 Cline 或 MCP 相关工具，同样需要 Base URL、Key、Model ID 三件套，缺一不可。Codex 的auth.json配置也是类似结构，路径和字段名按官方文档来。

报错六：键盘高度监听不触发。

bindkeyboardheightchange在部分 Android 机型上不触发，尤其是定制 ROM。替代方案是用bindfocus时读取e.detail.height，或者用wx.onKeyboardHeightChange全局监听。实测下来，wx.onKeyboardHeightChange的兼容性比组件事件更好。

报错七：输入框位置跳动。

adjust-position=true和手动设置bottom同时存在时，会出现位置跳动。二选一，不要混用。如果用了adjust-position=false，就完全靠keyboardHeight控制bottom。

排查时建议一次只改一个变量，改完上真机验证，不要一次改多个配置，否则出了问题不知道是哪个引起的。

6. 长期编码与 Agent 场景的接入建议

cursor-spacing这类问题本身不复杂，但小程序多端适配的坑很碎，iOS 和 Android 的差异、不同输入法的差异、安全区的差异，加起来能消耗不少时间。如果你经常做这类跨端适配，建议把常用的排查逻辑沉淀成可复用的配置片段和检查清单，下次直接套。

对于需要长期编码、频繁让模型辅助分析代码的场景，用 Coding Plan 比单次模型对话更划算，入口在https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=。Claude Code 的接入说明在https://taotoken.net/doc/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，配置时记得 Base URL、Key、Model ID 三件套齐全。

如果只是偶尔查一下报错、验证某个模型能不能用，用模型对话入口https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=就够了。API Key 在https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=创建，接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=。

回到cursor-spacing本身，最后给一个我实测下来最稳的配置组合：cursor-spacing设 30，adjust-position设true，输入框外层加env(safe-area-inset-bottom)，Android 上单独把cursor-spacing调到 40。这套组合在 iPhone 12 到 15、以及几台主流 Android 机型上都验证过，键盘和输入框之间能保持合理间距，不会紧贴，也不会顶得过高。如果你遇到特殊机型，按第 5 节的排查顺序走一遍，基本都能定位到原因。