微信H5页面如何动态隐藏投诉按钮（附完整实现代码）

1. 为什么需要动态隐藏微信H5的投诉按钮？

做微信H5营销活动，最怕什么？我干了这么多年开发，最头疼的就是活动页面刚上线没多久，链接突然就打不开了，提示“已停止访问该网页”。很多时候，这真不是你的内容有问题，而是页面被用户随手一点，投诉了。尤其是那些抽奖、助力、砍价这类容易引发用户情绪波动的活动，用户没抢到奖品或者觉得规则复杂，反手就是一个投诉，链接瞬间就“凉了”。

这个右上角的“…”菜单，点开里面就有“投诉”选项，对开发者来说简直就是个“定时炸弹”。所以，动态控制这个投诉按钮的显示与隐藏，就成了很多运营和开发同学的刚需。你可能会问，直接永久隐藏掉不就好了？事情没那么简单。微信对于永久隐藏这类操作管控很严，容易被判定为恶意干扰用户体验，反而可能招致更严厉的处罚。

因此，更稳妥、更聪明的做法是动态控制。比如，在用户进入活动页面的关键几分钟内（比如观看活动规则、参与互动时），暂时隐藏投诉按钮，减少误触风险。等用户完成核心动作或者页面停留一段时间后，再恢复按钮显示。这样既达到了保护页面的目的，又不会过度影响用户正常使用微信的功能。这背后的核心，就是利用微信浏览器内置的 WeixinJSBridge 这个“桥梁”对象，通过调用它的 hideOptionMenu 和 showOptionMenu 方法来实现。

2. 核心武器：认识 WeixinJSBridge

要搞定微信H5页面的菜单控制，你必须先和 WeixinJSBridge 这个家伙打好交道。你可以把它理解成你的JavaScript代码和微信客户端内部功能之间的一座专用桥梁。我们想在网页里调用微信提供的原生能力（比如隐藏菜单、调起支付、获取网络状态），都得通过它来“传话”。

它不是任何时候都存在的。只有在微信内置浏览器（也就是我们常说的微信WebView）环境中，并且页面加载完成后，这个 WeixinJSBridge 对象才会被注入到全局 window 对象下。所以，我们的代码第一步永远是：判断环境，并等待桥梁就绪。

这里有两个关键方法是我们今天的主角：

• WeixinJSBridge.call('hideOptionMenu')：调用这个方法，可以隐藏右上角的“…”菜单按钮。注意，是隐藏整个菜单按钮，不仅仅是投诉选项。
• WeixinJSBridge.call('showOptionMenu')：调用这个方法，可以让隐藏的菜单按钮重新显示出来。

听起来很简单对吧？但坑就坑在调用时机上。如果你在页面一加载、WeixinJSBridge 还没准备好的时候就去调用，代码就会报错，什么都不生效。所以，标准的做法是监听 WeixinJSBridgeReady 事件。这个事件是微信专门提供的，就像是一个信号灯，它一亮，就说明“桥梁”已经架设好了，你的车辆（代码）可以安全通过了。

我刚开始用的时候也犯过懒，直接写个 setTimeout 延迟几秒执行，有时候灵有时候不灵，特别在网速慢的手机上。后来老老实实写事件监听，就再也没出过问题。这就是和客户端打交道必须遵守的“规矩”。

3. 基础实现：检测环境与等待桥梁就绪

万丈高楼平地起，我们先写一个最基础、最可靠的版本。这个版本的目标是：在微信环境里，确保 WeixinJSBridge 准备就绪后，立刻隐藏投诉按钮。这是很多静态页面（比如品牌宣传页、公告页）的常用做法。

首先，我们得判断用户是不是真的在微信里打开页面。别笑，真有用户会把链接复制到其他浏览器打开，那时候我们的代码就该“休息”了。判断方法很简单，就是检查 navigator.userAgent 里是否包含 micromessenger 这个标志。

// 判断是否在微信浏览器内
var isWeixin = (function() {
    return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
})();

if (isWeixin) {
    // 在微信环境内，准备操作
    if (typeof WeixinJSBridge == 'undefined') {
        // 如果桥梁对象还不存在，就监听准备就绪事件
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            // 兼容老版本IE的写法，现在基本用不上了，但写上更稳妥
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)