1、自定义导航栏样式可以在文件中定义,格式如下：

    "pages" : [{

        "path" : "pages/index/index", //默认在index.vue中添加按钮

        "style" : {

            "navigationBarTitleText" : "XXXXX", //标题名

            "titleNView": {

                "backgroundcolor": "red",

                "titletext": "iflower",

                "titlecolor": "#000000",

                "buttons": [{ //添加自定义按钮入口

                   //此处引用阿里图标库图标//（请参考https://www.jianshu.com/p/5347eabff1e4）

                    "text": "\ue609",

                    "fontSrc": "/static/font/iconfont.ttf",

                    "fontSize": "22px",

                    "float": "left", //靠左第一个

                    "id":"leftMenu" //自定义字段，用于以后对按钮事件处理

                },{

                    "text": "\ue639",

                    "fontSrc": "/static/font/iconfont.ttf",

                    "fontSize": "22px",

                    "float": "right", //靠右第一个

                    "id":"xiaoxi",

                    "redDot":true //默认图标按钮右上角有红色点状标志

                },{

                    …… //其他按钮配置

                }]

            }

        }

    },{

        …… //其他页面配置

    }]

2、配置好界面，导航栏效果如下

    ​​

3、在index.vue页面添加导航栏按钮click监听事件

    在<script>标签下的export default {}中添加监听，格式如下。

    export default {

    data() {

        return {

            …… //其他初始化产生声明

            isLeftShow: false, //左侧导航栏

        }

    },

    onNavigationBarButtonTap(e) { //导航栏自定义按钮点击监听事件

        /** 打印e的结果

        {"text" : "" , "fontSrc" : "/static/font/iconfont.ttf" , "fontSize" : "22px" , "float" : "right" , "id" : "xiaoxi" , "redDot" : true , "__cb__" : {"id" : "plus91557906063813" , "htmlId" : "204513757" } , "index" : 1 }

        **/

        console.log(JSON.stringify(e));

        switch(e.id){

        case "saoyisao": //二维码扫描

            uni.scanCode({ //调用uni手机默认扫描二维码时间

                success:function(res){

                /** 打印二维码扫描后的结果 //console.log(JSON.stringify(res));

              { "result" : http://www.baidu.com , "scanType" : "QR_CODE" , "charSet" : "utf8" , "path" : "" , "errMsg" : "scanCode:ok" }

               **/

                    if(res && res.errMsg && res.errMsg == "scanCode:ok"){

                        uni.showToast({ //uni默认吐司

                           title: '扫描成功！', //提示内容

                            duration: 2000 //提示显示时间

                        });

                       uni.navigateTo({ //跳转页面及传参

                            url: '../webview/webview?url='+res.result

                       });

                    }

               }

            });

           break;

       case "leftMenu": //跳转页面及

            this.isLeftShow = !this.isLeftShow;

            break;

       case "xiaoxi": //消息提醒

            //获取导航栏指定按钮

            let pages = getCurrentPages();

            let page = pages[pages.length - 1];

            let currentWebview = page.$getAppWebview();

            let titleObj = currentWebview.getStyle().titleNView;

            //console.log(JSON.stringify(titleObj.buttons[e.index]));

            //修改指定按钮样式

            if(titleObj.buttons[e.index].redDot){ //取消按钮右上角红点

                titleObj.buttons[e.index].redDot = false;

                currentWebview.setStyle({

                    titleNView: titleObj

                });

            }

            break;

        }

    },

    components: {

       //导入模型加载

    },

    computed: {

    //标签初始化执行函数入口

    },

    methods: {

        //其他方法入口

    }

}