一 Key 調(diào)試 cursor-spacing 實戰(zhàn))
1. 真機上鍵盤頂飛輸入框問題到底出在哪小程序里做表單最容易被忽略、又最容易在真機上翻車的就是 input 和 textarea 在軟鍵盤彈出時跟輸入框的距離控制。你在開發(fā)者工具里調(diào)得好好的一上真機鍵盤一彈輸入框要么被擋在鍵盤后面要么整個頁面被頂?shù)美细唔敳繕祟}欄都飛出屏幕。這個現(xiàn)象背后其實是幾個屬性在共同作用cursor-spacing、adjust-position、hold-keyboard還有 textarea 特有的 fixed 和 auto-height。先說清楚這幾個東西分別管什么。cursor-spacing 決定的是「光標和鍵盤之間留多少距離」單位是 px默認 0。它的計算邏輯有點繞取輸入框距離頁面底部的距離和 cursor-spacing 指定的距離兩者取最小值作為光標與鍵盤的實際距離。也就是說你設了 100但輸入框本身離底部只有 40那最終就是 40。adjust-position 默認 true鍵盤彈起時頁面會自動上推把輸入框頂?shù)芥I盤上方設成 false 就完全不推鍵盤直接蓋住內(nèi)容。hold-keyboard 默認 falsefocus 狀態(tài)下點頁面其他地方鍵盤會收起設成 true 就保持不收起。textarea 比 input 多兩個坑。一個是 fixed 屬性如果你的 textarea 放在 position:fixed 的容器里必須顯式寫 fixed{{true}}否則鍵盤彈起時定位會錯亂輸入框跑到奇怪的位置。另一個是 auto-height開了自動增高后 style.height 就不生效了高度完全由內(nèi)容撐開這時候 cursor-spacing 的表現(xiàn)也會跟著變。我遇到最典型的一個場景底部固定一個輸入欄里面放 textarea用戶點開鍵盤輸入欄被頂上去但頂?shù)奈恢貌粚鈽速N著鍵盤邊緣打字時手指剛好擋住正在輸入的那一行。這就是 cursor-spacing 沒設或者設了但被「輸入框距底部距離」這個上限卡住了。要復現(xiàn)和修正這類問題光靠開發(fā)者工具不夠得在真機上按機型驗證而驗證過程里會頻繁發(fā)請求調(diào)試這時候用 TaoToken 統(tǒng)一管理 Key 和 API 通道就省事很多不用每次換環(huán)境都改一堆配置。這篇就圍繞這幾個屬性給出可復制的 WXML/WXSS 片段、真機驗證步驟以及怎么用 TaoToken 把調(diào)試請求集中管起來。適合正在做小程序表單、被鍵盤遮擋折磨過的開發(fā)者。2. 用 TaoToken 統(tǒng)一 Key 管理調(diào)試請求的前置準備調(diào)試鍵盤遮擋問題表面上是調(diào) UI實際上你會反復做一件事改屬性、真機預覽、發(fā)請求看后端返回、再改。如果每次都在代碼里硬編碼 API Key或者在不同環(huán)境之間手動切換調(diào)試節(jié)奏會被打斷。TaoToken 在這里的作用是把 Key 和 API 通道集中管理你只需要在配置里指向統(tǒng)一的 Base URL用同一個 Key就能在調(diào)試階段穩(wěn)定發(fā)請求。先明確幾個地址。官網(wǎng)入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基礎地址是 https://taotoken.net/api 注意這個不帶 UTM 參數(shù)?？刂婆_在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite API Keys 管理頁在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。模型對話調(diào)試可以走 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。如果你后面要做長期編碼或者 Agent 類的東西Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。前置準備分三步。第一步去 API Keys 頁面創(chuàng)建一個 Key復制出來。第二步確定你的請求走哪個模型Model ID 要記下來比如常見的對話模型 ID。第三步把 Base URL、Key、Model ID 這三件套寫進你的調(diào)試配置里。這三件套是后面所有請求的基礎缺一個都發(fā)不出去。為什么要強調(diào)「統(tǒng)一」因為小程序調(diào)試經(jīng)常要在真機和工具之間來回切有時候還要用不同的測試賬號。如果 Key 散落在各個文件里改一次要翻半天。集中到一個配置對象里改一處全生效。下面給一個可以直接抄的配置結(jié)構(gòu)放在小程序的 utils 或者 config 目錄下// config/api.js const API_CONFIG { baseURL: https://taotoken.net/api, apiKey: sk-你的Key填這里, modelID: 你的ModelID, timeout: 30000 }; module.exports API_CONFIG;然后在請求封裝里引用它// utils/request.js const API_CONFIG require(../config/api.js); function chatRequest(messages) { return new Promise((resolve, reject) { wx.request({ url: ${API_CONFIG.baseURL}/v1/chat/completions, method: POST, timeout: API_CONFIG.timeout, header: { Content-Type: application/json, Authorization: Bearer ${API_CONFIG.apiKey} }, data: { model: API_CONFIG.modelID, messages: messages }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else { reject(res); } }, fail: reject }); }); } module.exports { chatRequest };這樣你在調(diào)試鍵盤問題時如果需要一個后端返回來觸發(fā)某些 UI 狀態(tài)直接調(diào) chatRequest 就行不用關心 Key 在哪。注意小程序正式發(fā)布時請求域名要在后臺配置合法域名調(diào)試階段可以在開發(fā)者工具里勾選「不校驗合法域名」。這個配置結(jié)構(gòu)的好處是等你調(diào)試完鍵盤問題這套請求封裝可以直接復用到業(yè)務里不用重寫。3. 可復制的 WXML/WXSS 配置片段與屬性組合這一節(jié)直接給能跑的代碼。先看一個底部固定輸入欄的典型結(jié)構(gòu)textarea 放在 fixed 容器里這是最容易出問題的寫法也是最能體現(xiàn)幾個屬性配合的場景。!-- pages/chat/chat.wxml -- view classpage scroll-view classmsg-list scroll-y view wx:for{{messages}} wx:keyid classmsg-item{{item.text}}/view /scroll-view view classinput-bar textarea classinput-area value{{inputValue}} placeholder說點什么 fixed{{true}} auto-height{{true}} cursor-spacing20 adjust-position{{true}} hold-keyboard{{true}} show-confirm-bar{{false}} bindinputonInput bindfocusonFocus bindbluronBlur / button classsend-btn bindtaponSend發(fā)送/button /view /view對應的 WXSS/* pages/chat/chat.wxss */ .page { display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; } .msg-list { flex: 1; overflow: hidden; } .input-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; padding: 12rpx 20rpx; padding-bottom: calc(12rpx env(safe-area-inset-bottom)); background: #ffffff; border-top: 1rpx solid #eeeeee; } .input-area { flex: 1; min-height: 72rpx; max-height: 240rpx; padding: 16rpx 20rpx; font-size: 30rpx; line-height: 1.4; background: #f5f5f5; border-radius: 12rpx; box-sizing: border-box; } .send-btn { margin-left: 16rpx; font-size: 28rpx; }這段代碼里有幾個關鍵點要解釋。fixed{{true}} 是必須的因為 input-bar 用了 position:fixedtextarea 在 fixed 區(qū)域里不寫這個屬性鍵盤彈起時定位會飄。auto-height 開了之后textarea 會隨內(nèi)容長高配合 max-height 限制最高高度超過就內(nèi)部滾動。cursor-spacing20 是給光標和鍵盤之間留 20px避免光標貼著鍵盤邊緣。adjust-position 保持 true讓頁面自動上推。hold-keyboard 設 true這樣用戶點發(fā)送按鈕時鍵盤不會先收起再觸發(fā)體驗更順。如果你用的是 input 而不是 textarea結(jié)構(gòu)類似但要注意 input 沒有 fixed 和 auto-height 這兩個屬性。input 在 fixed 容器里不需要額外聲明但 cursor-spacing 的計算邏輯一樣。下面是一個 input 版本的關鍵片段view classsearch-bar input classsearch-input value{{keyword}} placeholder搜索 cursor-spacing30 adjust-position{{true}} confirm-typesearch confirm-hold{{true}} bindconfirmonSearch / /viewconfirm-hold 設 true 表示點鍵盤右下角按鈕時鍵盤不收起適合搜索場景連續(xù)輸入。confirm-type 設成 search鍵盤右下角按鈕會顯示「搜索」。屬性組合不是隨便堆的給你一張對照表按場景選場景cursor-spacingadjust-positionhold-keyboard說明底部固定輸入欄20–40truetrue防止光標貼鍵盤點按鈕不收起頁面中部表單0–20truefalse默認上推即可全屏聊天20truetrue配合 fixed 容器不希望頁面被頂0falsefalse自己控制滾動位置這里有個容易踩的坑cursor-spacing 設得再大也不會超過「輸入框距底部距離」這個上限。所以如果你發(fā)現(xiàn)設了 100 但實際只留了 30不是屬性沒生效是輸入框本身離底部就只有 30。解決辦法是把輸入框往上挪或者接受這個上限。4. 真機驗證請求與成功結(jié)果確認代碼寫完了得在真機上驗證。開發(fā)者工具的模擬鍵盤和真機行為差異很大尤其是 adjust-position 和 fixed 的表現(xiàn)必須真機跑。驗證步驟我按順序列一下。第一步用微信開發(fā)者工具打開項目點「預覽」用手機掃碼。確保手機和電腦在同一網(wǎng)絡下或者直接用真機調(diào)試模式。第二步進入帶輸入框的頁面點擊 textarea 或 input觀察鍵盤彈起時輸入框的位置。重點看三件事輸入框有沒有被鍵盤擋住光標和鍵盤之間有沒有留出 cursor-spacing 設定的距離頁面頂部有沒有被頂出屏幕。第三步在輸入狀態(tài)下點一下頁面其他區(qū)域看鍵盤是否收起。如果 hold-keyboard 設了 true點發(fā)送按鈕時鍵盤應該保持直到你手動收起。第四步切換不同機型驗證。iOS 和 Android 的鍵盤高度不一樣iOS 還有安全區(qū)域Android 各家輸入法高度也不同。至少測一臺 iOS 和一臺 Android。驗證過程中如果你需要發(fā)請求確認后端返回或者觸發(fā)某些依賴接口的 UI 狀態(tài)用前面封裝的 chatRequest。下面給一個驗證用的調(diào)用示例確認請求通道是通的// pages/chat/chat.js const { chatRequest } require(../../utils/request.js); Page({ data: { inputValue: , messages: [] }, onInput(e) { this.setData({ inputValue: e.detail.value }); }, onFocus(e) { console.log(focus, 鍵盤高度相關:, e.detail.height); }, onBlur() { console.log(blur); }, async onSend() { const text this.data.inputValue.trim(); if (!text) return; this.setData({ messages: [...this.data.messages, { id: Date.now(), text }], inputValue: }); try { const res await chatRequest([ { role: user, content: text } ]); const reply res.choices res.choices[0] ? res.choices[0].message.content : 無返回; this.setData({ messages: [...this.data.messages, { id: Date.now() 1, text: reply }] }); } catch (err) { console.error(請求失敗, err); } } });成功的結(jié)果是請求返回 200res.choices[0].message.content 有內(nèi)容消息列表里能看到回復。同時鍵盤行為符合預期輸入框在鍵盤上方光標和鍵盤之間有間距點發(fā)送鍵盤不閃退。如果你在 onFocus 里打印 e.detail.height能看到當前鍵盤的高度這個值在不同機型上不一樣可以用來動態(tài)調(diào)整 cursor-spacing。比如onFocus(e) { const keyboardHeight e.detail.height; this.setData({ cursorSpacing: keyboardHeight 300 ? 40 : 20 }); }然后在 WXML 里綁定 cursor-spacing{{cursorSpacing}}。這樣能按機型自適應比寫死一個值穩(wěn)。真機驗證時還要注意一個現(xiàn)象iOS 上如果 textarea 在 fixed 容器里沒寫 fixed{{true}}鍵盤彈起時整個輸入欄可能會跳到屏幕中間或者被鍵盤蓋住一半。Android 上則可能表現(xiàn)為輸入欄位置正確但光標位置偏移。這些都是 fixed 屬性缺失的典型癥狀。5. 本篇常見報錯與排查對照調(diào)試過程中會遇到幾類典型報錯這里按真實錯誤信息對照排查。第一類請求返回 401。這個最常見說明 Key 不對或者沒帶上。檢查 Authorization 頭是不是Bearer sk-xxx格式中間有沒有多余空格。檢查 Key 是不是從 API Keys 頁面復制的完整值有沒有漏字符。如果 Key 是對的還報 401去控制臺確認這個 Key 有沒有被禁用或者額度用完。排查入口在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。第二類local proxy failed 或者連接超時。這個通常是小程序請求域名沒配或者開發(fā)者工具沒勾「不校驗合法域名」。真機上如果沒在微信后臺配置 request 合法域名請求會直接失敗。調(diào)試階段先在工具里勾選不校驗真機調(diào)試用真機調(diào)試模式。如果確認域名沒問題還超時檢查 baseURL 是不是寫成了 https://taotoken.net/api 后面多加了斜杠或者路徑。第三類reading choices 報錯類似Cannot read property choices of undefined。這是返回結(jié)構(gòu)沒按預期解析。先打印完整 res 看結(jié)構(gòu)確認 res.data 里有沒有 choices。如果返回的是錯誤對象先處理錯誤分支再取 choices。上面的示例代碼里已經(jīng)做了res.choices res.choices[0]的判斷能避免這個報錯。第四類OAuth 相關報錯。如果你用的是某些需要 OAuth 流程的接入方式報錯信息里會出現(xiàn) OAuth 字樣。這類問題通常是回調(diào)地址或者 token 換取環(huán)節(jié)配置不對。檢查你的接入方式對應的文檔確認回調(diào) URL 和參數(shù)。文檔入口在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。第五類鍵盤相關的問題不算報錯但表現(xiàn)像 bug。比如輸入框被遮擋、頁面被頂飛、光標貼鍵盤。對照排查被遮擋看 adjust-position 是不是 false 了被頂飛看是不是沒設 cursor-spacing 導致上推過多光標貼鍵盤看 cursor-spacing 是不是 0 或者被輸入框距底部距離卡住fixed 容器里定位錯亂看 textarea 有沒有寫 fixed{{true}}。如果你用的是 CC Switch、Cline MCP 或者 Codex 這類工具做輔助調(diào)試配置里同樣要寫全三件套Base URL 填 https://taotoken.net/api Key 填你的 KeyModel ID 填對應模型。三件套缺一個都連不上。這類工具在調(diào)試鍵盤問題時能幫你快速發(fā)請求驗證后端但配置別漏項。還有一個隱蔽的坑textarea 的 auto-height 和 cursor-spacing 同時用時如果內(nèi)容很少textarea 高度很小cursor-spacing 的實際生效值會被「輸入框距底部距離」限制。這時候要么把輸入框往上抬要么接受較小的間距。實測下來把 cursor-spacing 設在 20 到 40 之間配合 adjust-position 和 fixed大部分機型都能正常。6. 把調(diào)試通道固定下來后續(xù)接入更省事鍵盤遮擋這類問題調(diào)一次可能就過去了但調(diào)試過程中建立的請求通道可以留下來。把 Base URL、Key、Model ID 三件套固定在一個配置文件里后面做其他功能時直接復用不用每次重新配。模型對話調(diào)試可以走 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。如果你后面要做長期的編碼輔助或者 Agent 類功能Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite ?；氐芥I盤問題本身記住三個屬性的分工cursor-spacing 管間距adjust-position 管上推hold-keyboard 管收起時機textarea 額外注意 fixed 和 auto-height。真機驗證時按機型測iOS 和 Android 各至少一臺。遇到遮擋先看 adjust-position遇到頂飛先看 cursor-spacing遇到定位錯亂先看 fixed。這套排查順序能覆蓋大部分場景。 小程序 input 和 textarea 軟鍵盤與輸入框的距離，及其特殊屬性：用 TaoToken 統(tǒng)一 Key 調(diào)試 cursor-spacing 實戰(zhàn)
1. 真機上鍵盤頂飛輸入框問題到底出在哪小程序里做表單最容易被忽略、又最容易在真機上翻車的就是 input 和 textarea 在軟鍵盤彈出時跟輸入框的距離控制。你在開發(fā)者工具里調(diào)得好好的一上真機鍵盤一彈輸入框要么被擋在鍵盤后面要么整個頁面被頂?shù)美细唔敳繕祟}欄都飛出屏幕。這個現(xiàn)象背后其實是幾個屬性在共同作用cursor-spacing、adjust-position、hold-keyboard還有 textarea 特有的 fixed 和 auto-height。先說清楚這幾個東西分別管什么。cursor-spacing 決定的是「光標和鍵盤之間留多少距離」單位是 px默認 0。它的計算邏輯有點繞取輸入框距離頁面底部的距離和 cursor-spacing 指定的距離兩者取最小值作為光標與鍵盤的實際距離。也就是說你設了 100但輸入框本身離底部只有 40那最終就是 40。adjust-position 默認 true鍵盤彈起時頁面會自動上推把輸入框頂?shù)芥I盤上方設成 false 就完全不推鍵盤直接蓋住內(nèi)容。hold-keyboard 默認 falsefocus 狀態(tài)下點頁面其他地方鍵盤會收起設成 true 就保持不收起。textarea 比 input 多兩個坑。一個是 fixed 屬性如果你的 textarea 放在 position:fixed 的容器里必須顯式寫 fixed{{true}}否則鍵盤彈起時定位會錯亂輸入框跑到奇怪的位置。另一個是 auto-height開了自動增高后 style.height 就不生效了高度完全由內(nèi)容撐開這時候 cursor-spacing 的表現(xiàn)也會跟著變。我遇到最典型的一個場景底部固定一個輸入欄里面放 textarea用戶點開鍵盤輸入欄被頂上去但頂?shù)奈恢貌粚鈽速N著鍵盤邊緣打字時手指剛好擋住正在輸入的那一行。這就是 cursor-spacing 沒設或者設了但被「輸入框距底部距離」這個上限卡住了。要復現(xiàn)和修正這類問題光靠開發(fā)者工具不夠得在真機上按機型驗證而驗證過程里會頻繁發(fā)請求調(diào)試這時候用 TaoToken 統(tǒng)一管理 Key 和 API 通道就省事很多不用每次換環(huán)境都改一堆配置。這篇就圍繞這幾個屬性給出可復制的 WXML/WXSS 片段、真機驗證步驟以及怎么用 TaoToken 把調(diào)試請求集中管起來。適合正在做小程序表單、被鍵盤遮擋折磨過的開發(fā)者。2. 用 TaoToken 統(tǒng)一 Key 管理調(diào)試請求的前置準備調(diào)試鍵盤遮擋問題表面上是調(diào) UI實際上你會反復做一件事改屬性、真機預覽、發(fā)請求看后端返回、再改。如果每次都在代碼里硬編碼 API Key或者在不同環(huán)境之間手動切換調(diào)試節(jié)奏會被打斷。TaoToken 在這里的作用是把 Key 和 API 通道集中管理你只需要在配置里指向統(tǒng)一的 Base URL用同一個 Key就能在調(diào)試階段穩(wěn)定發(fā)請求。先明確幾個地址。官網(wǎng)入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基礎地址是 https://taotoken.net/api 注意這個不帶 UTM 參數(shù)?？刂婆_在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite API Keys 管理頁在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。模型對話調(diào)試可以走 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。如果你后面要做長期編碼或者 Agent 類的東西Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。前置準備分三步。第一步去 API Keys 頁面創(chuàng)建一個 Key復制出來。第二步確定你的請求走哪個模型Model ID 要記下來比如常見的對話模型 ID。第三步把 Base URL、Key、Model ID 這三件套寫進你的調(diào)試配置里。這三件套是后面所有請求的基礎缺一個都發(fā)不出去。為什么要強調(diào)「統(tǒng)一」因為小程序調(diào)試經(jīng)常要在真機和工具之間來回切有時候還要用不同的測試賬號。如果 Key 散落在各個文件里改一次要翻半天。集中到一個配置對象里改一處全生效。下面給一個可以直接抄的配置結(jié)構(gòu)放在小程序的 utils 或者 config 目錄下// config/api.js const API_CONFIG { baseURL: https://taotoken.net/api, apiKey: sk-你的Key填這里, modelID: 你的ModelID, timeout: 30000 }; module.exports API_CONFIG;然后在請求封裝里引用它// utils/request.js const API_CONFIG require(../config/api.js); function chatRequest(messages) { return new Promise((resolve, reject) { wx.request({ url: ${API_CONFIG.baseURL}/v1/chat/completions, method: POST, timeout: API_CONFIG.timeout, header: { Content-Type: application/json, Authorization: Bearer ${API_CONFIG.apiKey} }, data: { model: API_CONFIG.modelID, messages: messages }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else { reject(res); } }, fail: reject }); }); } module.exports { chatRequest };這樣你在調(diào)試鍵盤問題時如果需要一個后端返回來觸發(fā)某些 UI 狀態(tài)直接調(diào) chatRequest 就行不用關心 Key 在哪。注意小程序正式發(fā)布時請求域名要在后臺配置合法域名調(diào)試階段可以在開發(fā)者工具里勾選「不校驗合法域名」。這個配置結(jié)構(gòu)的好處是等你調(diào)試完鍵盤問題這套請求封裝可以直接復用到業(yè)務里不用重寫。3. 可復制的 WXML/WXSS 配置片段與屬性組合這一節(jié)直接給能跑的代碼。先看一個底部固定輸入欄的典型結(jié)構(gòu)textarea 放在 fixed 容器里這是最容易出問題的寫法也是最能體現(xiàn)幾個屬性配合的場景。!-- pages/chat/chat.wxml -- view classpage scroll-view classmsg-list scroll-y view wx:for{{messages}} wx:keyid classmsg-item{{item.text}}/view /scroll-view view classinput-bar textarea classinput-area value{{inputValue}} placeholder說點什么 fixed{{true}} auto-height{{true}} cursor-spacing20 adjust-position{{true}} hold-keyboard{{true}} show-confirm-bar{{false}} bindinputonInput bindfocusonFocus bindbluronBlur / button classsend-btn bindtaponSend發(fā)送/button /view /view對應的 WXSS/* pages/chat/chat.wxss */ .page { display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; } .msg-list { flex: 1; overflow: hidden; } .input-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; padding: 12rpx 20rpx; padding-bottom: calc(12rpx env(safe-area-inset-bottom)); background: #ffffff; border-top: 1rpx solid #eeeeee; } .input-area { flex: 1; min-height: 72rpx; max-height: 240rpx; padding: 16rpx 20rpx; font-size: 30rpx; line-height: 1.4; background: #f5f5f5; border-radius: 12rpx; box-sizing: border-box; } .send-btn { margin-left: 16rpx; font-size: 28rpx; }這段代碼里有幾個關鍵點要解釋。fixed{{true}} 是必須的因為 input-bar 用了 position:fixedtextarea 在 fixed 區(qū)域里不寫這個屬性鍵盤彈起時定位會飄。auto-height 開了之后textarea 會隨內(nèi)容長高配合 max-height 限制最高高度超過就內(nèi)部滾動。cursor-spacing20 是給光標和鍵盤之間留 20px避免光標貼著鍵盤邊緣。adjust-position 保持 true讓頁面自動上推。hold-keyboard 設 true這樣用戶點發(fā)送按鈕時鍵盤不會先收起再觸發(fā)體驗更順。如果你用的是 input 而不是 textarea結(jié)構(gòu)類似但要注意 input 沒有 fixed 和 auto-height 這兩個屬性。input 在 fixed 容器里不需要額外聲明但 cursor-spacing 的計算邏輯一樣。下面是一個 input 版本的關鍵片段view classsearch-bar input classsearch-input value{{keyword}} placeholder搜索 cursor-spacing30 adjust-position{{true}} confirm-typesearch confirm-hold{{true}} bindconfirmonSearch / /viewconfirm-hold 設 true 表示點鍵盤右下角按鈕時鍵盤不收起適合搜索場景連續(xù)輸入。confirm-type 設成 search鍵盤右下角按鈕會顯示「搜索」。屬性組合不是隨便堆的給你一張對照表按場景選場景cursor-spacingadjust-positionhold-keyboard說明底部固定輸入欄20–40truetrue防止光標貼鍵盤點按鈕不收起頁面中部表單0–20truefalse默認上推即可全屏聊天20truetrue配合 fixed 容器不希望頁面被頂0falsefalse自己控制滾動位置這里有個容易踩的坑cursor-spacing 設得再大也不會超過「輸入框距底部距離」這個上限。所以如果你發(fā)現(xiàn)設了 100 但實際只留了 30不是屬性沒生效是輸入框本身離底部就只有 30。解決辦法是把輸入框往上挪或者接受這個上限。4. 真機驗證請求與成功結(jié)果確認代碼寫完了得在真機上驗證。開發(fā)者工具的模擬鍵盤和真機行為差異很大尤其是 adjust-position 和 fixed 的表現(xiàn)必須真機跑。驗證步驟我按順序列一下。第一步用微信開發(fā)者工具打開項目點「預覽」用手機掃碼。確保手機和電腦在同一網(wǎng)絡下或者直接用真機調(diào)試模式。第二步進入帶輸入框的頁面點擊 textarea 或 input觀察鍵盤彈起時輸入框的位置。重點看三件事輸入框有沒有被鍵盤擋住光標和鍵盤之間有沒有留出 cursor-spacing 設定的距離頁面頂部有沒有被頂出屏幕。第三步在輸入狀態(tài)下點一下頁面其他區(qū)域看鍵盤是否收起。如果 hold-keyboard 設了 true點發(fā)送按鈕時鍵盤應該保持直到你手動收起。第四步切換不同機型驗證。iOS 和 Android 的鍵盤高度不一樣iOS 還有安全區(qū)域Android 各家輸入法高度也不同。至少測一臺 iOS 和一臺 Android。驗證過程中如果你需要發(fā)請求確認后端返回或者觸發(fā)某些依賴接口的 UI 狀態(tài)用前面封裝的 chatRequest。下面給一個驗證用的調(diào)用示例確認請求通道是通的// pages/chat/chat.js const { chatRequest } require(../../utils/request.js); Page({ data: { inputValue: , messages: [] }, onInput(e) { this.setData({ inputValue: e.detail.value }); }, onFocus(e) { console.log(focus, 鍵盤高度相關:, e.detail.height); }, onBlur() { console.log(blur); }, async onSend() { const text this.data.inputValue.trim(); if (!text) return; this.setData({ messages: [...this.data.messages, { id: Date.now(), text }], inputValue: }); try { const res await chatRequest([ { role: user, content: text } ]); const reply res.choices res.choices[0] ? res.choices[0].message.content : 無返回; this.setData({ messages: [...this.data.messages, { id: Date.now() 1, text: reply }] }); } catch (err) { console.error(請求失敗, err); } } });成功的結(jié)果是請求返回 200res.choices[0].message.content 有內(nèi)容消息列表里能看到回復。同時鍵盤行為符合預期輸入框在鍵盤上方光標和鍵盤之間有間距點發(fā)送鍵盤不閃退。如果你在 onFocus 里打印 e.detail.height能看到當前鍵盤的高度這個值在不同機型上不一樣可以用來動態(tài)調(diào)整 cursor-spacing。比如onFocus(e) { const keyboardHeight e.detail.height; this.setData({ cursorSpacing: keyboardHeight 300 ? 40 : 20 }); }然后在 WXML 里綁定 cursor-spacing{{cursorSpacing}}。這樣能按機型自適應比寫死一個值穩(wěn)。真機驗證時還要注意一個現(xiàn)象iOS 上如果 textarea 在 fixed 容器里沒寫 fixed{{true}}鍵盤彈起時整個輸入欄可能會跳到屏幕中間或者被鍵盤蓋住一半。Android 上則可能表現(xiàn)為輸入欄位置正確但光標位置偏移。這些都是 fixed 屬性缺失的典型癥狀。5. 本篇常見報錯與排查對照調(diào)試過程中會遇到幾類典型報錯這里按真實錯誤信息對照排查。第一類請求返回 401。這個最常見說明 Key 不對或者沒帶上。檢查 Authorization 頭是不是Bearer sk-xxx格式中間有沒有多余空格。檢查 Key 是不是從 API Keys 頁面復制的完整值有沒有漏字符。如果 Key 是對的還報 401去控制臺確認這個 Key 有沒有被禁用或者額度用完。排查入口在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。第二類local proxy failed 或者連接超時。這個通常是小程序請求域名沒配或者開發(fā)者工具沒勾「不校驗合法域名」。真機上如果沒在微信后臺配置 request 合法域名請求會直接失敗。調(diào)試階段先在工具里勾選不校驗真機調(diào)試用真機調(diào)試模式。如果確認域名沒問題還超時檢查 baseURL 是不是寫成了 https://taotoken.net/api 后面多加了斜杠或者路徑。第三類reading choices 報錯類似Cannot read property choices of undefined。這是返回結(jié)構(gòu)沒按預期解析。先打印完整 res 看結(jié)構(gòu)確認 res.data 里有沒有 choices。如果返回的是錯誤對象先處理錯誤分支再取 choices。上面的示例代碼里已經(jīng)做了res.choices res.choices[0]的判斷能避免這個報錯。第四類OAuth 相關報錯。如果你用的是某些需要 OAuth 流程的接入方式報錯信息里會出現(xiàn) OAuth 字樣。這類問題通常是回調(diào)地址或者 token 換取環(huán)節(jié)配置不對。檢查你的接入方式對應的文檔確認回調(diào) URL 和參數(shù)。文檔入口在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。第五類鍵盤相關的問題不算報錯但表現(xiàn)像 bug。比如輸入框被遮擋、頁面被頂飛、光標貼鍵盤。對照排查被遮擋看 adjust-position 是不是 false 了被頂飛看是不是沒設 cursor-spacing 導致上推過多光標貼鍵盤看 cursor-spacing 是不是 0 或者被輸入框距底部距離卡住fixed 容器里定位錯亂看 textarea 有沒有寫 fixed{{true}}。如果你用的是 CC Switch、Cline MCP 或者 Codex 這類工具做輔助調(diào)試配置里同樣要寫全三件套Base URL 填 https://taotoken.net/api Key 填你的 KeyModel ID 填對應模型。三件套缺一個都連不上。這類工具在調(diào)試鍵盤問題時能幫你快速發(fā)請求驗證后端但配置別漏項。還有一個隱蔽的坑textarea 的 auto-height 和 cursor-spacing 同時用時如果內(nèi)容很少textarea 高度很小cursor-spacing 的實際生效值會被「輸入框距底部距離」限制。這時候要么把輸入框往上抬要么接受較小的間距。實測下來把 cursor-spacing 設在 20 到 40 之間配合 adjust-position 和 fixed大部分機型都能正常。6. 把調(diào)試通道固定下來后續(xù)接入更省事鍵盤遮擋這類問題調(diào)一次可能就過去了但調(diào)試過程中建立的請求通道可以留下來。把 Base URL、Key、Model ID 三件套固定在一個配置文件里后面做其他功能時直接復用不用每次重新配。模型對話調(diào)試可以走 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite 。如果你后面要做長期的編碼輔助或者 Agent 類功能Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite ?；氐芥I盤問題本身記住三個屬性的分工cursor-spacing 管間距adjust-position 管上推hold-keyboard 管收起時機textarea 額外注意 fixed 和 auto-height。真機驗證時按機型測iOS 和 Android 各至少一臺。遇到遮擋先看 adjust-position遇到頂飛先看 cursor-spacing遇到定位錯亂先看 fixed。這套排查順序能覆蓋大部分場景。