1.支持H5、App端(在page.json里配置app-plus)

监听按钮、输入框事件，把onNavigationBarButtonTap和onNavigationBarSearchInputChanged写在响应的页面中。

{
 "path": "pages/search/search",
 "style": {
	"navigationBarTitleText": "",
	"app-plus": {
	   "titleNView": {
			"buttons": [
				{
				    "text": "搜索",
				    "fontSize": "16px",
				    "float": "left"
			    },
			]
		}
	 }
 }
},

2.想要自定义适配多端（包括小程序）的导航栏，可以考虑隐藏原生的，自己定义一个。
首先将原生导航栏隐藏掉

"globalStyle": { "navigationStyle": "custom" }

其次根据不同端分别设置导航栏。
App.vue

onLaunch: function() {
    uni.getSystemInfo({
        success:function(e){
            Vue.prototype.statusBar = e.statusBarHeight
            // #ifndef MP
            if(e.platform == 'android') {
                Vue.prototype.customBar = e.statusBarHeight + 50
            }else {
                Vue.prototype.customBar = e.statusBarHeight + 45
            }
            // #endif
            
            // #ifdef MP-WEIXIN
            let custom = wx.getMenuButtonBoundingClientRect()
            Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
            // #endif
            
            // #ifdef MP-ALIPAY
            Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
            // #endif
        }
    })
},

<header-bar :isBack="true" title="搜索" titleTintColor="#fff" :bgColor="{background: '#353535'}">
    <text slot="back" class="uni_btnIco iconfont icon-close"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-search"></text>
    <text slot="string" class="uni_btnString" style="color: #2B9939;">查询</text>
</header-bar>

3.已经封装好的组件

参考网址：https://www.cnblogs.com/xiaoyan2017/p/11531238.html

/**
　*　isBack              是否返回按钮
　*　title               标题
　*　titleTintColor      标题颜色
　*　bgColor             背景
　*　center              标题居中
　*　search              搜索条
　*　searchRadius        圆形搜索条
　*　fixed               是否固定
*/

<template>
    <view class="uni_topbar" :style="style">
        <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
            <!-- 返回 -->
            <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
            <view v-if="isBack" @tap="goBack">
                <slot name="back"></slot>
            </view>
            <slot name="headerL"></slot>
            <!-- 标题 -->
            <!-- #ifndef MP -->
            <view class="flex1" v-if="!search && center"></view>
            <!-- #endif -->
            <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
                {{title}}
            </view>
            <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
                <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
            </view>
            <!-- 右侧 -->
            <view class="uni_headerRight flexbox flex_row flex_alignc">
                <slot name="iconfont"></slot>
                <slot name="string"></slot>
                <slot name="image"></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBarH: this.statusBar,
                customBarH: this.customBar
            }
        },
        props: {
            isBack: { type: [Boolean, String], default: true },
            title: { type: String, default: '' },
            titleTintColor: { type: String, default: '#fff' },
            bgColor: Object,
            center: { type: [Boolean, String], default: false },
            search: { type: [Boolean, String], default: false },
            searchRadius: { type: [Boolean, String], default: false },
            fixed: { type: [Boolean, String], default: false },
        },
        computed: {
            style() {
                let _style = `height: ${this.customBarH}px;`
                return _style
            }
        },
        methods: {
            goBack() {
                uni.navigateBack()
            }
        }
    }
</script>