wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑

一、添加原生标题栏

添加原生标题栏可以参照 《wap2app(六)-- wap2app的原生标题头无法隐藏》,具体如下:

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

效果:

wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑_第1张图片

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中的页面只有原生标题:

wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑_第2张图片

另外,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": ""
    }
}

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

 wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑_第3张图片

二、添加原生底部导航

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页面地址
                    }    
                ]
            }

        }
    }
]

运行之后效果如下:

 wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑_第4张图片

三、填坑

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

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

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【转载】,谢谢!

转载于:https://www.cnblogs.com/wangxiaoling/p/10072292.html

你可能感兴趣的:(wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑)