详解如何探测小程序返回到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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JS中的多态实例详解
Oct 15 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
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
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
微信小程序实现多张图片上传功能
2020/11/18 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python获取整个网页源码的方法
2020/08/03 Python
如何用Python徒手写线性回归
2021/01/25 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
预备党员思想汇报范文
2013/12/29 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
文明单位汇报材料
2014/12/24 职场文书
个人年终总结结尾
2015/03/06 职场文书
设备技术员岗位职责
2015/04/11 职场文书