需求
在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现'传值'功能.
问题由来
在做微信网页开发时,由于微信的左上角返回按钮会返回上一个页面并且刷新,无法做成打开页面选择内容后关闭当前页面,并且给前一个页面传值的功能.
实现方法
想实现此功能一开始想到的是不进行页面跳转了,把选择内容的页面也做在当前页面里,然后使用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
感觉通过这些操作实现了简单的页面路由的功能,适用于不是特别复杂的页面切换选择
