Table of Contents
Hide the menu interface in the upper right corner" >Hide the menu interface in the upper right corner
Close the current web page window interface" >Close the current web page window interface
Batch hide function button interface" >Batch hide function button interface
Batch display function button interface" >Batch display function button interface
Hide all non-basic button interfaces" >Hide all non-basic button interfaces
Show all function button interface" >Show all function button interface
欢迎来到微信jsapi测试界面-V型知识库
界面操作接口
图像接口
Home WeChat Applet WeChat Development An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

Mar 26, 2017 pm 02:35 PM
WeChat development

WeChat’s official jsapi provides an interface operation interface, which is used to control the menu in the upper right corner of the WeChat web page. Let’s take a look at the description of the interface operation interface in WeChat’s official documentation.

Hide the menu interface in the upper right corner

wx.hideOptionMenu();
Copy after login

Show the menu interface in the upper right corner

wx.showOptionMenu();
Copy after login

Close the current web page window interface

wx.closeWindow();
Copy after login

Batch hide function button interface

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

Batch display function button interface

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

Hide all non-basic button interfaces

wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见附录3
Copy after login

Show all function button interface

wx.showAllNonBaseMenuItem();
Copy after login


Implementation code steps

First, jsp interface introduces js library


##

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
Copy after login


##Second, the html code between

Third, between <script></script> Initialize the WeChat jsapi library to add


#

<center><h3 id="欢迎来到微信jsapi测试界面-V型知识库">欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     
     <h3 id="界面操作接口">界面操作接口</h3><br>
      <span class="desc"  >隐藏右上角菜单接口</span><br>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><br>
      <span class="desc">显示右上角菜单接口</span><br>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><br>
      <span class="desc">关闭当前网页窗口接口</span><br>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button><br>
      <span class="desc">批量隐藏功能按钮接口</span><br>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><br>
      <span class="desc">批量显示功能按钮接口</span><br>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button><br>
      <span class="desc">隐藏所有非基础按钮接口</span><br>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br>
      <span class="desc">显示所有功能按钮接口</span><br>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br>
Copy after login



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


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


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


这些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型知识库
    
    
   
    
  
   
  
  <center><h3 id="欢迎来到微信jsapi测试界面-V型知识库">欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     
     <h3 id="界面操作接口">界面操作接口</h3><br>
      <span class="desc"  >隐藏右上角菜单接口</span><br>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><br>
      <span class="desc">显示右上角菜单接口</span><br>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><br>
      <span class="desc">关闭当前网页窗口接口</span><br>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button><br>
      <span class="desc">批量隐藏功能按钮接口</span><br>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><br>
      <span class="desc">批量显示功能按钮接口</span><br>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button><br>
      <span class="desc">隐藏所有非基础按钮接口</span><br>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br>
      <span class="desc">显示所有功能按钮接口</span><br>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br>
      
       
      
     

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


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

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

获取网络状态接口

图像接口

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

预览图片接口

上传图片接口

下载图片接口


显示图片

Copy after login


There are four parameters in the above jsp code. These four parameters are the credentials for successfully calling WeChat jsapi, which are appId (required). Fill in, the unique identification of the public account), timestamp (required, the timestamp of generating the signature), nonceStr (required, random string to generate signature), signature (required, signature), for readers who don’t know how to generate these four parameters, please check the menu in the upper left corner of this page, which has a detailed introduction, here No need to elaborate.

Sixth, after the above code is run, the effect is as follows

Open When WeChat enters the interface, the functions are shown in red

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

##Click to hide the menu in the upper right corner, the effect is as follows

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

Click to display the menu button in the upper right corner, the effect is as follows, look carefullyThere is also a copy link at this time, share it Go to Moments and other functions

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

## Click the batch hide function button, we will find that in the upper right corner The

is no longer available for sharing to Moments and copying the link. The rendering is as follows

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform

##

The above is the detailed content of An example of showing and hiding the menu in the upper right corner of the web page on WeChat public platform. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP WeChat development: How to implement message encryption and decryption PHP WeChat development: How to implement message encryption and decryption May 13, 2023 am 11:40 AM

PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.

Using PHP to develop WeChat mass messaging tools Using PHP to develop WeChat mass messaging tools May 13, 2023 pm 05:00 PM

With the popularity of WeChat, more and more companies are beginning to use it as a marketing tool. The WeChat group messaging function is one of the important means for enterprises to conduct WeChat marketing. However, if you only rely on manual sending, it is an extremely time-consuming and laborious task for marketers. Therefore, it is particularly important to develop a WeChat mass messaging tool. This article will introduce how to use PHP to develop WeChat mass messaging tools. 1. Preparation work To develop WeChat mass messaging tools, we need to master the following technical points: Basic knowledge of PHP WeChat public platform development Development tools: Sub

PHP WeChat development: How to implement user tag management PHP WeChat development: How to implement user tag management May 13, 2023 pm 04:31 PM

In the development of WeChat public accounts, user tag management is a very important function, which allows developers to better understand and manage their users. This article will introduce how to use PHP to implement the WeChat user tag management function. 1. Obtain the openid of the WeChat user. Before using the WeChat user tag management function, we first need to obtain the user's openid. In the development of WeChat public accounts, it is a common practice to obtain openid through user authorization. After the user authorization is completed, we can obtain the user through the following code

PHP WeChat development: How to implement group message sending records PHP WeChat development: How to implement group message sending records May 13, 2023 pm 04:31 PM

As WeChat becomes an increasingly important communication tool in people's lives, its agile messaging function is quickly favored by a large number of enterprises and individuals. For enterprises, developing WeChat into a marketing platform has become a trend, and the importance of WeChat development has gradually become more prominent. Among them, the group sending function is even more widely used. So, as a PHP programmer, how to implement group message sending records? The following will give you a brief introduction. 1. Understand the development knowledge related to WeChat public accounts. Before understanding how to implement group message sending records, I

PHP WeChat development: How to implement voting function PHP WeChat development: How to implement voting function May 14, 2023 am 11:21 AM

In the development of WeChat public accounts, the voting function is often used. The voting function is a great way for users to quickly participate in interactions, and it is also an important tool for holding events and surveying opinions. This article will introduce you how to use PHP to implement WeChat voting function. Obtain the authorization of the WeChat official account. First, you need to obtain the authorization of the WeChat official account. On the WeChat public platform, you need to configure the API address of the WeChat public account, the official account, and the token corresponding to the public account. In the process of our development using PHP language, we need to use the PH officially provided by WeChat

PHP WeChat development: How to implement customer service chat window management PHP WeChat development: How to implement customer service chat window management May 13, 2023 pm 05:51 PM

WeChat is currently one of the social platforms with the largest user base in the world. With the popularity of mobile Internet, more and more companies are beginning to realize the importance of WeChat marketing. When conducting WeChat marketing, customer service is a crucial part. In order to better manage the customer service chat window, we can use PHP language for WeChat development. 1. Introduction to PHP WeChat development PHP is an open source server-side scripting language that is widely used in the field of Web development. Combined with the development interface provided by WeChat public platform, we can use PHP language to conduct WeChat

Steps to implement WeChat public account development using PHP Steps to implement WeChat public account development using PHP Jun 27, 2023 pm 12:26 PM

How to use PHP to develop WeChat public accounts WeChat public accounts have become an important channel for promotion and interaction for many companies, and PHP, as a commonly used Web language, can also be used to develop WeChat public accounts. This article will introduce the specific steps to use PHP to develop WeChat public accounts. Step 1: Obtain the developer account of the WeChat official account. Before starting the development of the WeChat official account, you need to apply for a developer account of the WeChat official account. For the specific registration process, please refer to the official website of WeChat public platform

How to use PHP for WeChat development? How to use PHP for WeChat development? May 21, 2023 am 08:37 AM

With the development of the Internet and mobile smart devices, WeChat has become an indispensable part of the social and marketing fields. In this increasingly digital era, how to use PHP for WeChat development has become the focus of many developers. This article mainly introduces the relevant knowledge points on how to use PHP for WeChat development, as well as some of the tips and precautions. 1. Development environment preparation Before developing WeChat, you first need to prepare the corresponding development environment. Specifically, you need to install the PHP operating environment and the WeChat public platform

See all articles