집 >위챗 애플릿 >위챗 개발 >WeChat 공개 플랫폼에서 웹 페이지 오른쪽 상단에 메뉴를 표시하고 숨기는 예

WeChat 공개 플랫폼에서 웹 페이지 오른쪽 상단에 메뉴를 표시하고 숨기는 예

高洛峰원래의: 2017-03-26 14:35:305737검색

WeChat 공식 jsapi는 WeChat 웹 페이지 오른쪽 상단에 있는 메뉴를 제어하는 데 사용되는 인터페이스 작업 인터페이스를 제공합니다. WeChat 공식 문서에 있는 인터페이스 작업 인터페이스에 대한 설명을 살펴보겠습니다. .

오른쪽 상단에 메뉴 인터페이스 숨기기

wx.hideOptionMenu();

상단에 메뉴 인터페이스 표시 오른쪽

wx.showOptionMenu();

현재 웹페이지 창 인터페이스 닫기

wx.closeWindow();

일괄 숨기기 기능 버튼 인터페이스

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

일괄 표시 기능 버튼 인터페이스

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

기본이 아닌 모든 항목 숨기기 버튼 인터페이스

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

모든 기능 버튼 인터페이스 표시

wx.showAllNonBaseMenuItem();

구현 코드 단계

먼저 jsp 인터페이스에 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>

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

둘째,

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

// 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 界面操作接口  结束------------------------------------------

셋째, <script> WeChat jsapi 라이브러리가 추가되었습니다 <🎜><🎜><🎜><🎜><table class="syntaxhighlighter js" border="0"><tbody><tr class="firstRow"><td class="code" style="word-break: break-all;"><p class="container"><br/><pre class="brush:xml;toolbar:false">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 });</pre><p class="line number1 index0 alt2"><code class="js plain"><br/><p><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px"><strong><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px">第四、调用第二步button按钮的功能js代码，在wx.ready中添加<br/><table class="syntaxhighlighter js " border="0"><tbody><tr class="firstRow"><table class="syntaxhighlighter js" border="0"><tbody><tr class="firstRow"><td class="code" style="word-break: break-all;"><p class="container"><br/><pre class="brush:js;toolbar:false">// 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 界面操作接口结束------------------------------------------</pre><p class="line number1 index0 alt2"><code class="js comments"><br/><p><strong><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px"><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px; color:#c000">这些js方法注释已经写的很明白，每个方法对应一个button按钮功能<br/><p><span style="color:#000000"><strong><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px">第五、完整的jsp页面代码，读者可直接复制运行<strong><span style="font-family:微软雅黑,'Microsoft YaHei'; font-size:14px; color:#c000"><br/><table class="syntaxhighlighter html " border="0"><tbody><tr class="firstRow"><table class="syntaxhighlighter html" border="0"><tbody><tr class="firstRow"><td class="code" style="word-break: break-all;"><p class="container"><br/><pre class="brush:html;toolbar:false"><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>">  <title>微信jsapi测试-V型知识库</title> <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> <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인 WeChat jsapi를 성공적으로 호출하기 위한 자격 증명입니다. 공개 계정의 고유 ID), 타임스탬프(필수, 서명 생성 타임스탬프), nonceStr(필수, 서명 생성을 위한 임의 문자열), 서명(필수, 서명), 이 네 가지 매개변수를 생성하는 방법을 모르는 독자를 위해 자세한 소개가 있는 이 페이지 왼쪽 상단의 메뉴를 확인하세요. , 여기 자세히 설명할 필요가 없습니다.

여섯째, 위 코드를 실행한 후의 효과는 다음과 같습니다

열기 WeChat이 인터페이스에 들어가면 기능이 빨간색으로 표시됩니다.

클릭하여 메뉴를 숨깁니다. 오른쪽 상단에 효과는 다음과 같습니다

클릭하면 상단에 메뉴버튼이 표시됩니다 오른쪽 구석에 효과는 다음과 같으니 잘 보세요이때 복사 링크도 있으니 공유해 보세요 모멘트 및 기타 기능으로 이동

일괄 숨기기 기능 버튼을 클릭하면 오른쪽 상단에 Moments 공유 및 링크 복사가 더 이상 제공되지 않습니다. 팔로우

위 내용은 WeChat 공개 플랫폼에서 웹 페이지 오른쪽 상단에 메뉴를 표시하고 숨기는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：WeChat 제품 페이지에 대한 WeChat 매장 점프 인터페이스를 개발하는 방법다음 기사：WeChat 제품 페이지에 대한 WeChat 매장 점프 인터페이스를 개발하는 방법

`관련 기사`

더보기

WeChat 미니 프로그램 텍스트 영역에 대한 자세한 설명과 간단한 사용법
PHP WeChat 공용 계정 개발 (2) Baidu BAE 구축 및 데이터베이스 활용
php WeChat 공개 계정 개발 (3) php는 간단한 WeChat 문자 커뮤니케이션을 구현합니다.
php WeChat 공개 계정 개발 (4) php는 사용자 정의 키워드 응답을 구현합니다.
API 샘플 코드를 호출하는 WeChat 스토어의 PHP 버전

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
회사 소개부인 성명Sitemap
                © php.cn All rights reserved