記微信網頁開發單頁面返回不刷新的實現

需求

在微信網頁開發中,點擊返回按鈕不刷新頁面,進行頁面切換,且實現'傳值'功能.

問題由來

在作微信網頁開發時,因爲微信的左上角返回按鈕會返回上一個頁面而且刷新,沒法作成打開頁面選擇內容後關閉當前頁面,而且給前一個頁面傳值的功能.

實現方法

想實現此功能一開始想到的是不進行頁面跳轉了,把選擇內容的頁面也作在當前頁面裏,而後使用js來控制顯隱.

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

在微信實際頁面中,因爲整頁顯示,用戶會點擊到左上角返回按鈕,會形成關閉頁面.

須要對返回按鈕進行一些操做來修改返回後的效果.

pushState

history提供了一個方法pushState，能夠手動的添加頁面進棧。

使用語法:

history.pushState(state, title, url);
state：Object,與要跳轉到的URL對應的狀態信息。
title：頁面名字，方便調試。
url：要跳轉到的URL地址，不能跨域，對於單頁應用來講沒用，傳空便可。

修改點擊事件

// 點擊修改學校按鈕
document.querySelector('.em-school-right').addEventListener('tap', function() {
    document.querySelector('.em-sign').classList.add('mui-hidden');
    document.querySelector('.em-address').classList.remove('mui-hidden');
    // 歷史記錄中插入一條記錄,防止微信返回按鈕會關閉頁面
    var state = {
        title: "選擇學校",
        url: "#school" // 這個url能夠隨便填，只是爲了避免讓瀏覽器顯示的url地址發生變化，對頁面其實無影響
    };
    window.history.pushState(state, state.title, state.url);
})

onpopstate

history.go和history.back（包括用戶按瀏覽器歷史前進後退按鈕）觸發，而且頁面無刷的時候（因爲使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state

對返回按鈕添加監聽

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

此時進入選擇地址頁面後,點擊返回按鈕,能實現頁面切換

選擇學校後也要實現該操做,用 history.go(-1);實現手動去除歷史記錄中添加的記錄

// 選擇學校
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;

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

修改完善代碼,實現後退,前進功能

/**
 * @description 初始化監聽
 */
initListeners: function() {
    var self = this;

    // 添加微信返回\前進事件監聽
    window.addEventListener("popstate", function(e) {
    //處於選擇學校頁面
    if(self.chooseSchool) {
        // 選擇地址頁面隱藏
        document.querySelector('.em-address').classList.add('mui-hidden');
        // 簽到頁面顯示
        document.querySelector('.em-sign').classList.remove('mui-hidden');
    }
    
    // 頁面前進後若是爲選擇學校頁面
    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);


// 點擊修改學校按鈕
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');

    // 歷史記錄中插入一條記錄,防止微信返回按鈕會關閉頁面
    var state = {
        title: "選擇學校",
        url: "#school" // 這個url能夠隨便填，只是爲了避免讓瀏覽器顯示的url地址發生變化，對頁面其實無影響
    };
    window.history.pushState(state, state.title, state.url);
})

// 選擇學校
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;

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

實現效果

感受經過這些操做實現了簡單的頁面路由的功能,適用於不是特別複雜的頁面切換選擇