Maison > Applet WeChat > Développement WeChat > Un exemple d'affichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Un exemple d'affichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

高洛峰
Libérer: 2017-03-26 14:35:30
original
5682 Les gens l'ont consulté

Le jsapi officiel de WeChat fournit une interface de fonctionnement de l'interface, qui est utilisée pour contrôler le menu dans le coin supérieur droit de la page Web WeChat. Jetons un coup d'œil à la description de l'interface de fonctionnement de l'interface dans le document officiel de WeChat. .

Masquer l'interface du menu dans le coin supérieur droit

wx.hideOptionMenu();
Copier après la connexion

Afficher l'interface du menu dans le coin supérieur droit

wx.showOptionMenu();
Copier après la connexion

Fermer l'interface de la fenêtre de la page Web actuelle

wx.closeWindow();
Copier après la connexion

Interface des boutons de fonction de masquage par lots

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

Interface des boutons de fonction d'affichage par lots

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

Masquer tous les boutons non basiques Interface

wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见附录3
Copier après la connexion

Afficher tous les boutons de fonction Interface

wx.showAllNonBaseMenuItem();
Copier après la connexion


Étapes du code d'implémentation

Tout d'abord, l'interface jsp introduit la bibliothèque js


<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>
Copier après la connexion


Deuxièmement, le code html entre


<center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     
     <h3 id="menu-webview">界面操作接口</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>
Copier après la connexion


<🎜><🎜> <🎜>Troisièmement, initialisez la bibliothèque jsapi WeChat entre <script></script> et ajoutez <🎜><🎜><🎜><🎜>

<🎜><🎜>


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  
});
Copier après la connexion


第四、调用第二步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 界面操作接口  结束------------------------------------------
Copier après la connexion


这些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>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     
     <h3 id="menu-webview">界面操作接口</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接口


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

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

获取网络状态接口

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

预览图片接口

上传图片接口

下载图片接口


显示图片

Copier après la connexion


Il y a quatre paramètres dans le code jsp ci-dessus. Ces quatre paramètres sont les informations d'identification pour appeler avec succès WeChat jsapi, respectivement appId (obligatoire. À renseigner, l'identification unique du compte public), l'horodatage (obligatoire, l'horodatage de génération de la signature), nonceStr (obligatoire, chaîne aléatoire pour générer la signature), signature (obligatoire, signature), pour les lecteurs qui ne savent pas comment générer ces quatre paramètres, veuillez consulter le menu dans le coin supérieur gauche de cette page, qui contient une introduction détaillée , ici Pas besoin de développer.

Sixièmement, après avoir exécuté le code ci-dessus, l'effet est le suivant

Ouvrir Lorsque WeChat entre dans l'interface, les fonctions sont affichées en rouge

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Cliquez pour masquer le menu dans le coin supérieur droit, l'effet est le suivant

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Cliquez pour afficher le bouton de menu en haut coin droit, l'effet est le suivant, regardez attentivementIl y a aussi un lien de copie en ce moment, partagez-le Allez dans Moments et autres fonctions

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Cliquez sur le bouton de la fonction de masquage par lots, nous constaterons que dans le coin supérieur droit Les liens de partage vers Moments et de copie ne sont plus disponibles. suit

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Un exemple daffichage et de masquage du menu dans le coin supérieur droit de la page Web sur la plateforme publique WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal