先上效果图

首先要在page.json中配置app-plus

官方文档:uni-app官网

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "个人信息",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "保存",
							"fontSrc": "/static/icon/iconfont.ttf",
							"fontSize": "28rpx",
							"color": "#000000"
						}]
					}
				}
			}
		},

注：fontSrc是按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。

我用的是阿里巴巴图标库，下载后放至项目中即可

 这里有一个需求就是角色不同，按钮文字不同（常见的有 进入一个页面时先显示‘保存’，点击保存后变成‘编辑’）

onShow(){
    // 自定义导航栏保存按钮
    let pages = getCurrentPages();
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview();
    currentWebview.setTitleNViewButtonStyle(0, {
        text: this.role == '1' ? '保存' : ' '  //角色为1时显示保存,否则显示为空
    });
}

操作保存按钮时在methods里面使用onNavigationBarButtonTap方法

// 保存修改
onNavigationBarButtonTap() {
	if (this.roleName == '1') {
		    //处理业务逻辑
	}
},