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

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

둘째,


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:php;toolbar:false;'>wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: &amp;#39;${appId}&amp;#39;, // 必填,公众号的唯一标识 timestamp: &amp;#39;${ timestamp}&amp;#39; , // 必填,生成签名的时间戳 nonceStr: &amp;#39;${ nonceStr}&amp;#39;, // 必填,生成签名的随机串 signature: &amp;#39;${ signature}&amp;#39;,// 必填,签名,见附录1 jsApiList: [&amp;#39;checkJsApi&amp;#39;, &amp;#39;chooseImage&amp;#39;, &amp;#39;previewImage&amp;#39;, &amp;#39;uploadImage&amp;#39;, &amp;#39;downloadImage&amp;#39;, &amp;#39;getNetworkType&amp;#39;,//网络状态接口 &amp;#39;openLocation&amp;#39;,//使用微信内置地图查看地理位置接口 &amp;#39;getLocation&amp;#39;, //获取地理位置接口 &amp;#39;hideOptionMenu&amp;#39;,//界面操作接口1 &amp;#39;showOptionMenu&amp;#39;,//界面操作接口2 &amp;#39;closeWindow&amp;#39; , ////界面操作接口3 &amp;#39;hideMenuItems&amp;#39;,////界面操作接口4 &amp;#39;showMenuItems&amp;#39;,////界面操作接口5 &amp;#39;hideAllNonBaseMenuItem&amp;#39;,////界面操作接口6 &amp;#39;showAllNonBaseMenuItem&amp;#39;////界面操作接口7 ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });</pre><p class="line number1 index0 alt2"><code class="js plain"><br/><p><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; font-size:14px"><strong><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; 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:php;toolbar:false;'>// 8 界面操作接口 开始---------- // 8.1 隐藏右上角菜单 document.querySelector(&amp;#39;#hideOptionMenu&amp;#39;).onclick = function () { wx.hideOptionMenu(); }; // 8.2 显示右上角菜单 document.querySelector(&amp;#39;#showOptionMenu&amp;#39;).onclick = function () { wx.showOptionMenu(); }; // 8.3 批量隐藏菜单项 document.querySelector(&amp;#39;#hideMenuItems&amp;#39;).onclick = function () { wx.hideMenuItems({ menuList: [ &amp;#39;menuItem:readMode&amp;#39;, // 阅读模式 &amp;#39;menuItem:share:timeline&amp;#39;, // 分享到朋友圈 &amp;#39;menuItem:copyUrl&amp;#39; // 复制链接 ], success: function (res) { alert(&amp;#39;已隐藏“阅读模式”,“分享到朋友圈”,“复制链接”等按钮&amp;#39;); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.4 批量显示菜单项 document.querySelector(&amp;#39;#showMenuItems&amp;#39;).onclick = function () { wx.showMenuItems({ menuList: [ &amp;#39;menuItem:readMode&amp;#39;, // 阅读模式 &amp;#39;menuItem:share:timeline&amp;#39;, // 分享到朋友圈 &amp;#39;menuItem:copyUrl&amp;#39; // 复制链接 ], success: function (res) { alert(&amp;#39;已显示“阅读模式”,“分享到朋友圈”,“复制链接”等按钮&amp;#39;); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.5 隐藏所有非基本菜单项 document.querySelector(&amp;#39;#hideAllNonBaseMenuItem&amp;#39;).onclick = function () { wx.hideAllNonBaseMenuItem({ success: function () { alert(&amp;#39;已隐藏所有非基本菜单项&amp;#39;); } }); }; // 8.6 显示所有被隐藏的非基本菜单项 document.querySelector(&amp;#39;#showAllNonBaseMenuItem&amp;#39;).onclick = function () { wx.showAllNonBaseMenuItem({ success: function () { alert(&amp;#39;已显示所有非基本菜单项&amp;#39;); } }); }; // 8.7 关闭当前窗口 document.querySelector(&amp;#39;#closeWindow&amp;#39;).onclick = function () { wx.closeWindow(); }; // 8 界面操作接口 结束------------------------------------------</pre><p class="line number1 index0 alt2"><code class="js comments"><br/><p><strong><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; font-size:14px"><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; font-size:14px; color:#c000">这些js方法注释已经写的很明白,每个方法对应一个button按钮功能<br/><p><span style="color:#000000"><strong><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; font-size:14px">第五、完整的jsp页面代码,读者可直接复制运行<strong><span style="font-family:微软雅黑,&#39;Microsoft YaHei&#39;; 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:php;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%>"> <!-- www.vxzsk.com原创 --> <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 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인 WeChat jsapi를 성공적으로 호출하기 위한 자격 증명입니다. 공개 계정의 고유 ID), 타임스탬프(필수, 서명 생성 타임스탬프), nonceStr(필수, 서명 생성을 위한 임의 문자열), 서명(필수, 서명), 이 네 가지 매개변수를 생성하는 방법을 모르는 독자를 위해 자세한 소개가 있는 이 페이지 왼쪽 상단의 메뉴를 확인하세요. , 여기 자세히 설명할 필요가 없습니다.

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

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

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

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

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

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

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

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

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

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

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP微信开发:如何实现消息加密解密PHP微信开发:如何实现消息加密解密May 13, 2023 am 11:40 AM

PHP是一种开源的脚本语言,广泛应用于Web开发和服务器端编程,尤其在微信开发中得到了广泛的应用。如今,越来越多的企业和开发者开始使用PHP进行微信开发,因为它成为了一款真正的易学易用的开发语言。在微信开发中,消息的加密和解密是一个非常重要的问题,因为它们涉及到数据的安全性。对于没有加密和解密方式的消息,黑客可以轻松获取到其中的数据,对用户造成威胁

PHP微信开发:如何实现客服聊天窗口管理PHP微信开发:如何实现客服聊天窗口管理May 13, 2023 pm 05:51 PM

微信是目前全球用户规模最大的社交平台之一,随着移动互联网的普及,越来越多的企业开始意识到微信营销的重要性。在进行微信营销时,客服服务是至关重要的一环。为了更好地管理客服聊天窗口,我们可以借助PHP语言进行微信开发。一、PHP微信开发简介PHP是一种开源的服务器端脚本语言,广泛运用于Web开发领域。结合微信公众平台提供的开发接口,我们可以使用PHP语言进行微信

PHP微信开发:如何实现用户标签管理PHP微信开发:如何实现用户标签管理May 13, 2023 pm 04:31 PM

在微信公众号开发中,用户标签管理是一个非常重要的功能,可以让开发者更好地了解和管理自己的用户。本篇文章将介绍如何使用PHP实现微信用户标签管理功能。一、获取微信用户openid在使用微信用户标签管理功能之前,我们首先需要获取用户的openid。在微信公众号开发中,通过用户授权的方式获取openid是比较常见的做法。在用户授权完成后,我们可以通过以下代码获取用

用PHP开发微信群发工具用PHP开发微信群发工具May 13, 2023 pm 05:00 PM

随着微信的普及,越来越多的企业开始将其作为营销工具。而微信群发功能,则是企业进行微信营销的重要手段之一。但是,如果只依靠手动发送,对于营销人员来说是一件极为费时费力的工作。所以,开发一款微信群发工具就显得尤为重要。本文将介绍如何使用PHP开发微信群发工具。一、准备工作开发微信群发工具,我们需要掌握以下几个技术点:PHP基础知识微信公众平台开发开发工具:Sub

如何使用PHP进行微信开发?如何使用PHP进行微信开发?May 21, 2023 am 08:37 AM

随着互联网和移动智能设备的发展,微信成为了社交和营销领域不可或缺的一部分。在这个越来越数字化的时代,如何使用PHP进行微信开发已经成为了很多开发者的关注点。本文主要介绍如何使用PHP进行微信开发的相关知识点,以及其中的一些技巧和注意事项。一、开发环境准备在进行微信开发之前,首先需要准备好相应的开发环境。具体来说,需要安装PHP的运行环境,以及微信公众平台提

PHP微信开发:如何实现群发消息发送记录PHP微信开发:如何实现群发消息发送记录May 13, 2023 pm 04:31 PM

随着微信成为了人们生活中越来越重要的一个通讯工具,其敏捷的消息传递功能迅速受到广大企业和个人的青睐。对于企业而言,将微信发展为一个营销平台已经成为趋势,而微信开发的重要性也逐渐凸显。在其中,群发功能更是被广泛使用,那么,作为PHP程序员,如何实现群发消息发送记录呢?下面将为大家简单介绍一下。1.了解微信公众号相关开发知识在了解如何实现群发消息发送记录之前,我

ThinkPHP6微信开发指南:快速搭建微信公众号应用ThinkPHP6微信开发指南:快速搭建微信公众号应用Aug 26, 2023 pm 11:55 PM

ThinkPHP6微信开发指南:快速搭建微信公众号应用引言:微信公众号作为一种重要的社交媒体平台,为个人和企业在市场推广、信息传播等方面提供了很大的机会。在这篇文章中,我们将介绍如何使用ThinkPHP6快速搭建一个微信公众号应用,并且提供一些常用的代码示例。环境准备在开始开发之前,我们首先需要准备好以下环境:PHP7以上版本ThinkPHP6框架微信公众号

PHP微信开发:如何实现语音识别PHP微信开发:如何实现语音识别May 13, 2023 pm 09:31 PM

随着移动互联网的普及,微信作为一款社交软件,越来越多的人开始使用,并且微信开放平台也给开发者带来了众多的机会。近年来,随着人工智能技术的发展,语音识别技术逐渐成为了移动端开发的热门技术之一。在微信开发中,如何实现语音识别成为很多开发者关注的问题。本文将介绍如何利用PHP开发微信应用实现语音识别功能。一、语音识别原理在介绍如何实现语音识别之前,我们先了解一下语

See all articles

핫 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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경