vue h5页面内嵌小程序解决监听h5页面返回事件
很多公司的项目为了减小重复的开发量。会让内嵌的app中的h5页面同时适配小程序。很多时候需要解决小程序中h5页面跳转别的页面再回来做一些操作。下面介绍监听返回的方法。1.在vue项目中引入weixin-js-sdk,然后在main.js或者需要用到的页面引入weixin-js-sdkimport wx from ‘weixin-js-sdk’2.将跳转方式改成新打开一个webview页面:下面是做
·
很多公司的项目为了减小重复的开发量。会让内嵌的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及以上,才可以使用
更多推荐
已为社区贡献2条内容
所有评论(0)