titlenview.searchinput仅app/h5支持，小程序端完全不生效；需关闭原生导航栏并手写自定义导航栏+定位实现居中搜索框，且事件监听需分别处理。
titleNView 是唯一能在原生导航栏中间放搜索框的方案，但只支持 App 和 H5，**小程序端完全不生效**。直接写 searchInput 配置不会在微信/支付宝/抖音等小程序里显示任何东西。
为什么不能直接用 searchInput 实现小程序中间搜索框
uni-app 的 titleNView.searchInput 是 app-plus 专属能力，依赖原生引擎渲染。小程序平台（mp-weixin、mp-alipay 等）压根不读取这个字段——你配了也等于没配，控制台无报错，但界面毫无反应。
App/H5 端：用 titleNView + searchInput 配置居中搜索框
必须在 pages.json 对应页面的 style 下配置，且仅对 app-plus 生效：
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": {
"searchInput": {
"align": "center",
"backgroundColor": "#f5f5f5",
"borderRadius": "16px",
"placeholder": "搜索商品",
"disabled": false
}
}
}
}
}
-
align: "center"才能居中；"left"或"right"会靠边 -
borderRadius必须带单位px，不支持rem或% -
disabled: false才允许点击触发输入；设为true就只是个静态图 - H5 端表现和 App 基本一致，但字体大小、圆角渲染可能有细微差异
小程序端：必须手写自定义导航栏 + 定位模拟居中
步骤是：关闭原生导航栏 → 页面顶部写一个 <view></view> 模拟导航栏 → 用 flex 或绝对定位把搜索框“摆”到视觉中心。
- 先在
pages.json中关掉原生栏："navigationStyle": "custom" - 在页面
<template></template>顶部插入自定义结构，例如：<view class="custom-nav"><view class="search-box"><input placeholder="搜索商品"></view></view> - 关键样式：
.custom-nav { padding-top: var(--status-bar-height); height: 44px + var(--status-bar-height); }，再用justify-content: center居中.search-box - 注意：不同小程序状态栏高度不同，需通过
uni.getSystemInfo动态注入--status-bar-height变量
监听搜索行为：onNavigationBarSearchInputChanged 不跨端
只有 App/H5 端能用 onNavigationBarSearchInputChanged 监听输入；小程序端必须绑定 @input 或 @confirm 到你手写的 <input> 上。
- App/H5：该生命周期函数会返回
{ text: string, confirm: boolean }，confirm为true表示用户按了回车或搜索键 - 小程序：
@confirm触发时机更可靠，@input会高频触发，慎用于防抖逻辑 - 别在
onLoad里调uni.hideKeyboard()—— 小程序端无效，App/H5 也不稳定
titleNView 的事件体系**。很多团队卡在“为什么小程序点不动搜索框”，根源就是误以为 searchInput 跨端通用。
