Ein Beispiel für das Ein- und Ausblenden des Menüs in der oberen rechten Ecke der Webseite auf der öffentlichen WeChat-Plattform

高洛峰
Freigeben: 2017-03-26 14:35:30
Original
5642 Leute haben es durchsucht

Das offizielle JSAPI von WeChat bietet eine Schnittstelle zur Bedienung, mit der das Menü in der oberen rechten Ecke der WeChat-Webseite gesteuert wird. Schauen wir uns die Beschreibung der Schnittstelle zur Bedienung im offiziellen WeChat-Dokument an .

Menüoberfläche in der oberen rechten Ecke ausblenden

wx.hideOptionMenu();
Nach dem Login kopieren

Menüoberfläche in anzeigen in der oberen rechten Ecke

wx.showOptionMenu();
Nach dem Login kopieren

Schließen Sie die aktuelle Webseitenfensteroberfläche

wx.closeWindow();
Nach dem Login kopieren

Batch-Funktionsschaltflächen-Schnittstelle ausblenden

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

Batch-Anzeige-Funktionsschaltflächen-Schnittstelle

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

Alle nicht-grundlegenden Schaltflächen-Schnittstelle ausblenden

wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见附录3
Nach dem Login kopieren

Alle Funktionsschaltflächen-Schnittstelle anzeigen

wx.showAllNonBaseMenuItem();
Nach dem Login kopieren


Implementieren Sie die Codeschritte

Führen Sie zunächst js in die JSP-Schnittstellenbibliothek ein


<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>
Nach dem Login kopieren


< code class="js plain">

Zweitens ist der HTML-Code zwischen < ;body>


<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>
Nach dem Login kopieren


< /code></p><table class="syntaxhighlighter js " border="0"><tbody><tr class="firstRow"></tr></tbody></table><p class="Zeilennummer17 index16 alt2"><code class="html plain"><🎜><🎜>

<🎜><🎜> <🎜>Drittens initialisieren Sie die WeChat-JSAPI-Bibliothek zwischen <script></script> und fügen Sie <🎜><🎜><🎜><🎜> hinzu


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  
});
Nach dem Login kopieren


第四、调用第二步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 界面操作接口  结束------------------------------------------
Nach dem Login kopieren


这些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接口


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

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

获取网络状态接口

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

预览图片接口

上传图片接口

下载图片接口


显示图片

Nach dem Login kopieren


Der obige JSP-Code enthält vier Parameter. Diese vier Parameter sind die Anmeldeinformationen für den erfolgreichen Aufruf von WeChat jsapi bzw. appId (erforderlich). Füllen Sie die eindeutige Identifikation des öffentlichen Kontos aus), den Zeitstempel (erforderlich, den Zeitstempel der Signaturerstellung), nonceStr (erforderlich, zufällige Zeichenfolge zum Generieren der Signatur), Signatur (erforderlich, Signatur). Für Leser, die nicht wissen, wie diese vier Parameter generiert werden, sehen Sie sich bitte das Menü in der oberen linken Ecke dieser Seite an, das eine detaillierte Einführung enthält , hier Keine Notwendigkeit, näher darauf einzugehen.

Sechstens ist der Effekt nach dem Ausführen des obigen Codes wie folgt

Öffnen Wenn WeChat die Benutzeroberfläche betritt, werden die Funktionen rot angezeigt

Ein Beispiel für das Ein- und Ausblenden des Menüs in der oberen rechten Ecke der Webseite auf der öffentlichen WeChat-Plattform

Klicken Sie, um das Menü auszublenden in der oberen rechten Ecke ist der Effekt wie folgt

Ein Beispiel für das Ein- und Ausblenden des Menüs in der oberen rechten Ecke der Webseite auf der öffentlichen WeChat-Plattform

Klicken Sie, um die Menüschaltfläche oben anzuzeigen In der rechten Ecke ist der Effekt wie folgt. Schauen Sie genau hin

Klicken Sie auf die Schaltfläche „Batch-Ausblenden“. In der oberen rechten Ecke werden Sie feststellen, dass die Links „Teilen zu Momenten“ und „Kopieren“ nicht mehr verfügbar sind folgt

Ein Beispiel für das Ein- und Ausblenden des Menüs in der oberen rechten Ecke der Webseite auf der öffentlichen WeChat-Plattform


Das obige ist der detaillierte Inhalt vonEin Beispiel für das Ein- und Ausblenden des Menüs in der oberen rechten Ecke der Webseite auf der öffentlichen WeChat-Plattform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage