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

<web-view src="/UploadFiles/2021-04-02/{{url}}">



onShow () {
 this.url = ${base_url}"htmlcode">

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的)


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