univue系列

小程序h5返回上一页检测弹出二次确认

2024-09-04  本文已影响0人  litielongxx

小程序webview访问h5,h5中点返回弹出确认框。
需要h5和原生小程序实时通信,

1需实现跳转回原生并且传参通信 (前置了解即可忽略)

https://www.jianshu.com/p/627c993a4d5a

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <button id="2">点击返回原生小程序</button>
    <button id="22">指定页带参数123</button>
    ...
    $('#2').click(item => {
        wx.miniProgram.getEnv(function(res) {
          if (res.miniprogram) {
            wx.miniProgram.navigateBack()
          }
        })
      })

      $('#22').click(item => {
        wx.miniProgram.navigateTo({
          url: '/pages/login/index?data=123'
        })
      })
2 h5中监听页面销毁事件,手势滑动或主动点a返回或者 history.back(-1)返回。
 window.addEventListener(
   //     'beforeunload',   ios webview 兼容这种变成了pagehide  \
      'pagehide',   // 并不是常规的页面熄屏就触发而是类似unload
        () => {
          wx.miniProgram.postMessage({
            data: 'index2 ' + Date.now()
          })
          wx.miniProgram.navigateTo({
            url: '/pages/index/test?a=1'
          })
        },
        false
      )

h5可以只用绑定最后的销毁事件用来触发。

3 小程序原生页test跳转中间页识别,再回到webview页即看起来是又回来了 如不需要postmessage可以这里直接跳转webview带参数onLoad处理弹窗就行 4则跳过
// xx.vue  uni示范
   onUnload() {
    const pages = getCurrentPages()
    let prePage = pages[pages.length - 2] //获取上一页
    prePage.$vm.refresh = true // 需要刷新  web-view页需要有refesh参数名字
  },
onLoad(options) {
  if(options.data) {
      uni.navigateBack({
        delta: 1
      })
  }
}

4 小程序原生页有web-view的那个已检测就弹出下

v-if针对webview真机会有时再切换显示不出来页面,开发工具暂无。
有效性待定,仅参考

data:{
  return {
    refresh:false 
  }
},
onShow() {
   this.refresh &&
      wx.showModal({
        title: '二次弹出',
        content: '中间页test改变了修改值所以显示',
        success(res) {
          if (res.confirm) {
           // 确认
          } else if (res.cancel) {
            this.refresh = false
            // 取消
          }
        }
      })
}

https://segmentfault.com/a/1190000020122429

上一篇 下一篇

猜你喜欢

热点阅读