钉钉微应用手机端导航栏配置

亲测可用，若有疑问请私信

一、设置导航栏颜色
在url后面拼接dd_nav_bgcolor参数即可，如下：

支持的格式:“AARRGGBB”

http://abc.xyz?dd_nav_bgcolor=FF5E97F6
二、微应用页面支持横屏
在url后面拼接dd_orientation参数即可，如下：

http://abc.xyz?dd_orientation=landscape
 Android平台上推荐打开新页面时使用openLink JSAPI。

三、隐藏导航栏右侧按钮，禁止导航栏右侧分享按钮
在url后面拼接showmenu=false参数即可，如下：

http://abc.xyz?showmenu=false
四、设置导航栏标题 
此JSAPI在iOS和Android上的显示有所不同

iOS：根据iOS的设计规范，iOS的标题在导航栏正中央

Android：根据Android的设计规范，标题显示在导航栏左侧

参数说明

参数    参数类型    说明
title    String    控制标题文本，空字符串表示显示默认文本

dd.biz.navigation.setTitle({

    title : '邮箱正文',//控制标题文本，空字符串表示显示默认文本

    onSuccess : function(result) {

        /*结构

        {

        }*/

    },

    onFail : function(err) {}

});

五、标题栏添加问号Icon
调用此jsapi之后，icon的显示位置在Android和iOS上有所区别,如下图

iOS：显示在导航栏标题的旁边，紧靠着标题

Android：显示在导航栏右侧按钮组的最左边

 

101    102    103
        
1    2    3
        

dd.biz.navigation.setIcon({

    showIcon : true,//是否显示icon

    iconIndex : 1,//显示的iconIndex,如上图

    onSuccess : function(result) {

        /*结构

        {

        }*/

        //点击icon之后将会回调这个函数

    },

    onFail : function(err) {

    //jsapi调用失败将会回调此函数

    }

});

 六、设置左侧导航按钮
如果想在Android设备上拦截返回按钮的行为，请参考事件回调，并调用此API，设置control为true，在事件回调中处理返回事件。

dd.biz.navigation.setLeft({

    control: true,//是否控制点击事件，true 控制，false 不控制， 默认false

    android: true, // 安卓端如果需要控制左上角返回事件加上这个字段，并设置为true

    text: '',//控制显示文本，空字符串表示显示默认文本

    onSuccess : function(result) {

        /*

        {}

        */

        //如果control为true，则onSuccess将在发生按钮点击事件被回调

    },

    onFail : function(err) {}

});

参数说明

参数    参数类型    说明
control    Boolean    是否控制点击事件，true 控制，false 不控制， 默认false
text    String    控制显示文本，空字符串表示显示默认文本
七、隐藏/显示导航栏
调用此接口可以隐藏/显示导航栏

dd.biz.navigation.hideBar({

    hidden: true,  // true：隐藏，false：显示

    onSuccess : function(result) {

    },

    onFail : function(err) {}

})

 八、关闭当前窗口
调用此接口可以关闭当前浏览器窗口

dd.biz.navigation.close({

    onSuccess : function(result) {

        /*result结构

        {}

        */

    },

    onFail : function(err) {}

})

九、返回上级页面
调用此接口会返回前端页面的上级浏览页面，如果是H5的根页面，调用此接口会关闭当前浏览窗口。

dd.biz.navigation.goBack({

    onSuccess : function(result) {

        /*result结构

        {}

        */

    },

    onFail : function(err) {}

})

 十、设置导航栏右侧单个按钮
调用jsapi-setRight可以设置导航栏最右侧按钮的文字，并且接收点击事件，

只能设置文本按钮，需要设置按钮的icon请查看设置下面的导航栏右侧多个按钮

参数说明

参数    参数类型    说明
show    Boolean    控制按钮显示， true 显示， false 隐藏， 默认true
control    Boolean    是否控制点击事件，true 控制，false 不控制， 默认false
text    String    控制显示文本，空字符串表示显示默认文本

dd.biz.navigation.setRight({

    show: false,//控制按钮显示， true 显示， false 隐藏， 默认true

    control: true,//是否控制点击事件，true 控制，false 不控制， 默认false

    text: '发送',//控制显示文本，空字符串表示显示默认文本

    onSuccess : function(result) {

        //如果control为true，则onSuccess将在发生按钮点击事件被回调

        /*

        {}

        */

    },

    onFail : function(err) {}

});

十一、设置导航栏右侧多个按钮 
每一个item对应右上角的一个按钮

参数说明

参数    参数类型    必须    参数说明
backgroundColor    String    否    下拉菜单背景色
textColor    String    否    下拉菜单文字颜色
items    JSONArray    是    多个按钮的属性数组
item.id    String    是    每一个item的唯一标示
item.iconId    String    否    钉钉预置icon的索引值
item.text    String    是    item的文字属性
点击任一一个按钮将会回调onSuccess，并返回被点击item的id

调用示例

dd.biz.navigation.setMenu({

        backgroundColor : "#ADD8E6",

        textColor : "#ADD8E611",

        items : [

            {

                "id":"1",//字符串

            "iconId":"file",//字符串，图标命名

              "text":"帮助"

            },

            {

                "id":"2",

            "iconId":"photo",

              "text":"dierge"

            },

            {

                "id":"3",

            "iconId":"setting",

              "text":"disange",

            },

            {

                "id":"4",

            "iconId":"time",

              "text":"disige"

            }

        ],

        onSuccess: function(data) {

        /*

        {"id":"1"}

        */

        },

        onFail: function(err) {

        }

    });

多个按钮排序规则
items个数小于等于两个，将在右上角直接排列,如下图

items个数大于两个，第一个按钮将在右上角显示，其他按钮在下拉菜单中显示。

每个按钮显示规则
每个item中的“text”字段是必填项

1.导航栏上的按钮显示规则（优先级从上至下）
iconId对应的图片

text对应的文本

2.下拉菜单按钮的显示规则
下拉菜单有一个文字位，图片位，文字位直接显示text字段

图片位显示iconId对应的图片

icon索引值对应的图片
每个icon上方的字符串就是对应icon的索引

通过设置相关索引，可以为按钮设置图标

trash    time    setting    send    scan
                
reply    photo    personal    org    ok
                
more    group    forward    folder    file
                
edit    create    calendar    addfriend    add
                
search

3.自定义下拉菜单按钮的图片
定义图标的时候可以传入属性：url

dd.biz.navigation.setMenu({

        items : [

            {

                "id":"1",

                "iconId":"file",

                "text":"帮助",

                "url": "http://img.alicdn.com/tps/TB1XLjqNVXXXXc4XVXXXXXXXXXX-170-64.png"

            }

        ],

        onSuccess: function(data) {},

        onFail: function(err) {}

    });

十二、替换页面
使用新的页面替换当前页面，当前页面会被立即销毁，展示新页面，无动画。
依赖客户端3.4.2以上版本。

dd.biz.navigation.replace({

    url: 'https://xxx.com',// 新的页面链接

    onSuccess : function(result) {

        /*

        {}

        */

    },

    onFail : function(err) {}

});

参数说明

参数    参数类型    说明
url    String    新的页面链接
 十三、引用钉钉原文地址
https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0.3e284a97Z97Ym0&treeId=171&articleId=104928&docType=1#s8