详解如何探测小程序返回到webview页面


Posted in Javascript onMay 14, 2019

在公司项目中经常会遇到一个场景, 尝试过各种不同的方法, 最后想到了一种很技术上简单且可行的方法.

经常被QA同学反应同一类型的问题

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的"收藏状态", "身材细节"做了修改后, 用户点击返回按钮回到上一个页面, 收藏的状态或是身材细节没有改变.

那是当然的, 作为一个小程序中的webview, api相当有限, 没有一个事件可以让网页触发重新渲染动作, 轮询更是不理智的表面功夫.

我们试过绑定blur和click事件来模拟事件, 试过从业务逻辑上加入一些时间点检查状态, 最后才想到个技术简单, 操作简单的解决方案.

解决方法

第一步, 在小程序webview绑定的url上加上时间戳.

<web-view src="{{url}}"/>
onShow () {
 this.url = ${base_url}?ts=Date.now()
}

第二步, 在html里监听query变化. 我遇到问题的项目使用的是vue.

watch: {
  '$route.query.ts': function () {
  this.fetchData()
  this.patchRender() // 获取数据, 重新渲染变化的部分
  }
 }

这样就解决了触发退回到webview的事件探测问题, 剩下的只要根据业务来重新渲染可能变化的部分就行了.

更多

小程序的部分每次都需要改变url的query参数没有办法, 但是对vue设计这么良好的框架还有一定改良空间.

我们可以把这串代码写到mixin里, 对性能有些小影响, 但方法没写也不会去执行, 只是在不需要的页面上多了个observer.

Vue.use(function () {
 Vue.mixin({
 watch: {
  '$route.query.ts': function () {
  this.$options.onShow && this.$options.onShow.call(this)
  }
 }
 })
})

那么在vue页面中就省去了写watch的麻烦, 直接像小程序那样写onShow方法就行了.

onShow () {
 this.fetchData()
 this.patchRender() 
 },
 methods: {
 fetchData () {//...}
 }

总结, 使用了这个方法如需再添加需要探测onShow事件的页面, 只需要:

小程序webview的url在onShow的时候修改ts参数

在vue文件里添加onShow方法, 进行业务操作. (方法里的this是正常指向vm的)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
javascript每日必学之继承
Feb 23 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
javascript实现遮罩层动态效果实例
May 14 #Javascript
JQuery animate动画应用示例
May 14 #jQuery
微信小程序的线程架构【推荐】
May 14 #Javascript
jquery实现选项卡切换代码实例
May 14 #jQuery
Vue表单之v-model绑定下拉列表功能
May 14 #Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
微信支付开发发货通知实例
2016/07/12 PHP
js操作二级联动实现代码
2010/07/27 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
生产设备维护保养制度
2015/08/06 职场文书
毕业设计工作总结
2015/08/14 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA