千家信息网

微信公众平台中如何控制微信网页右上角的菜单

发表于:2025-01-19 作者:千家信息网编辑
千家信息网最后更新 2025年01月19日,这篇文章主要介绍了微信公众平台中如何控制微信网页右上角的菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。隐藏右上角菜单接口wx.hi
千家信息网最后更新 2025年01月19日微信公众平台中如何控制微信网页右上角的菜单

这篇文章主要介绍了微信公众平台中如何控制微信网页右上角的菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

隐藏右上角菜单接口

wx.hideOptionMenu();

显示右上角菜单接口

wx.showOptionMenu();

关闭当前网页窗口接口

wx.closeWindow();

批量隐藏功能按钮接口

wx.hideMenuItems({    menuList: [] // 要隐藏的菜单项,只能隐藏"传播类"和"保护类"按钮,所有menu项见附录3});

批量显示功能按钮接口

wx.showMenuItems({    menuList: [] // 要显示的菜单项,所有menu项见附录3});

隐藏所有非基础按钮接口

wx.hideAllNonBaseMenuItem();// "基本类"按钮详见附录3

显示所有功能按钮接口

wx.showAllNonBaseMenuItem();

实现代码步骤

第一、jsp界面引入js库


  


第二、之间的html代码


欢迎来到微信jsapi测试界面-V型知识库


隐藏右上角菜单接口

显示右上角菜单接口

关闭当前网页窗口接口

批量隐藏功能按钮接口

批量显示功能按钮接口

隐藏所有非基础按钮接口

显示所有功能按钮接口


第三、之间初始化微信jsapi库添加


wx.config({      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。      appId: '${appId}', // 必填,公众号的唯一标识      timestamp: '${ timestamp}' , // 必填,生成签名的时间戳      nonceStr: '${ nonceStr}', // 必填,生成签名的随机串      signature: '${ signature}',// 必填,签名,见附录1      jsApiList: ['checkJsApi',                'chooseImage',                'previewImage',                 'uploadImage',                 'downloadImage',                  'getNetworkType',//网络状态接口                  'openLocation',//使用微信内置地图查看地理位置接口                  'getLocation', //获取地理位置接口                  'hideOptionMenu',//界面操作接口1                  'showOptionMenu',//界面操作接口2                  'closeWindow' ,  ////界面操作接口3                  'hideMenuItems',////界面操作接口4                  'showMenuItems',////界面操作接口5                  'hideAllNonBaseMenuItem',////界面操作接口6                  'showAllNonBaseMenuItem'////界面操作接口7               ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  });


第四、调用第二步button按钮的功能js代码,在wx.ready中添加


// 8 界面操作接口 开始----------  // 8.1 隐藏右上角菜单  document.querySelector('#hideOptionMenu').onclick = function () {    wx.hideOptionMenu();  };   // 8.2 显示右上角菜单  document.querySelector('#showOptionMenu').onclick = function () {    wx.showOptionMenu();  };   // 8.3 批量隐藏菜单项  document.querySelector('#hideMenuItems').onclick = function () {    wx.hideMenuItems({      menuList: [        'menuItem:readMode', // 阅读模式        'menuItem:share:timeline', // 分享到朋友圈        'menuItem:copyUrl' // 复制链接      ],      success: function (res) {        alert('已隐藏"阅读模式","分享到朋友圈","复制链接"等按钮');      },      fail: function (res) {        alert(JSON.stringify(res));      }    });  };   // 8.4 批量显示菜单项  document.querySelector('#showMenuItems').onclick = function () {    wx.showMenuItems({      menuList: [        'menuItem:readMode', // 阅读模式        'menuItem:share:timeline', // 分享到朋友圈        'menuItem:copyUrl' // 复制链接      ],      success: function (res) {        alert('已显示"阅读模式","分享到朋友圈","复制链接"等按钮');      },      fail: function (res) {        alert(JSON.stringify(res));      }    });  };   // 8.5 隐藏所有非基本菜单项  document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {    wx.hideAllNonBaseMenuItem({      success: function () {        alert('已隐藏所有非基本菜单项');      }    });  };   // 8.6 显示所有被隐藏的非基本菜单项  document.querySelector('#showAllNonBaseMenuItem').onclick = function () {    wx.showAllNonBaseMenuItem({      success: function () {        alert('已显示所有非基本菜单项');      }    });  };   // 8.7 关闭当前窗口  document.querySelector('#closeWindow').onclick = function () {    wx.closeWindow();  }; // 8 界面操作接口  结束------------------------------------------


这些js方法注释已经写的很明白,每个方法对应一个button按钮功能

第五、完整的jsp页面代码,读者可直接复制运行


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>               微信jsapi测试-V型知识库                        

欢迎来到微信jsapi测试界面-V型知识库


隐藏右上角菜单接口

显示右上角菜单接口

关闭当前网页窗口接口

批量隐藏功能按钮接口

批量显示功能按钮接口

隐藏所有非基础按钮接口

显示所有功能按钮接口

基础接口之判断当前客户端是否支持指定的js接口


地理位置接口-使用微信内置地图查看位置接口

地理位置接口-获取地理位置接口

获取网络状态接口

拍照或从手机相册中选图接口

预览图片接口

上传图片接口

下载图片接口


显示图片


上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。

第六、上述代码运行后,效果如下

打开微信进入界面,功能已表示为红色

点击隐藏右上角菜单,效果如下

点击显示右上角菜单按钮,效果如下,仔细看此时还有复制链接,分享到朋友圈等功能

点击批量隐藏功能按钮,我们会发现,右上角的分享到朋友圈、复制链接已经没有了,效果图如下

感谢你能够认真阅读完这篇文章,希望小编分享的"微信公众平台中如何控制微信网页右上角的菜单"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

0