微信公众平台中如何控制微信网页右上角的菜单
发表于: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库添加
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+"/";%> |
上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。
第六、上述代码运行后,效果如下
打开微信进入界面,功能已表示为红色
点击隐藏右上角菜单,效果如下
点击显示右上角菜单按钮,效果如下,仔细看此时还有复制链接,分享到朋友圈等功能
点击批量隐藏功能按钮,我们会发现,右上角的分享到朋友圈、复制链接已经没有了,效果图如下
感谢你能够认真阅读完这篇文章,希望小编分享的"微信公众平台中如何控制微信网页右上角的菜单"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
接口
菜单
界面
按钮
功能
位置
图片
地理
地理位置
朋友
模式
链接
参数
附录
生成
代码
状态
公众
网页
网络
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
网络安全培训就业情况
速达如何查询数据库
榆林5g软件开发培训
管家婆服务器名字不对怎么办
荣耀云服务器登录官网
阿里云外包软件开发
baocms 数据库安装
网络安全标题优美
金融软件开发公司是做什么的
数据库开发项目管理
浏览器如何提交服务器
互联网 科技强警
上海公路管理软件开发
罗湖区正规网络技术开发服务价格
数字管理系统用什么配置的服务器
ddr4服务器内存有几种
mysql数据库如何创建存储过程
享折服务器
游戏软件开发解说
软件开发商的动力在哪里
计算机网络技术web应用就业
中华人民网络安全法
我的世界服务器极限生存怎么开
如何查看本机连接的数据库
腾讯云服务器高危漏洞怎么处理
怎么用云服务器做一个简历
数据库时区用处
河北什么是软件开发服务值得推荐
服务器2208
网络技术对文化发展的作用