vue h5页面内嵌小程序解决监听h5页面返回事件

很多公司的项目为了减小重复的开发量。会让内嵌的app中的h5页面同时适配小程序。很多时候需要解决小程序中h5页面跳转别的页面再回来做一些操作。下面介绍监听返回的方法。

1.在vue项目中引入weixin-js-sdk，然后在main.js或者需要用到的页面引入weixin-js-sdk
import wx from ‘weixin-js-sdk’

2.将跳转方式改成新打开一个webview页面：下面是做成一个公用的方法

openWebviewPage(newUrl) { // 新打开一个webview页面
    let wxAppUrl = `/pages/webview/webview?src=${encodeURIComponent(newUrl)}`
    wx.miniProgram.navigateTo({ url: wxAppUrl })
 },

3.在需要监听返回的页面调用微信的是否在前台方法

// 小程序监听页面回显事件
function wxMiniProgramReady() {
  WeixinJSBridge.on('onPageStateChange', (res = {}) => {
    if (res && res.active) {
      // do something
    }
  })
}

注意：web-view网页需要接入JSSDK 1.3.2及以上，才可以使用