背景

最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的。

在没有使用小程序时,路由跳转时,刷新页面等等,这个是很顺畅的,在使用了小程序之后,需要适配小程序的页面,比如后退到前一页,这个时候要刷新页面,于是遇到了小程序的一些特性。

问题描述

有两个页面:A=http://demo.com/#/A?code=12,B=http://demo.com/#/B?index=2
有这这么一个需求,A页面跳到B页面,B页面把一些处理后的结果以参数的形式传给A页面。例如:B页面的使用了wx.navigateBack(其它跳转函数同理),且url(http://demo.com/#/A?code=12&index=12)以参数的形式传给了A页面,A页面在OnShow方法里面重新设置了web-view的src地址,能保证正确,但是页面就是不刷新,且使用微信开发者工具,能看到src已经被改变了。

尝试解决

在网上找的一些方法:

  1. 比如先设置src为空字符串,然后再通过setTimeout设置src为期望的值,且要设置时间为60ms以上(玄学),这个方法之前我还真解决了一个问题,不过那个场景是:A是一个web-view页面,B是一个小程序页面,B返回A时,通过给A传递参数,设置src可以通过此方法正确显示。

此方法但是没有解决,A、B页面都是web-view的形式。

  1. 在B页面先把A页面的src设置为空,然后再直接设置为需要的url,此方法依然对本问题无效

  2. 我把1、2两种方案结合也没有解决。

  3. 最小化正确原型
    这个时候,我在思考,这个页面到底能不能正常刷新,注意这个想法非常的重要,我用了最小正确原型来先验证,能否正确得到期望,最小原型如下:
    A的页面web-view src=https://baidu.com,然后打开看一下,可以正常显示页面,之后在B页面返回A页面时,给A页面传递了一个url,在A页面OnShow里面设置了A的src=https://www.qq.com,结果页面刷新了,正确的显示了www.qq.com页面,也就是说不需要什么settimeout

之后反复测试,同样的连接是不刷新的;设置为空是不刷新的。

这个时候,已经找到了可以正常刷新的条件,不是原链接、不是空,都可以刷新页面,那么问题来了,A页面的链接都已经变了,后面的参数变了,怎么还跟缓存了一样(同一个get链接,会被缓存起来的)。

  1. 再分析原始的A的链接
    从http://demo.com/#/A?code=12,变成了http://demo.com/#/A?code=12&index=12,这个形式,改变够大了,但是还是缓存了,这个时候应该就是缓存策略问题了,毕竟以前解决ie浏览器时,我们通过添加url随机数就可以避免。

注意到了吗?vue页面中使用了#作为路由判断的,而#在浏览器中是作为锚点使用的,是不是小程序对这个解析也有差别,认为是同一个页面,于是做了如下的测试:
http://demo.com/?code=12&index=12/#/A

结果,参数放到#之前,小程序果然刷新了,看来小程序对#就是按照同一个页面解析的,好了刷新的问题解决了,下来看看vue是否能正确识别参数

使用了this.$route.query.index的值,成功取得了值。

最后

自此问题得以解决,总结如下:

  1. 网上的很多解决方法适用场景可能跟你的不一样;
  2. 黔驴技穷时,使用最小正确原型开始验证期望;
  3. 找到差异的地方,或者特殊的地方可能就是问题所在;
  4. 懂原理、机制能事半功倍快速解决问题
  5. 小程序还可以提升的更好,比如方案1真的有效,要不是之前第一版迁移方案我遇到过,我都觉得这个是开玩笑的方法

直击--vue项目微信小程序页面跳转web-view不刷新-根源的更多相关文章

  1. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  2. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

  3. 微信小程序——页面跳转及传参

    小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...

  4. 微信小程序页面跳转后js定时器没有销毁的问题

    现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...

  5. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  6. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

  7. 微信小程序页面跳转方法汇总

    微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...

  8. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  9. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

随机推荐

  1. 深入学习Spring框架(三)- AOP面向切面

    1.什么是AOP? AOP为 Aspect Oriented Programming 的缩写,即面向切面编程, 通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术..AOP是OOP的延续, ...

  2. Java基础之回味finally

    平时大家try…catch…finally语句用的不少,知道finally块一定会在try…catch..执行结束时执行,但是具体是在什么时候执行呢,今天我们一起来看下. public static ...

  3. Java - 格式化输出JSON字符串的两种方式

    目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fa ...

  4. MyBatis简单使用方式总结

    MyBatis简单使用方式总结 三个部分来理解: 1.对MyBatis的配置部分 2.实体类与映射文件部分 3.使用部分 对MyBatis的配置部分: 1.配置用log4J显式日志 2.导入包的别名 ...

  5. https://www.cnblogs.com/M-LittleBird/p/5902850.html

    https://www.cnblogs.com/M-LittleBird/p/5902850.html

  6. word 2010 页眉 http://jingyan.baidu.com/article/a65957f4b0208624e77f9b55.html

    word 2010 页眉 http://jingyan.baidu.com/article/a65957f4b0208624e77f9b55.html

  7. Excel催化剂开源第17波-VSTO开发之ADO.Net访问Sqlserver

    在Excel催化剂中,独树一帜地推出了Excel与数据库交互功能,目前仅实现了对Sqlserver的交互,在通用型插件中仅此一家,别无其他. 为何会出现这样的局面呢,原因大概有以下几大方面: 和数据库 ...

  8. 艺赛旗RPA-处理无表头表格

    今天写一个demo,要求是对表格数据用价格为key进行排序 样本数据有两种格式: 一.第一行是一个大单元格 处理步骤: 在不变参数的情况下读取表格数据: 结果如下: 可以看见表头: Unnamed: ...

  9. C#2.0新增功能07 getter/setter 单独可访问性

    连载目录    [已更新最新开发文章,点击查看详细] 属性是一种成员,它提供灵活的机制来读取.写入或计算私有字段的值. 属性可用作公共数据成员,但它们实际上是称为访问器的特殊方法. 这使得可以轻松访问 ...

  10. [OpenGL] 绘制并且判断凹凸多边形、自相交多边形。

    #include <iostream> #include <ctime> #include <GL/glut.h> #include <math.h> ...