摘要：使用語(yǔ)法與要跳轉(zhuǎn)到的對(duì)應(yīng)的狀態(tài)信息。頁(yè)面名字，方便調(diào)試。要跳轉(zhuǎn)到的地址，不能跨域，對(duì)于單頁(yè)應(yīng)用來(lái)說(shuō)沒(méi)用，傳空即可。

在微信網(wǎng)頁(yè)開(kāi)發(fā)中,點(diǎn)擊返回按鈕不刷新頁(yè)面,進(jìn)行頁(yè)面切換,且實(shí)現(xiàn)"傳值"功能.

在做微信網(wǎng)頁(yè)開(kāi)發(fā)時(shí),由于微信的左上角返回按鈕會(huì)返回上一個(gè)頁(yè)面并且刷新,無(wú)法做成打開(kāi)頁(yè)面選擇內(nèi)容后關(guān)閉當(dāng)前頁(yè)面,并且給前一個(gè)頁(yè)面?zhèn)髦档墓δ?

想實(shí)現(xiàn)此功能一開(kāi)始想到的是不進(jìn)行頁(yè)面跳轉(zhuǎn)了,把選擇內(nèi)容的頁(yè)面也做在當(dāng)前頁(yè)面里,然后使用js來(lái)控制顯隱.

// 點(diǎn)擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");
})

在微信實(shí)際頁(yè)面中,由于整頁(yè)顯示,用戶會(huì)點(diǎn)擊到左上角返回按鈕,會(huì)造成關(guān)閉頁(yè)面.

需要對(duì)返回按鈕進(jìn)行一些操作來(lái)修改返回后的效果.

history提供了一個(gè)方法pushState，可以手動(dòng)的添加頁(yè)面進(jìn)棧。

使用語(yǔ)法:

history.pushState(state, title, url);
state：Object,與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。
title：頁(yè)面名字，方便調(diào)試。
url：要跳轉(zhuǎn)到的URL地址，不能跨域，對(duì)于單頁(yè)應(yīng)用來(lái)說(shuō)沒(méi)用，傳空即可。

修改點(diǎn)擊事件

// 點(diǎn)擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");
    // 歷史記錄中插入一條記錄,防止微信返回按鈕會(huì)關(guān)閉頁(yè)面
    var state = {
        title: "選擇學(xué)校",
        url: "#school" // 這個(gè)url可以隨便填，只是為了不讓瀏覽器顯示的url地址發(fā)生變化，對(duì)頁(yè)面其實(shí)無(wú)影響
    };
    window.history.pushState(state, state.title, state.url);
})

history.go和history.back（包括用戶按瀏覽器歷史前進(jìn)后退按鈕）觸發(fā)，并且頁(yè)面無(wú)刷的時(shí)候（由于使用pushState修改了history）會(huì)觸發(fā)popstate事件，事件發(fā)生時(shí)瀏覽器會(huì)從history中取出URL和對(duì)應(yīng)的state對(duì)象替換當(dāng)前的URL和history.state

對(duì)返回按鈕添加監(jiān)聽(tīng)

// 添加微信返回前進(jìn)事件監(jiān)聽(tīng)
window.addEventListener("popstate", function(e) {
    // 選擇地址頁(yè)面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁(yè)面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
}, false);

此時(shí)進(jìn)入選擇地址頁(yè)面后,點(diǎn)擊返回按鈕,能實(shí)現(xiàn)頁(yè)面切換

選擇學(xué)校后也要實(shí)現(xiàn)該操作,用 history.go(-1);實(shí)現(xiàn)手動(dòng)去除歷史記錄中添加的記錄

// 選擇學(xué)校
mui("#choose-school").on("tap", "li", function() {
    var schoolName = this.querySelector(".em-left-name").innerText;
    var schoolAddress = this.querySelector(".em-left-address").innerText;
    document.querySelector(".em-left-name").innerText = schoolName;
    document.querySelector(".em-left-address").innerText = schoolAddress;

    // 手動(dòng)去除歷史記錄中插入的記錄
    history.go(-1);
    // 選擇地址頁(yè)面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁(yè)面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
})

修改完善代碼,實(shí)現(xiàn)后退,前進(jìn)功能

/**
 * @description 初始化監(jiān)聽(tīng)
 */
initListeners: function() {
    var self = this;

    // 添加微信返回前進(jìn)事件監(jiān)聽(tīng)
    window.addEventListener("popstate", function(e) {
    //處于選擇學(xué)校頁(yè)面
    if(self.chooseSchool) {
        // 選擇地址頁(yè)面隱藏
        document.querySelector(".em-address").classList.add("mui-hidden");
        // 簽到頁(yè)面顯示
        document.querySelector(".em-sign").classList.remove("mui-hidden");
    }
    
    // 頁(yè)面前進(jìn)后如果為選擇學(xué)校頁(yè)面
    if(/#school/.test(window.location.href)){
        self.chooseSchool = true;
        document.querySelector(".em-sign").classList.add("mui-hidden");
        document.querySelector(".em-address").classList.remove("mui-hidden");
    }

}, false);


// 點(diǎn)擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    self.chooseSchool = true;
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");

    // 歷史記錄中插入一條記錄,防止微信返回按鈕會(huì)關(guān)閉頁(yè)面
    var state = {
        title: "選擇學(xué)校",
        url: "#school" // 這個(gè)url可以隨便填，只是為了不讓瀏覽器顯示的url地址發(fā)生變化，對(duì)頁(yè)面其實(shí)無(wú)影響
    };
    window.history.pushState(state, state.title, state.url);
})

// 選擇學(xué)校
mui("#choose-school").on("tap", "li", function() {
    self.chooseSchool = false;
    var schoolName = this.querySelector(".em-left-name").innerText;
    var schoolAddress = this.querySelector(".em-left-address").innerText;
    document.querySelector(".em-left-name").innerText = schoolName;
    document.querySelector(".em-left-address").innerText = schoolAddress;

    // 手動(dòng)去除歷史記錄中插入的記錄
    history.go(-1);
    // 選擇地址頁(yè)面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁(yè)面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
})
}

感覺(jué)通過(guò)這些操作實(shí)現(xiàn)了簡(jiǎn)單的頁(yè)面路由的功能,適用于不是特別復(fù)雜的頁(yè)面切換選擇