微信小程序中show-menu-by-longpress失效需用view+background-image替代image，显式设置宽高、background-size及user-select:none；H5端用透明蒙版覆盖，App端需属性+事件+样式三重拦截。
微信小程序端 show-menu-by-longpress 失效怎么办
在微信小程序里，show-menu-by-longpress="false" 属性对 image 组件无效——这是微信底层限制，不是 uni-app bug。真机上长按仍会弹出「保存图片」菜单。必须换思路：用 view 替代 image，配合 CSS 隐藏原生行为。
关键操作：
- 把
<image src="xxx">改成<view class="img-wrapper" :style="{ backgroundImage: 'url(' + imgUrl + ')' }"></view> -
.img-wrapper必须设固定width和height（不能靠内容撑开） - 加
background-size: cover或contain控制缩放 - 加
user-select: none和-webkit-user-select: none防 iOS 误选 - 禁用 pointer-events：
pointer-events: none（注意：若需后续绑定点击事件，得在外层再套一层可交互容器）
H5 端如何屏蔽微信浏览器的长按菜单
微信内置浏览器对 img 标签有强干预，@longpress 或 CSS touch-action: manipulation 均无法阻止默认菜单。唯一可靠方式是覆盖一层透明蒙版。
实操要点：
- 给图片外层加一个绝对定位的空
<view class="mask"></view> -
.mask样式：position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; background: transparent; - 确保该
mask层 z-index 高于图片，且不干扰其他交互（如预览） - 若用
uni-image，其内部img可通过伪元素覆盖：uni-image::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; opacity: 0; }
App 端（iOS/Android）禁用长按保存的兼容写法
App 端原生渲染层不同，show-menu-by-longpress 在部分 Android 机型或 iOS 17+ 上仍可能失效。不能只依赖属性，得叠加运行时拦截。
建议组合策略：
- 模板中仍保留
show-menu-by-longpress="false"（对部分旧版有效） - 在
mounted钩子中执行：uni.hideKeyboard()（减少误触干扰） - 监听
longpress事件并立即stopPropagation()和preventDefault()（仅对 view 模拟容器有效） - 对原生
image组件，可在onReady后动态插入style="touch-action: none"（部分 Android WebView 支持） - 避免在图片区域同时绑定
@click和@longpress，防止事件冲突导致降级触发原生菜单
为什么全局禁用 longpress 不推荐
直接在 App.vue 或页面根节点监听 longpress 并 stop，看似一劳永逸，但会误杀所有长按交互——比如轮播图切换、自定义菜单、canvas 绘图等依赖长按的逻辑。
真正要禁的只是「图片下载行为」，而不是「长按本身」。所以必须限定作用域：
- 只对图片容器类名（如
.no-longpress-img）生效 - 用
event.target.matches('img, .img-wrapper')判断是否命中目标 - 区分平台：H5 和小程序可用 CSS 覆盖，App 端优先走组件替换，而非事件拦截
- 注意
web-view内部的图片不受 Vue 层控制，需注入 JS 注入脚本（如 mui 的longtap监听），但仅限 App 端
