wap2app（十）--wap2app 添加原生底部导航，添加原生标题栏，填坑

一、添加原生标题栏

添加原生标题栏可以参照《wap2app（六）-- wap2app的原生标题头无法隐藏》，具体如下：

1.打开 sitemap.json文件 --> page配置下的"webviewId"为“common”的整个内容配置删除或注释，这时候会页面的原生标题就会出现，是带原生标题、网页标题的双标题页面。

效果：

2.原生标题默认灰色背景，黑色字体，需要根据业务需求进行修改标题样式：

sitemap.json文件 --> global-->webviewParameter 下将 titleNView：false改为如下代码修改全局标题样式：

"titleNView": {//启用原生导航条

    "backgroundColor": "#fff",//导航栏背景色

    "titleColor": "#333"//标题颜色为黑色

},

global代码：

"global": {

    "webviewParameter": {

        "titleNView": {//启用原生导航条

                "backgroundColor": "#fff",//导航栏背景色

                "titleColor": "#333"//标题颜色

        },

        "statusbar": {

            //系统状态栏样式(前景色)

            "style": "dark"

        },

        "appendCss": "",

        "appendJs": ""

    },

    "easyConfig": {

        "quit": {

            "toast": {

                "showFeedback": false //不显示“反馈意见”链接，默认为true

            }

        },

        "open":{

            "animation":{//窗口切换动画配置

                "type":"none"//窗口动画类型

            },

            "waiting":true  // 禁用waiting，打开page1页面时，不显示waiting等待框

        }

    }

},

效果上图，但原生标题是白色背景，黑色字体。

3.由于网页本身是有标题的，还需要在网站中对app的网页标题进行隐藏处理，只显示app的原生标题，具体根据网站的业务逻辑处理，

if(navigator.userAgent.indexOf("Html5Plus") > -1){

    $("header").css('cssText','display:none !important');

}

效果如下，对于app中的页面只有原生标题：

另外，global是对全局页面的标题进行样式设置，如果有页面需要单独设置的，可以在page下进行单独配置，例如配置如下页面：

{

    "webviewId":"myIndex",

    "matchUrls":[

    {

        "href":"http://10.10.10.145/hdsj/trunk/user/feedback"

    }

    ],

    "webviewParameter": {

        "titleNView": {//首页启用原生导航条

            "backgroundColor": "#3478f6",//导航栏背景色

            "titleColor": "#fff",//标题颜色为白色

            "titleText":"我的页面"

        },

        "statusbar": {

            //系统状态栏样式(前景色)

            "style": "dark"

        },

        "appendCss": "",

        "appendJs": ""

    }

}

修改了标题背景色和字体颜色，效果如下：

二、添加原生底部导航

1.在client_index.html文件中，将如下两行代码的注释取消：

<!--使用本地选项卡时，将如下两行代码注释取消-->

<link rel="stylesheet" type="text/css" href="__wap2apptabbar.css" />

<script src="__wap2apptabbar.js" type="text/javascript" charset="utf-8"></script>

并在当前文件配置选项卡的内容、图标、选中图标：

var global_url = "xxxx.com";

new TabBar({

    list: [{

        url: global_url,

        text: "首页",

        iconPath: 'image/bottom/huodong1.png',

        selectedIconPath: 'image/bottom/huodong2.png'

    }, {

        url: global_url + "card/",

        text: "集市",

        iconPath: 'image/bottom/shiji1.png',

        selectedIconPath: 'image/bottom/shiji2.png'

    }, {

        url: global_url + "user/edit_shop",

        text: "名片",

        iconPath: 'image/bottom/mingpian1.png',

        selectedIconPath: 'image/bottom/mingpian2.png'

    }, {

        url: global_url + "user",

        text: "我的",

        iconPath: 'image/bottom/wode1.png',

        selectedIconPath: 'image/bottom/wode2.png'

    }]

});

默认选项卡选中字体的颜色是红色的，还需要修改样式成需要的颜色：

client_index.html 添加样式：

.tab-item {

    color: #969696;

}

.tab-item.active {

    color: #3478f6;

}

2.还需要在sitemap.json文件中再配置一下。在首页配置下，添加选项卡的配置：

在sitemap.json -->pages-->webviewParameter 添加配置代码（根据项目业务，添加相关内容）

"tabBar": {//选项卡配置，仅首页支持

    "height": "50px",//选项卡高度，默认为50px

    "list": [

        {

                "url": "http://x.x.x.x/index/" //tab1页面地址

        }, {

                "url": "http://x.x.x.x/index/find" //tab2页面地址

        }, {

                "url": "http://x.x.x.x/index/cart/"  //tab3页面地址

        }, {

                "url": "http://x.x.x.x/index/user"  //tab3页面地址

        }

    ]

}

整个pages的完整配置代码：

"pages": [

    {

        "webviewId": "__W2A__android.xxx.com",//首页

        "matchUrls": [

            {

                "href": "http://x.x.x.x/index/"

            }, {

                "href": "http://x.x.x.x/index"

            }

        ],

        "webviewParameter": {

            "titleNView": false,

            "statusbar": {

                //状态条背景色，

                //首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致

                //若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致；

                "background": "#f7f7f7"

            },

            "tabBar": {//选项卡配置，仅首页支持

                "height": "50px",//选项卡高度，默认为50px

                "list": [

                    {

                            "url": "http://x.x.x.x/index/" //tab1页面地址

                    }, {

                            "url": "http://x.x.x.x/index/find" //tab2页面地址

                    }, {

                            "url": "http://x.x.x.x/index/cart/"  //tab3页面地址

                    }, {

                            "url": "http://x.x.x.x/index/user"  //tab3页面地址

                    }

                ]

            }

        }

    }

]

运行之后效果如下：

三、填坑

以上，添加原生头部和原生底部选项卡，本地运行调试都是正常，但是打包之后，下载安装，首次进入（从引导页点击“立即体验”进入项目）时不显示原生头部和原生底部，

引导页点击“点击立即体验”的代码如下：

document.getElementById("start").addEventListener("tap", function() {

    /**

     * 向本地存储中设置launchFlag的值，即启动标识；

     * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem

     */

    plus.storage.setItem("launchFlag", "true");

    mui.openWindow({

        url: "http://x.x.x.x/index",

        id: "main",

        extras: {

            mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；

        }

    });

});

会发现这里使用mui.openWindow重新打开了首页，这里的首页没有做底部/头部的配置，如果在点击“立即体验”时只关闭引导页的页面而不是重新跳转，即可避免这个问题，解决代码如下：

document.getElementById("start").addEventListener("tap", function() {

    /**

     * 向本地存储中设置launchFlag的值，即启动标识；

     * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem

     */

    plus.storage.setItem("launchFlag", "true");

    plus.webview.currentWebview().close();

});

其中，

plus.webview.currentWebview().close();

关闭当前引导页。

添加底部原生选项卡可参考官方地址：http://ask.dcloud.net.cn/article/12878

转载时请注明出处及相应链接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/10072292.html，文章标题备注转载，如：xxx【转载】,谢谢！

巴特西

wap2app（十）--wap2app 添加原生底部导航，添加原生标题栏，填坑

最新文章

热门文章