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

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

经常被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的)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现点击返回顶层的方法

    最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo

  • 微信小程序之分享页面如何返回首页的示例

    微信小程序之分享页面如何返回首页的示例

    做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下: <!--index.wxml--> <view class="container">

  • 微信小程序返回多级页面的实现方法

    微信小程序返回多级页面的实现方法 微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况.点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API: wx.navigateBack(OBJECT) 也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以: //在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack(

  • 微信小程序在地图选择地址并返回经纬度简单示例

    微信小程序在地图选择地址并返回经纬度简单示例

    本文实例讲述了微信小程序在地图选择地址并返回经纬度功能.分享给大家供大家参考,具体如下: 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 wxml文件部分代码: <button bindtap="mapView" style="margin:10px">查看地图</button> js文件主要功能代码: mapView:function(){ var that = this wx.chooseLocation({ su

  • 6行代码实现微信小程序页面返回顶部效果

    6行代码实现微信小程序页面返回顶部效果

    本文实例为大家分享了微信小程序页面返回顶部的具体代码,供大家参考,具体内容如下 效果预览: js部分: Page({ data: { topNum: 0 }, returnTop: function () { this.setData({ topNum: this.data.topNum = 0 }); } }) wxml部分: <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <v

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序上传多图到服务器并获取返回的路径

    微信小程序上传图片很简单: //点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setD

  • 利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

    有时候我们可能需要在其他的网页上展示我们自己的小程序中某些页面的小程序码,这种时候,我们需要用到小程序的生成小程序码的相关接口. 工具选型 我们仍然选用简单方便的weixin-java-miniapp来完成此功能. 项目配置 详见我们的另一篇文章点此进入 生成小程序码的相关类型 小程序码的其他生成方式以及相关类型在这篇文章点此进入中介绍的较为详细,此处不再赘述,以下仅以生成不限制张数的这种类型来做一个示例. 生成小程序码图片 先获取小程序的service实例wxMaService. 再获取二维码

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

    在公司项目中经常会遇到一个场景, 尝试过各种不同的方法, 最后想到了一种很技术上简单且可行的方法. 经常被QA同学反应同一类型的问题 项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的"收藏状态", "身材细节"做了修改后, 用户点击返回按钮回到上一个页面, 收藏的状态或是身材细节没有改变. 那是当然的, 作为一个小程序中的webview, api相当有限, 没有一个事件可以让网页

  • 详解微信第三方小程序代开发

    详解微信第三方小程序代开发 微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 注意事项:如果在调试过程中返回了错误码请到小程序代开发api页面查看,   小程序代开发使用的域名是你申请第三方时候填写的域名, 小程序代码模板最多只有50个,可以删除然后重新添加. 准备工作: 申请微信第三方并且权限那边要选上代开发,第三方申请成功之后就是准备小程序了,需要两个小程序,一个作为小程序代码库,一个作为用

  • 详解php微信小程序消息推送配置

    详解php微信小程序消息推送配置

    第一步 官网下载对应版本的cryptoDemo 下载地址:https://wximg.gtimg.com/shake_tv/mpwiki/cryptoDemo.zip 第二步 创建检查文件wxcheck.php 这个文件名可以随便命名,要保证url中检查的文件名与之相同即可. <?php printLog(json_encode($_GET)); $signature = $_GET["signature"]; $timestamp = $_GET["timestamp

  • 详解wepy开发小程序踩过的坑(小结)

    H5内嵌富文本编辑器 微信小程序没有支持的原生富文本组件,可以通过web-view内嵌H5实现富文本编辑功能,起初使用的是wangEditor富文本编辑器,因为项目使用的是七牛云存储,wangEditor在pc端上传是没有问题的,但在在移动端调用不了本地图片,于是换了个功能强大二次开发较强的富文本编辑器vue-quill-editor,更多请参考官方文档, 基于此对上传图片进行二次开发. 七牛云 + elementUi + vue-quill-editor上传图片和富文本 $ npm insta

  • 详解将微信小程序接口Promise化并使用async函数

    前言 小程序一直到现在接口还是和刚开始一样使用的回调函数的方式,如果想在小程序中不使用框架的情况下使用Promise+Async怎么办呢? 2019最新解决方案 1. 将接口Promise化 首先建一个文件wxPromise.js const promisify = name => option => { return new Promise((resolve, reject) => wx[name]({ ...option, success: resolve, fail: reject

  • 详解mpvue开发小程序小总结

    最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案 1.项目中数据请求用到了fly.io,封装成request.js如下: import wx from 'wx' import Fly from 'flyio' import store from '../store/index' const fly = new Fly() fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000 //http 请求拦截器

  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法. 1.小程序传统的回调处理 例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用

  • 详解钉钉小程序组件之自定义模态框（弹窗封装实现）

    背景 开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个- 效果大概长这个样 点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭. 开始封装 上图所示文件内容放入项目即可 (路径自己高兴着来) modal.js 内容不多 但都是精华 /** * 自定义modal浮层 * 使用方法: * <modal show="{{showModal}}" height='80%' onCancel="modal

  • 微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS

  • 详解小程序开发经验：多页面数据同步

    详解小程序开发经验：多页面数据同步

    导语:本文主要介绍在小程序中,多页面之间如何保持数据同步 在很多的产品中,都会存在跨页面间需要数据同步,如下示例: 为了更好的理解该场景,我们再详细描绘一下: 本场景包括4个页面:动态广场.个人中心.我的动态.动态详情 首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是"我的",其他未加内阴影的表示是"别人的": 然后,进入个人中心页,请求加载数据,展示获赞数量: 点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表: 点

随机推荐