记微信网页开发单页面返回不刷新的实现

摘要：使用语法与要跳转到的对应的状态信息。页面名字，方便调试。要跳转到的地址，不能跨域，对于单页应用来说没用，传空即可。

在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现"传值"功能.

在做微信网页开发时,由于微信的左上角返回按钮会返回上一个页面并且刷新,无法做成打开页面选择内容后关闭当前页面,并且给前一个页面传值的功能.

想实现此功能一开始想到的是不进行页面跳转了,把选择内容的页面也做在当前页面里,然后使用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");
})

在微信实际页面中,由于整页显示,用户会点击到左上角返回按钮,会造成关闭页面.

需要对返回按钮进行一些操作来修改返回后的效果.

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);
})

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");
})
}

感觉通过这些操作实现了简单的页面路由的功能,适用于不是特别复杂的页面切换选择