区分手机小程序以及电脑小程序;左滑、导航键返回拦截

1、区分电脑小程序和手机小程序

html 复制代码
//区分电脑小程序、手机小程序(目标:手机小程序)
// #ifdef MP-WEIXIN
uni.getSystemInfo({
	success: (res) => {
		// windows | mac为pc端
		// android | ios为手机端
		// console.log('getSystemInfo,', res.platform);
		if (res.platform == "android" || res.platform == "ios")
			this.preMode = true;
		}
});
// #endif

2、小程序拦截返回

注:目前小程序拦截返回,只检测到了在某种状态下返回的行为,但没有理想的事件执行

html 复制代码
//小程序左滑、导航键返回拦截
onLoad(){
    //小程序拦截左滑,导航键返回
    if (!this.$fn.empty(this.previewFlag)) {
	    wx.enableAlertBeforeUnload({
		    message: "点击右上角关闭"
	    });
    }
}
method:{
    // 查看文件
	open(event) {
		this.previewFlag = true;
		if (this.preMode) {
			// #ifdef MP-WEIXIN
			wx.enableAlertBeforeUnload({
				message: "点击右上角关闭",
			});
		    // #endif
        }
	},
    close() {
		this.previewFlag = false;
		if (this.preMode) {
			// #ifdef MP-WEIXIN
			wx.disableAlertBeforeUnload();
			// #endif
		}
	},
}

3、app左滑、导航键返回拦截

当在图片预览状态左滑返回时,不返回上一页面,而是关闭图片预览状态

html 复制代码
// 拦截图片预览返回上一页面
onBackPress(e) {
	if (e.from == "navigateBack" || e.from == "backbutton") {
		if (!this.$fn.empty(this.previewFlag)) {
			this.$refs.fileopen.close();
			return true;
		}
	}
},

注:在手机小程序上使用uni.previewImage预览图片时会调用onHide、onShow,在关闭图片的几秒时间内操作卡顿

相关推荐
2501_916013743 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
Stanford_11068 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
游戏开发爱好者813 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理15 小时前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_9160088916 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
流***陌16 小时前
智慧寄件新体验:快递小程序如何简化日常生活
小程序
一直在学习的小白~17 小时前
小程序开发:开启定制化custom-tab-bar但不生效问题,以及使用NutUI-React Taro的安装和使用
webpack·小程序·webapp
weixin_lynhgworld19 小时前
淘宝扭蛋机小程序的社交化运营策略
大数据·小程序·扭蛋机
低代码布道师21 小时前
少儿舞蹈小程序(20):手机号登录与多角色注册
低代码·小程序
说私域21 小时前
基于开源AI智能名片的S2B2C商城小程序中搜索联想功能的优化策略研究
人工智能·小程序