小程序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
// 取消
}
}
})
}