微信开发者工具怎么写导航栏并且在上面搜索

微信开发者工具中创建导航栏并添加搜索功能通常涉及到微信小程序的界面设计部分。你可以按照以下步骤操作：

1. **打开微信开发者工具**：首先登录微信开发者工具，并选择你要编辑的小程序项目。

2. **进入页面设计**：在左侧的文件目录树中找到你想修改的页面，点击该页面的"设计稿"或者右键选择"预览"，进入设计模式。

3. **添加顶部导航栏**：
- 点击顶部菜单栏的“+”图标，选择“自定义组件” -> “WXML”，这会添加一个新的wxml文件用于编写自定义组件。
- 编写`<navigator>`标签，设置必要的属性如`bindtap`绑定事件处理函数，`open-type="search"`表示这是搜索入口等。

<wx:navigator url="/pages/search/search" open-type="search" />

4. **样式定制**：
在.wxss文件中，可以为`navigator`组件添加背景颜色、字体样式等CSS样式，使其符合你的设计需求。

5. **保存并预览**：
编辑好后记得保存更改，回到预览模式查看效果。如果需要实现实时预览，可以在设计稿模式下直接编辑，然后切换到预览窗口检查。

6. **关联数据和事件**：
为了让搜索功能实际工作，你需要在对应的.js文件中编写处理用户输入和触发搜索的逻辑。