微信公眾平台顯示隱藏網頁右上角選單實例介紹

微信官方jsapi提供了介面操作接口，用來控制微信網頁右上角的選單，下面看看微信官方文件關於介面操作介面的說明。

隱藏右上角選單介面

wx.hideOptionMenu();

顯示右上角選單介面

#

wx.showOptionMenu();

關閉目前網頁視窗介面

wx.closeWindow();

批次隱藏功能按鈕介面

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

批次顯示功能按鈕介面

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

隱藏所有非基礎按鈕介面

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

顯示所有功能按鈕介面

wx.showAllNonBaseMenuItem();

---

##實作程式碼步驟

第一、jsp介面引入js函式庫

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

##第二、之間的html程式碼

wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: '${appId}', // 必填，公众号的唯一标识  
    timestamp: '${ timestamp}' , // 必填，生成签名的时间戳  
    nonceStr: '${ nonceStr}', // 必填，生成签名的随机串  
    signature: '${ signature}',// 必填，签名，见附录1  
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//网络状态接口
                  'openLocation',//使用微信内置地图查看地理位置接口
                  'getLocation', //获取地理位置接口
                  'hideOptionMenu',//界面操作接口1
                  'showOptionMenu',//界面操作接口2
                  'closeWindow' ,  ////界面操作接口3
                  'hideMenuItems',////界面操作接口4
                  'showMenuItems',////界面操作接口5
                  'hideAllNonBaseMenuItem',////界面操作接口6
                  'showAllNonBaseMenuItem'////界面操作接口7
               ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

#第三、<script></script>之間初始化微信jsapi庫新增#########################

第四、调用第二步button按钮的功能js代码，在wx.ready中添加

这些js方法注释已经写的很明白，每个方法对应一个button按钮功能

第五、完整的jsp页面代码，读者可直接复制运行

上述jsp程式碼中有四個參數，這四個參數是成功呼叫微信jsapi的憑證，分別為appId(必填，公眾號的唯一識別),timestamp(必填，產生簽名的時間戳), nonceStr(必填，產生簽署的隨機串) ,signature(必填，簽章)，關於如何產生這四個參數，如果不知道的讀者，請查看本頁面左上角的選單，裡面有詳細介紹，在這裡不在累述。

第六、上述程式碼運行後，效果如下

打開微信進入介面，功能已表示為紅色

#點擊隱藏右上角選單，效果如下

點擊顯示右上角選單按鈕，效果如下，仔細看此時還有複製鏈接，分享到朋友圈等功能

點擊批次隱藏功能按鈕，我們會發現，右上角的分享到朋友圈、複製連結已經沒有了，效果圖如下

#

以上是微信公眾平台顯示隱藏網頁右上角選單實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！