解决小程序中webview页面多层history返回问题

小程序开发中遇到的问题：小程序中嵌套了一个webview页面，webview页面中有静默授权（A1页面静默授权后重定向到A2页面），点小程序原生的返回按钮会返回到A1页面，然后页面就会反复静默授权

解决方案：通过 historypushState 添加历史记录名目， historyonpopstate 监听历史记录条目发生变化时，调用小程序 APIwxnavigateBack

刚开始想的解决办法是用localStorage，跳转到A2时存储一个值，返回到A1时获取这个值，如果有值就清除这个值并且回退到小程序页面。听起来似乎也可行，但小程序的缓存和微信的缓存是同步的，如果在微信环境中直接访问A1页面，重定向到A2会存值，如果直接关闭页面，不会被清除，那么在小程序中访问时就直接回退了。

文章转自微信社区

解决小程序中webview页面多层history返回问题

本人公司小程序中的webview网页更新时，常常因缓存原因无法实时更新，极其影响使用。

于是遍尝网上能找到的方法。

总结：

1：小程序webview中的网站添加时间戳后缀，

2：webview的网页是用vue写的，路由默认的是hash模式，需要改为history模式。

3：成功，可以实时更新

「微信小程序」剖析（一）：运行机制

从‘微信web开发者工具’ IDE 中的代码下手，对「微信小程序」如何与 IDE 之前进行交互做了详细的介绍。并介绍了 IDE 如何将 WXML 代码和 WXSS 转换为对应的 HTML 和 CSS ，以及如何打包的一些基本情况：日期命名的wx文件、1M 大小的文件限制、APP 上传地址。

「微信小程序」剖析（二）：框架原理

对 MINA 框架进行中的 APP 与函数间的关系进行了分析。从 WX 标签到 Virtual DOM 生成的方法，以及程序如何调用这个方法来生成 Virtual Dom 。并由其中的 exparser 部分来推理出，小程序由 WebView 和 Native 两部分组成的机制。以及在开发时、运行时，两种不同的 JavaScript 文件机制。

「微信小程序」剖析（三）：让小程序运行在Chrome浏览器上

展示了如何在普通的浏览器上运行「微信小程序」应用。并使用 Gulp 结合‘微信web开发者工具’中的vendor文件 wcc 和 wcsc 来构建自动化的转化 WXML 和 WXSS 为 HTML 和 CSS，从而搭建独立于开发者工具的开发环境。

「微信小程序」剖析（四）：原生的实时DOM转Virtual DOM

介绍了‘微信web开发者工具’中所使用的 WCC 文件的一些技术原理。即它可以将 WXML 文件转化为基于 JSON 的 Virtual DOM。以及 Virtual DOM如何去解析这个 JSON 文件，并在这个过程中进行数据绑定和函数绑定。

小程序webview的页面缓存会影响开发中的调试和生产中的使用

1页面缓存由浏览器缓存引起，那么可以通过设置来修改浏览器缓存。

可以通过nginx设置cache-control 来关闭浏览器缓存

2由于是单页面应用，所以只需要对indexhtml设置即可。

对indexhtml中的资源地址，也会存在缓存，可以通过webpack构建时加入hash值解决。

1，首先使用uni的webview去加载一个H5页面，这个页面需放在自己公司的测试服务器上哦

2，html文件写入location,href = '小程序的链接'，就会实现自动跳转，也可以加一个按钮防止跳转失败，让用户点击按钮跳转

 3，最重要的一步，如何生成这个小程序的链接

（1），登录微信开放平台

（2），点击小程序，点击服务端，点击获取scheme码，点击调试工具

（3）在线生成scheme码（4），请求成功之后在在线调用这里可以看到，如果失败请按照文档检查一下参数

4，这个就是你小程序的码了，复制到你的html文件里用location,href就可以跳转啦，看上面第二步。

以上就是关于解决小程序中webview页面多层history返回问题全部的内容，包括:解决小程序中webview页面多层history返回问题、微信小程序 webview缓存、如何入门微信小程序开发，有哪些学习资料等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！