目次
右上隅のメニューインターフェースを非表示にする" >右上隅のメニューインターフェースを非表示にする
右上隅にメニューインターフェースを表示する" >右上隅にメニューインターフェースを表示する
現在のWebページウィンドウインターフェースを閉じる" >現在のWebページウィンドウインターフェースを閉じる
機能ボタンインターフェイスを一括表示" >機能ボタンインターフェイスを一括表示
基本以外のボタンインターフェイスをすべて非表示" >基本以外のボタンインターフェイスをすべて非表示
すべての機能ボタンインターフェイスを表示" >すべての機能ボタンインターフェイスを表示
欢迎来到微信jsapi测试界面-V型知识库
界面操作接口
图像接口
ホームページ WeChat アプレット WeChatの開発 WeChatパブリックプラットフォームのWebページ右上隅のメニューの表示と非表示の例

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

Mar 26, 2017 pm 02:35 PM
WeChatの開発

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 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>
ログイン後にコピー

🎜🎜🎜🎜🎜🎜🎜🎜🎜 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 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接口


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

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

获取网络状态接口

图像接口

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

预览图片接口

上传图片接口

下载图片接口


显示图片

ログイン後にコピー


上記の 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP WeChat 開発: メッセージの暗号化と復号化を実装する方法 PHP WeChat 開発: メッセージの暗号化と復号化を実装する方法 May 13, 2023 am 11:40 AM

PHP は、Web 開発およびサーバーサイド プログラミング、特に WeChat 開発で広く使用されているオープン ソースのスクリプト言語です。現在、ますます多くの企業や開発者が WeChat 開発に PHP を使用し始めています。これは、PHP が本当に学びやすく、使いやすい開発言語となっているためです。 WeChat の開発では、メッセージの暗号化と復号化はデータのセキュリティに関わるため、非常に重要な問題となります。暗号化と復号化の方法を持たないメッセージの場合、ハッカーは簡単にデータを入手でき、ユーザーに脅威を与える可能性があります。

PHP を使用して WeChat マス メッセージング ツールを開発する PHP を使用して WeChat マス メッセージング ツールを開発する May 13, 2023 pm 05:00 PM

WeChat の人気に伴い、マーケティング ツールとして WeChat を使用し始める企業が増えています。 WeChat グループ メッセージング機能は、企業が WeChat マーケティングを行うための重要な手段の 1 つです。ただし、手動送信のみに頼ると、マーケターにとって非常に時間と労力がかかる作業になります。したがって、WeChat マス メッセージング ツールを開発することが特に重要です。この記事では、PHP を使用して WeChat マス メッセージング ツールを開発する方法を紹介します。 1. 準備作業 WeChat マス メッセージング ツールを開発するには、次の技術点を習得する必要があります。 PHP WeChat パブリック プラットフォーム開発の基礎知識 開発ツール: Sub

PHP WeChat 開発: ユーザータグ管理を実装する方法 PHP WeChat 開発: ユーザータグ管理を実装する方法 May 13, 2023 pm 04:31 PM

WeChat パブリック アカウントの開発において、ユーザー タグ管理は非常に重要な機能であり、開発者がユーザーをよりよく理解し、管理できるようになります。この記事では、PHPを使用してWeChatのユーザータグ管理機能を実装する方法を紹介します。 1. WeChat ユーザーの openid を取得する WeChat ユーザータグ管理機能を使用する前に、まずユーザーの openid を取得する必要があります。 WeChat パブリック アカウントの開発では、ユーザーの承認を通じて openid を取得するのが一般的です。ユーザー認証が完了したら、次のコードを通じてユーザーを取得できます。

PHP WeChat 開発: グループ メッセージ送信レコードの実装方法 PHP WeChat 開発: グループ メッセージ送信レコードの実装方法 May 13, 2023 pm 04:31 PM

WeChat が人々の生活においてますます重要なコミュニケーション ツールになるにつれ、その機敏なメッセージング機能はすぐに多くの企業や個人に支持されるようになりました。企業にとって、WeChat をマーケティング プラットフォームとして開発することがトレンドになっており、WeChat 開発の重要性が徐々に顕著になってきています。その中でも、グループ送信機能はさらに広く使用されているため、PHP プログラマとしてグループ メッセージ送信レコードを実装するにはどうすればよいでしょうか?以下に簡単に紹介します。 1. WeChat パブリック アカウントに関する開発知識を理解する グループ メッセージ送信レコードの実装方法を理解する前に、

PHP WeChat 開発: カスタマー サービスのチャット ウィンドウ管理を実装する方法 PHP WeChat 開発: カスタマー サービスのチャット ウィンドウ管理を実装する方法 May 13, 2023 pm 05:51 PM

WeChat は現在、世界最大のユーザーベースを持つソーシャル プラットフォームの 1 つであり、モバイル インターネットの普及に伴い、ますます多くの企業が WeChat マーケティングの重要性を認識し始めています。 WeChat マーケティングを実施する場合、顧客サービスは重要な部分です。カスタマー サービスのチャット ウィンドウをより適切に管理するために、WeChat 開発に PHP 言語を使用できます。 1. PHP WeChat 開発の概要 PHP は、Web 開発の分野で広く使用されているオープン ソースのサーバー側スクリプト言語です。 WeChat パブリック プラットフォームが提供する開発インターフェイスと組み合わせると、PHP 言語を使用して WeChat を実行できます。

PHP WeChat開発:投票機能の実装方法 PHP WeChat開発:投票機能の実装方法 May 14, 2023 am 11:21 AM

WeChat パブリック アカウントの開発では、投票機能がよく使用されます。投票機能はユーザーが気軽に交流に参加できるほか、イベントの開催や意見調査などにも重要なツールです。この記事では、PHPを使用してWeChatの投票機能を実装する方法を紹介します。 WeChat公式アカウントの認証を取得する まずはWeChat公式アカウントの認証を取得する必要があります。 WeChatパブリックプラットフォームでは、WeChatパブリックアカウント、公式アカウント、およびパブリックアカウントに対応するトークンのAPIアドレスを設定する必要があります。 PHP言語を使用した開発の過程では、WeChatが公式に提供するPHを使用する必要があります

PHP を使用して WeChat パブリック アカウント開発を実装する手順 PHP を使用して WeChat パブリック アカウント開発を実装する手順 Jun 27, 2023 pm 12:26 PM

PHP を使用して WeChat 公開アカウントを開発する方法 WeChat 公開アカウントは、多くの企業にとってプロモーションと交流のための重要なチャネルとなっており、一般的に使用される Web 言語として PHP を使用して WeChat 公開アカウントを開発することもできます。この記事では、PHP を使用して WeChat 公開アカウントを開発する具体的な手順を紹介します。ステップ1:WeChat公式アカウントの開発者アカウントを取得する WeChat公式アカウントの開発を開始する前に、WeChat公式アカウントの開発者アカウントを申請する必要があります。具体的な登録プロセスについては、WeChat パブリック プラットフォームの公式 Web サイトを参照してください。

WeChat 開発に PHP を使用するにはどうすればよいですか? WeChat 開発に PHP を使用するにはどうすればよいですか? May 21, 2023 am 08:37 AM

インターネットとモバイル スマート デバイスの発展に伴い、WeChat はソーシャルおよびマーケティング分野に欠かせないものになりました。デジタル化が進むこの時代において、WeChat 開発に PHP を使用する方法が多くの開発者の焦点になっています。この記事では主に、PHP を WeChat 開発に使用する方法とそのヒントや注意事項を紹介します。 1. 開発環境の準備 WeChat を開発する前に、まず対応する開発環境を準備する必要があります。具体的には、PHP オペレーティング環境と WeChat パブリック プラットフォームをインストールする必要があります。

See all articles