wap2app（十）--wap2app 添加原生底部導航，添加原生標題欄，填坑

1、添加原生標題欄

添加原生標題欄能夠參照 《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": ""
    }
}

修改了標題背景色和字體顏色，效果以下：

 

2、添加原生底部導航

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

        }
    }
]

運行以後效果以下：

 

3、填坑

以上，添加原生頭部和原生底部選項卡，本地運行調試都是正常，可是打包以後，下載安裝，首次進入（從引導頁點擊「當即體驗」進入項目）時不顯示原生頭部和原生底部，

引導頁點擊「點擊當即體驗」的代碼以下：

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

轉載時請註明出處及相應連接，本文永久地址：http://www.javashuo.com/article/p-pxvkrpqe-et.html，文章標題備註轉載，如：xxx【轉載】,謝謝！