微信导航栏自定义演示

此页面演示微信 JS-SDK 的导航栏自定义功能。注意：大部分功能需在微信内置浏览器中打开才能生效。

隐藏菜单功能的限制：

1. 需要认证服务号：普通订阅号无权限
2. 需要正确的签名：必须从后端获取有效签名
3. 需要配置安全域名：域名必须在公众平台后台配置
4. hideOptionMenu 已废弃：微信新版本已限制此功能
5. 建议方案：使用自定义导航栏代替原生导航栏

SDK 配置状态

JS-SDK 加载已加载

配置状态未配置

运行环境检测中...

1. 动态设置导航栏标题

2. 修改导航栏颜色

背景颜色：

前景颜色（标题和按钮）：

3. 控制右上角菜单（已限制）

实测结果：此功能在新版微信中已被限制，即使配置正确也无法隐藏菜单。微信官方已不推荐使用此接口。

4. 隐藏特定菜单项（有限支持）

注意：hideMenuItems 在部分场景下可用，但需要认证服务号 + 正确签名。普通H5页面通常无效。

5. 推荐方案：自定义导航栏

最佳实践：使用 HTML/CSS 实现自己的导航栏，完全可控，兼容性好。

代码示例

// 1. 配置 wx.config
wx.config({
  debug: false,
  appId: '你的AppId',
  timestamp: 你的时间戳,
  nonceStr: '随机字符串',
  signature: '签名',
  jsApiList: [
    'setNavigationBarTitle',
    'setNavigationBarColor',
    'hideOptionMenu',
    'hideMenuItems'
  ]
});

// 2. 设置标题
wx.ready(function() {
  wx.setNavigationBarTitle({
    title: '新标题'
  });
});

// 3. 修改颜色
wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#24c1a7'
});
            