需求

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

问题由来

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

实现方法

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

实现效果

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