在使用uniapp开发微信小程序时，使用onBackPress不会生效，原因是这个api尚未对微信小程序进行支持，故而采用了page-container的方案来进行解决
1，在根节点下添加page-container组件
<view class="" v-if="isShow"> <page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"> </page-container> </view>
添加控制变量
！！！！初始值为true
2，添加拦截函数
beforeleave() { if (this.isPlaying && this.answerRedPacket) { //此处条件是作者要判断页面上是否有视频正在播放，可替换为自定义的条件 this.isShow = false //设置为false将消耗一次监听 所以在处理完毕之后要将此变量设置为初始值true 否则将会只监听首次推出页面的行为 this.showM = true } else { uni.navigateBack() } }
ok 核心就是以上部分 后续是作者的记录
3，添加退出二次确认弹窗
<u-modal :show="showM" :buttonReverse="true" confirmText="确定退出" cancelText="再看一会" confirmColor="#666" cancelColor="#00469C" showConfirmButton showCancelButton @confirm="sureExit" @cancel="sureExit(true)"> <slot name="default"> <view class="slot-content"> <i class="cuIcon-info"></i> <text class="content_body">您正在参加有奖答题活动，退出下次将重新再次观看视频，确认要退出吗?</text> </view> </slot> </u-modal>
4,确认弹窗的处理函数
sureExit(flag) { if (flag) { this.isShow = true this.showM = false } else { uni.navigateBack() } }