uni-app在App端动态修改原生导航栏

在App端可以通过得到webview对象，通过当前 webview 对象的 setTitleNViewButtonBadge， setTitleNViewButtonStyle， setTitleNViewSearchInputFocus，setTitleNViewSearchInputText 分别对 TitleNView 上的按钮角标，按钮，输入框等组件的样式进行修改。

对于 searchInput 还支持: 通过 webview的getStyle()，得到一个json对象，然后用json的.来获取titleNView，拿到的还是json对象，然后修改json对象，再用webview的setstyle方法把这个json对象赋值进去。

具体实现如下：

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview();  

// 修改buttons  
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
webView.setTitleNViewButtonStyle(0, {  
    text: 'hello',  
});  

// 修改按钮上的角标  
// index: 按钮索引, text: 角标文本内容  
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
});  

// 设置 searchInput的 focus  
// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

// 设置 searchInput的 text  
webView.setTitleNViewSearchInputText(text)  

// searchInput 通过 webview 的 setStyle 方法进行更新  
var tn = currentWebview.getStyle().titleNView;  
if (tn.buttons) {    
uni.getSystemInfo({    
    success:function(res){    
        if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug，searchInput的I变小写了 ，临时绕过下。更高版本会修复此bug    
            tn.searchinput.placeholder = 'test';    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        } else{    
            tn.searchInput.placeholder = 'test'; //这里有个已知bug，HBuilderX 1.9.9上，当searchInput位于首页时，动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        }    
    }    
})    
}    

// #endif

参考这个原理，可以任意修改titleNView的所有内容，titleNView的style内容详见：
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

附件为测试buttons的demo，可下载体验。

jiang2266028

您好，我想问下，动态判断顶部消息红点，怎么修改圆点样式redDot

2020-04-09 16:11

睡不醒哎

回复 y***@sina.com ：

const pages = getCurrentPages();
const page = pages[pages.length - 1];
let titleNView = page.$getAppWebview().getTitleNView();
nvue 这么获取 titleview

2020-03-18 14:08

滑滑蛋

H5可用Js模拟事件修改，可以这么写：
function changeInput(dom, st) {
var evt = new InputEvent('input', {
inputType: 'insertText',
data: st,
dataTransfer: null,
isComposing: false
});
dom.value = st;
dom.dispatchEvent(evt);
}
changeInput(document.querySelectorAll(".uni-input-input[type=search]")[0], text);
但是不会触发onNavigationBarSearchInputChanged事件，要自己再调用一次

2020-03-15 20:14

z***@qq.com

回复 1***@163.com ：

同问，H5端怎么修改导航栏search-input的value的？文档找不到

2020-01-09 11:19

bctop

回复 t***@163.com ：

文中的api 已经过期了；文档中，有新api；
这是我的nvue 写法你可以参考下：
```
onReady() {
webView =plus.webview.currentWebview();
},
onNavigationBarButtonTap(obj){
console.log(obj)
if(this.curIndex ===0){
this.curIndex = 1
webView.setTitleNViewButtonStyle(obj.index,{text:'继续编辑',fontSize:'12px',color:'#666',width:'80px'})
}else{
this.curIndex = 0
webView.setTitleNViewButtonStyle(obj.index,{fontSrc:"../../static/css/iconfont.ttf",text:"\ue660",fontSize:'18px',width:'44px'})
}

}
```

2019-12-27 14:44

我发现在动态切换字体和图标的情况下，安卓一切正常；ios 却再也没办法显示图标了；
```
if(this.curIndex ===0){
this.curIndex = 1
webView.setTitleNViewButtonStyle(obj.index,{text:'继续编辑',fontSize:'12px',color:'#666',width:'80px'})
}else{
this.curIndex = 0
webView.setTitleNViewButtonStyle(obj.index,{fontSrc:"../../static/css/iconfont.ttf",text:"\ue660",fontSize:'18px',width:'44px'})
}
```;
像这种安卓一切正常；ios 却无法显示图标

2019-12-27 14:41