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

需求

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

问题由来

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

实现方法

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

实现效果

e5dcca61d7_clip.gif

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