Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to control the menu in the upper right corner of the Wechat page in the public platform of Wechat. It has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article. Let's take a look at it.

Hide the upper-right menu interface wx.hideOptionMenu (); show the upper-right menu interface wx.showOptionMenu (); close the current web window interface wx.closeWindow (); batch hide function button interface wx.hideMenuItems ({menuList: [] / / menu items to be hidden can only hide the "propagation class" and "protection class" buttons, all menu items see Appendix 3}) Bulk display function button interface wx.showMenuItems ({menuList: [] / / menu items to be displayed, all menu items see Appendix 3}); hide all non-basic button interface wx.hideAllNonBaseMenuItem (); / / basic class button details see Appendix 3 to show all function button interface wx.showAllNonBaseMenuItem ()

Implement code steps

First, js library is introduced into jsp interface.

Second, the html code between

Welcome to Wechat jsapi test interface-V-type knowledge base interface.

Hide menu interface in the upper right corner

HideOptionMenu

Display the menu interface in the upper right corner

ShowOptionMenu

Close the current web window interface

CloseWindow

Batch hide function button interface

HideMenuItems

Batch display function button interface

ShowMenuItems

Hide all non-basic button interfaces

HideAllNonBaseMenuItem

Show all function button interfaces

ShowAllNonBaseMenuItem

Third, initialize the addition of Wechat jsapi library between

Wx.config ({debug: true, / / enables debug mode. The returned values of all api called will be displayed in the alert on the client side. To view the parameters passed, you can open them on the PC side, and the parameter information will be typed out through log and printed only on the PC side. AppId:'${appId}', / / required, unique ID of official account timestamp:'${timestamp}', / / required, timestamp of generating signature nonceStr:'${nonceStr}', / / required, generating random string of signature signature:'${signature}', / / required, signature See Appendix 1 jsApiList: ['checkJsApi',' chooseImage', 'previewImage',' uploadImage', 'downloadImage',' getNetworkType',// Network status Interface 'openLocation',// use Wechat built-in map to view geographic location interface' getLocation' / / get geographic location interface 'hideOptionMenu',// interface operation interface 1' showOptionMenu',// interface operation interface 2 'closeWindow', / interface operation interface 3' hideMenuItems',//// interface operation interface 4 'showMenuItems' / / Interface Operation Interface 5 'hideAllNonBaseMenuItem',//// Interface Operation Interface 6' showAllNonBaseMenuItem'//// Interface Operation Interface 7] / / required List of JS interfaces to be used, all JS interfaces are listed in Appendix 2})

Fourth, call the function js code of the second step button button, and add it to wx.ready.

/ / 8 interface operation interface starts-/ / 8.1Hidden the upper right menu document.querySelector ('# hideOptionMenu'). Onclick = function () {wx.hideOptionMenu ();}; / 8.2Show the upper right menu document.querySelector ('# showOptionMenu'). Onclick = function () {wx.showOptionMenu ();} / / 8.3 batch hidden menu items document.querySelector ('# hideMenuItems'). Onclick = function () {wx.hideMenuItems ({menuList: ['menuItem:readMode', / / Reading Mode' menuItem:share:timeline', / / share to moments' menuItem:copyUrl' / / copy links] Success: function (res) {alert ('hidden reading mode' "share to moments", "copy links" and other buttons') }, fail: function (res) {alert (JSON.stringify (res));}});} / / 8.4 batch display menu item document.querySelector ('# showMenuItems'). Onclick = function () {wx.showMenuItems ({menuList: ['menuItem:readMode', / / Reading Mode' menuItem:share:timeline', / / share to moments' menuItem:copyUrl' / / copy link] Success: function (res) {alert ('read mode' is displayed "share to moments", "copy links" and other buttons') }, fail: function (res) {alert (JSON.stringify (res));}});}; / 8.5 hide all non-basic menu items document.querySelector ('# hideAllNonBaseMenuItem'). Onclick = function () {wx.hideAllNonBaseMenuItem ({success: function () {alert ('hidden all non-basic menu items');}});} / / 8.6 shows all hidden non-basic menu items document.querySelector ('# showAllNonBaseMenuItem'). Onclick = function () {wx.showAllNonBaseMenuItem ({success: function () {alert ('all non-basic menu items are displayed);}});}; / / 8.7 closes the current window document.querySelector (' # closeWindow'). Onclick = function () {wx.closeWindow ();} / / 8 the end of the operation interface--

These js method comments are clearly written, and each method corresponds to a button button function.

Fifth, the complete jsp page code, readers can directly copy and run

Wechat jsapi Test-V knowledge Base .desc {color: red;} Welcome to Wechat jsapi Test Interface-V knowledge Base Interface Operation Interface

Hide menu interface in the upper right corner

HideOptionMenu

Display the menu interface in the upper right corner

ShowOptionMenu

Close the current web window interface

CloseWindow

Batch hide function button interface

HideMenuItems

Batch display function button interface

ShowMenuItems

Hide all non-basic button interfaces

HideAllNonBaseMenuItem

Show all function button interfaces

ShowAllNonBaseMenuItem

The basic interface determines whether the current client supports the specified js interface.

Geolocation Interface-use Wechat built-in map view location API

OpenLocation

Geolocation Interface-get geolocation API

GetLocation

Get network status interface

GetNetworkType

Image interface to take a picture or select a picture interface from a mobile photo album

ChooseImage

Preview picture interface

PreviewImage

Upload image API

UploadImage

Download picture interface

DownloadImage

Show picture

Wx.config ({debug: true, / / enables debug mode. The returned values of all api called will be displayed in the alert on the client side. To view the parameters passed, you can open them on the PC side, and the parameter information will be typed out through log and printed only on the PC side. AppId:'${appId}', / / required, unique ID of official account timestamp:'${timestamp}', / / required, timestamp of generating signature nonceStr:'${nonceStr}', / / required, generating random string of signature signature:'${signature}', / / required, signature See Appendix 1 jsApiList: ['checkJsApi',' chooseImage', 'previewImage',' uploadImage', 'downloadImage',' getNetworkType',// Network status Interface 'openLocation',// use Wechat built-in map to view geographic location interface' getLocation' / / get geographic location interface 'hideOptionMenu',// interface operation interface 1' showOptionMenu',// interface operation interface 2 'closeWindow', / interface operation interface 3' hideMenuItems',//// interface operation interface 4 'showMenuItems' / / Interface Operation Interface 5 'hideAllNonBaseMenuItem',//// Interface Operation Interface 6' showAllNonBaseMenuItem'//// Interface Operation Interface 7] / / required List of JS interfaces to be used, all JS interfaces are listed in Appendix 2}) Wx.ready (function () {/ / 5 Photo Interface / / 5.1Photography, local image selection var images = {localId: [], serverId: []}; document.querySelector ('# chooseImage'). Onclick = function () {wx.chooseImage ({success: function (res) {images.localId = res.localIds; alert ('selected' + res.localIds.length + 'picture') $("# faceImg") .attr ("src", res.localIds [0]); / / Show the picture to the page}});} / / 5.2 Picture Preview document.querySelector ('# previewImage'). Onclick = function () {wx.previewImage ({current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg', urls: [' http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg', 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',' http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg']}) }; / / 5.3 upload document.querySelector ('# uploadImage'). Onclick = function () {if (images.localId.length = = 0) {alert ('Please use the chooseImage API to select a picture first'); return;} var I = 0, length = images.localId.length; images.serverId = [] Function upload () {wx.uploadImage ({localId: images.localId [I], success: function (res) {iuploaded; / / alert ('uploaded:' + i+'/'+ length); images.serverId.push (res.serverId); if (I)

< length) { upload(); } }, fail: function (res) { alert(JSON.stringify(res)); } }); } upload(); }; // 5.4 下载图片 document.querySelector('#downloadImage').onclick = function () { if (images.serverId.length === 0) { alert('请先使用 uploadImage 上传图片'); return; } var i = 0, length = images.serverId.length; images.localId = []; function download() { wx.downloadImage({ serverId: images.serverId[i], success: function (res) { i++; alert('已下载：' + i + '/' + length); images.localId.push(res.localId); if (i < length) { download(); } } }); } download(); }; // 6 设备信息接口 // 6.1 获取当前网络状态 document.querySelector('#getNetworkType').onclick = function () { wx.getNetworkType({ success: function (res) { alert(res.networkType); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; //网络接口结束 // 7 地理位置接口 开始 // 7.1 查看地理位置 document.querySelector('#openLocation').onclick = function () { wx.openLocation({ latitude: 23.099994, longitude: 113.324520, name: 'TIT 创意园', address: '广州市海珠区新港中路 397 号', scale: 14, infoUrl: 'http://weixin.qq.com' }); }; // 7.2 获取当前地理位置 document.querySelector('#getLocation').onclick = function () { wx.getLocation({ success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('用户拒绝授权获取地理位置'); } }); }; // 7 地理位置接口 结束 // 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 界面操作接口 结束------------------------------------------ }); //初始化jsapi接口 状态wx.error(function (res) { alert("调用微信jsapi返回的状态:"+res.errMsg);}); 上述jsp代码中有四个参数，这四个参数是成功调用微信jsapi的凭证，分别为appId(必填，公众号的唯一标识),timestamp(必填，生成签名的时间戳), nonceStr(必填，生成签名的随机串) ,signature(必填，签名)，关于如何生成这四个参数，如果不知道的读者，请查看本页面左上角的菜单，里面有详细介绍，在这里不在累述。 第六、上述代码运行后，效果如下 打开微信进入界面，功能已表示为红色 点击隐藏右上角菜单，效果如下 点击显示右上角菜单按钮，效果如下，仔细看此时还有复制链接，分享到朋友圈等功能 点击批量隐藏功能按钮，我们会发现，右上角的分享到朋友圈、复制链接已经没有了，效果图如下

Thank you for reading this article carefully. I hope the article "how to control the menu in the upper right corner of the Wechat web page in the public platform of Wechat" shared by the editor is helpful to everyone. At the same time, I also hope that you can support it and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.