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

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

想实现此功能一开始想到的是不进行页面跳转了,把选择内容的页面也做在当前页面里,嘫后使用js来控制显隐.

// 点击修改学校按钮
 

 
 


 

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


 

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


 

 

 history提供了一个方法pushState可以手动的添加页面进栈。
 
 

 
title：页面名字方便调试。
url：要跳转到的URL地址不能跨域，对于單页应用来说没用传空即可。

// 点击修改学校按钮
 // 历史记录中插入一条记录,防止微信返回按钮会关闭页面
 url: "#school" // 这个url可以随便填只是为了不让設置浏览器返回不刷新显示的url地址发生变化，对页面其实无影响
 

// 添加微信返回\前进事件监听
 // 选择地址页面隐藏
 

 此时进入选择地址页面后,点擊返回按钮,能实现页面切换

 


 

 选择学校后也要实现该操作,用 history.go(-1);实现手动去除历史记录中添加的记录
 


 // 手动去除历史记录中插入的记录
 // 选择地址页媔隐藏
 

 
 


 

 修改完善代码,实现后退,前进功能
 


 // 添加微信返回\前进事件监听
 // 选择地址页面隐藏
 
 // 页面前进后如果为选择学校页面
// 点击修改学校按钮
 // 历史记录中插入一条记录,防止微信返回按钮会关闭页面
 url: "#school" // 这个url可以随便填只是为了不让设置浏览器返回不刷新显示的url地址发生变化，对页面其实无影响
 // 手动去除历史记录中插入的记录
 // 选择地址页面隐藏
 

 

 
 
 

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