検索

ホームページ >WeChat アプレット >WeChatの開発 >WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

高洛峰
高洛峰オリジナル
2017-03-26 14:35:305662ブラウズ

WeChatの公式jsapiは、WeChatウェブページの右上隅にあるメニューを制御するために使用されるインターフェース操作インターフェースを提供しています。WeChat公式ドキュメントのインターフェース操作インターフェースの説明を見てみましょう。

右上隅のメニューインターフェースを非表示にする

wx.hideOptionMenu();

右上隅にメニューインターフェースを表示する

wx.showOptionMenu();

現在のWebページウィンドウインターフェースを閉じる

wx.closeWindow();

ボタンインターフェイスの一括非表示 

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

機能ボタンインターフェイスを一括表示

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

基本以外のボタンインターフェイスをすべて非表示

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

すべての機能ボタンインターフェイスを表示

りー

実装コードの手順

まず、JSP インターフェースで JS ライブラリを導入します 


wx.showAllNonBaseMenuItem();


第二、之间的html代码


<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>

2 番目、

間の HTML コード
🎜🎜🎜🎜🎜🎜
<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>

🎜🎜🎜🎜🎜🎜🎜🎜🎜 3 番目に、<script></script> の間に WeChat jsapi ライブラリを初期化し、🎜🎜🎜🎜🎜🎜🎜を追加します。 🎜🎜


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  
});


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


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

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

      

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

      

     获取网络状态接口

      

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

      

      预览图片接口

      

      上传图片接口

      

      下载图片接口

      

     
  

  显示图片


上記の jsp コードには 4 つのパラメータがあります。これらの 4 つのパラメータは、appId (必須、公式アカウントの一意の識別子)、タイムスタンプ (必須、生成) です。署名) タイムスタンプ)、 nonceStr (必須、署名を生成するためのランダムな文字列)、signature (必須、署名)、これら 4 つのパラメーターの生成方法がわからない読者は、このページの左上隅にあるメニューを確認してください。詳細な説明が記載されています。 , ここでは詳しく説明する必要はありません。

六番目、上記のコードを実行すると、効果は次のようになります

WeChatエントリインターフェースを開くと、関数が赤で示されています

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

クリックすると右上隅のメニューが非表示になり、その効果は以下のように

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

クリックすると右上隅のメニューボタンが表示され、効果は以下の通りです、よく見てくださいこんな機能もありますリンクをコピーしてモーメントに共有する

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

クリックしてバッチ機能ボタンを非表示にすると、右上隅のモーメントに共有とリンクをコピーする効果が消えていることがわかります。以下の通り

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

以上がWeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WeChat ストアの WeChat 製品ページへのジャンプ インターフェイスを開発する方法次の記事：WeChat ストアの WeChat 製品ページへのジャンプ インターフェイスを開発する方法

関連記事

続きを見る