app端存搜索历史必须用uni.setstoragesync,先读取、去重截断至10条再写入;关键词云渲染应预设字号类、提前计算颜色、超15条改用scroll-view;ios静默失败需过滤控制字符并加try-catch;点击关键词后需this.$nexttick().focus()唤起键盘。

uni-app App端怎么存搜索历史关键词
App端不能直接用 localStorage 做持久化——iOS WKWebView 和 Android 低版本 WebView 对它的支持不稳定,写入后重启可能丢失。必须用 uni.setStorage 或 uni.setStorageSync。
实际操作中,推荐用同步 API 避免异步时序问题(比如用户连续点两次搜索,回调乱序导致覆盖):
- 每次新增关键词前,先读取已有列表:
uni.getStorageSync('searchHistory') - 去重并截断(建议最多 10 条):
Array.from(new Set([newKeyword, ...oldList])).slice(0, 10) - 再写入:
uni.setStorageSync('searchHistory', newList)
关键词云渲染卡顿或错位怎么办
直接用 v-for 渲染一堆 <text></text> 标签,在低端安卓机上容易掉帧,尤其配合字体大小随机、颜色随机等“云”效果时。
关键不是样式炫,而是渲染策略:
- 避免在
text内联 style 里动态算fontSize,改用预设几档 class:size-s/size-m/size-l - 不要用
Math.random()在模板里实时生成颜色——提前在 data 里算好数组,按索引取值 - 关键词超过 15 条就别硬撑“云”布局,降级为横向滚动
scroll-view更稳
为什么 iOS 上搜完没记录,Android 却正常
这是典型平台差异:iOS 的 uni.setStorageSync 在某些场景下会静默失败(比如写入超大字符串、或路径含非法字符),但不抛错,也不触发 catch。
排查和修复要点:
- 检查关键词是否含控制字符(如
\u2028、\u2029)——JSON 序列化会出错,存之前先keyword.replace(/[\u2028\u2029]/g, '') - 别把整个 history 数组转成超长字符串拼接,老老实实用
JSON.stringify存原生数组 - 加一层兜底日志:
try { uni.setStorageSync(...) } catch(e) { console.warn('save history failed:', e) }
怎么让关键词云点击后自动带入搜索框并触发搜索
不能只靠 @click="inputValue = item",因为 App 端 input 组件的 v-model 在某些机型上不会自动触发软键盘或 focus。
必须显式调用原生能力:
- 给 input 加 ref:
<input ref="searchInput" v-model="inputValue"> - 点击关键词后:
this.inputValue = item; this.$nextTick(() => this.$refs.searchInput?.focus()) - 如果需要回车即搜,监听
@confirm而非@keyup.enter(后者在 App 端不可靠)
复杂点在于 focus 后光标位置——如果 input 已有值,iOS 可能默认跳到末尾;真要精准控制,得用 uni.createSelectorQuery() + context.focus,但多数场景没必要,先保证能唤起键盘再说。










