Wechat Public Platform jsapi Development Tutorial (8) Display Hidden Top Right Menu

Keywords: JSON network JQuery JSP

Source of articles  http://www.vxzsk.com/119.html


Wechat official jsapi provides an interface operation interface to control the menu in the upper right corner of Wechat's web page. Let's look at the instructions of Wechat official documents on the interface operation interface.

Hide the top right menu interface

wx.hideOptionMenu();

Display the top right menu interface

wx.showOptionMenu();

Close the current page window interface

wx.closeWindow();

Button Interface for Batch Hiding Function

wx.hideMenuItems({
menuList: []// To hide menu items, you can only hide the "propagation class" and "protection class" buttons. All menu items are listed in Appendix 3.
});

Button Interface for Batch Display Function

wx.showMenuItems({
menuList: []// Menu items to be displayed, see Appendix 3 for all menu items
});

Hide all non-basic button interfaces

wx.hideAllNonBaseMenuItem();
// The "Basic Class" button is detailed in Appendix 3.

Display all function button interfaces

wx.showAllNonBaseMenuItem();



Implementing code steps

First, jsp interface introduces js Library

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

Second, html code between < body > </body >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<center><h3>Welcome to Wechat jsapi Test interface-V Type knowledge base</h3></center>
     
     <h3 id="menu-webview">Interface Operating Interface</h3><br>
      <span class="desc"  >Hide the top right menu interface</span><br>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><br>
      <span class="desc">Display the top right menu interface</span><br>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><br>
      <span class="desc">Close the current page window interface</span><br>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button><br>
      <span class="desc">Button Interface for Batch Hiding Function</span><br>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><br>
      <span class="desc">Button Interface for Batch Display Function</span><br>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button><br>
      <span class="desc">Hide all non-basic button interfaces</span><br>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br>
      <span class="desc">Display all function button interfaces</span><br>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br>

Third, <script> </script> Initializes the addition of Wechat jsapi Libraries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
wx.config({  
    debug: true, //Open debugging mode, the return values of all APIs invoked will be displayed in alert on the client side. To view the incoming parameters, you can open them on the pc side, and the parameter information will be typed out through the log, and printed only on the pc side.   
    appId: '${appId}', //Mandatory, unique logo of public number
    timestamp: '${ timestamp}' , //Mandatory, time stamp for signature generation
    nonceStr: '${ nonceStr}', //To generate a random string of signatures.
    signature: '${ signature}',//To be completed and signed, see Appendix 1.
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//Network State Interface
                  'openLocation',//Viewing Geographic Location Interface Using Wechat Built-in Map
                  'getLocation', //Getting Geographical Location Interface
                  'hideOptionMenu',//Interface Operating Interface 1
                  'showOptionMenu',//Interface Operating Interface 2
                  'closeWindow' ,  //// Interface Operating Interface 3
                  'hideMenuItems',//// Interface Operating Interface 4
                  'showMenuItems',//// Interface Operating Interface 5
                  'hideAllNonBaseMenuItem',//// Interface Operating Interface 6
                  'showAllNonBaseMenuItem'//// Interface Operating Interface 7
               ] //Mandatory, list of JS interfaces to be used, all JS interfaces listed in Appendix 2
});

Fourth, call the second button button function js code, add in wx. read

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
//8. Interface Operating Interface Beginning------------------------------------------------------------------------------------------------------
  //8.1 Hide the top right menu
  document.querySelector('#hideOptionMenu').onclick = function () {
    wx.hideOptionMenu();
  };
 
  //8.2 Display the menu in the upper right corner
  document.querySelector('#showOptionMenu').onclick = function () {
    wx.showOptionMenu();
  };
 
  //8.3 Mass Hidden Menu Items
  document.querySelector('#hideMenuItems').onclick = function () {
    wx.hideMenuItems({
      menuList: [
        'menuItem:readMode', //Reading patterns
        'menuItem:share:timeline', //Share in the circle of friends
        'menuItem:copyUrl' //Copy links
      ],
      success: function (res) {
        alert('Hidden "Reading Mode", "Share to Friends Circle", "Copy Links" and other buttons');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  //8.4 Batch display menu items
  document.querySelector('#showMenuItems').onclick = function () {
    wx.showMenuItems({
      menuList: [
        'menuItem:readMode', //Reading patterns
        'menuItem:share:timeline', //Share in the circle of friends
        'menuItem:copyUrl' //Copy links
      ],
      success: function (res) {
        alert('Buttons such as "Read Mode", "Share to Friends Circle", "Copy Link" have been displayed.');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  //8.5 Hide all non-basic menu items
  document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
    wx.hideAllNonBaseMenuItem({
      success: function () {
        alert('All non-basic menu items have been hidden');
      }
    });
  };
 
  //8.6 Display all hidden non-basic menu items
  document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
    wx.showAllNonBaseMenuItem({
      success: function () {
        alert('All non-basic menu items are displayed');
      }
    });
  };
 
  //8.7 Close the current window
  document.querySelector('#closeWindow').onclick = function () {
    wx.closeWindow();
  };
 //8. Interface Operating Interface End----------------------------------------------------------------------------------------------------------------------------------------

These js method annotations are well written, and each method corresponds to a button button function

Fifth, complete jsp page code, readers can directly copy and run

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<%@ 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 Original -->
    <title>WeChat jsapi test-V Type knowledge base</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> 
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style type="text/css">
    .desc{
    color: red;
    }
    </style>
  </head>
   
  <body>
  <center><h3>Welcome to Wechat jsapi Test interface-V Type knowledge base</h3></center>
     
     <h3 id="menu-webview">Interface Operating Interface</h3><br>
      <span class="desc"  >Hide the top right menu interface</span><br>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><br>
      <span class="desc">Display the top right menu interface</span><br>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><br>
      <span class="desc">Close the current page window interface</span><br>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button><br>
      <span class="desc">Button Interface for Batch Hiding Function</span><br>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><br>
      <span class="desc">Button Interface for Batch Display Function</span><br>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button><br>
      <span class="desc">Hide all non-basic button interfaces</span><br>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br>
      <span class="desc">Display all function button interfaces</span><br>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br>
      
       
      
     <div style="display: none;"> 
      <p>Base interface to determine whether the current client supports the specified js Interface</p>   
     <input type="button" value="checkJSAPI" id="checkJsApi"><br>
     <span class="desc" style="color: red">Geographical Location Interface-Viewing Location Interface Using Wechat Built-in Map</span><br>
      <button class="btn btn_primary" id="openLocation">openLocation</button><br>
      <span class="desc" style="color: red">Geographical Location Interface-Getting Geographical Location Interface</span><br>
      <button class="btn btn_primary" id="getLocation">getLocation</button><br>
     <span class="desc" style="color: red">Getting Network State Interface</span><br>
      <button class="btn btn_primary" id="getNetworkType">getNetworkType</button><br>
      <h3 id="menu-image">Image interface</h3>
      <span class="desc">Picture or Picture Selection Interface from Mobile Album</span><br>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
      <span class="desc">Preview Picture Interface</span><br>
      <button class="btn btn_primary" id="previewImage">previewImage</button><br>
      <span class="desc">Upload Picture Interface</span><br>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
      <span class="desc">Download Picture Interface</span><br>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
     
  <br>
  display picture<img alt="" src="" id="faceImg">
  </div>
   
   
  <script type="text/javascript">
  wx.config({  
    debug: true, //Open debugging mode, the return values of all APIs invoked will be displayed in alert on the client side. To view the incoming parameters, you can open them on the pc side, and the parameter information will be typed out through the log, and printed only on the pc side.   
    appId: '${appId}', //Mandatory, unique logo of public number
    timestamp: '${ timestamp}' , //Mandatory, time stamp for signature generation
    nonceStr: '${ nonceStr}', //To generate a random string of signatures.
    signature: '${ signature}',//To be completed and signed, see Appendix 1.
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//Network State Interface
                  'openLocation',//Viewing Geographic Location Interface Using Wechat Built-in Map
                  'getLocation', //Getting Geographical Location Interface
                  'hideOptionMenu',//Interface Operating Interface 1
                  'showOptionMenu',//Interface Operating Interface 2
                  'closeWindow' ,  //// Interface Operating Interface 3
                  'hideMenuItems',//// Interface Operating Interface 4
                  'showMenuItems',//// Interface Operating Interface 5
                  'hideAllNonBaseMenuItem',//// Interface Operating Interface 6
                  'showAllNonBaseMenuItem'//// Interface Operating Interface 7
               ] //Mandatory, list of JS interfaces to be used, all JS interfaces listed in Appendix 2
});  
   
wx.ready(function(){  
    //5. Picture interface
  //5.1 Photography, Local Mapping
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('Have chosen ' + res.localIds.length + ' Zhang picture');
         $("#faceImg").attr("src ", res.localIds[0]); // Display the picture to the page
      }
    });
  };
 
  //5.2 Picture Preview
  document.querySelector('#previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
      urls: [
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
      ]
    });
  };
 
  //5.3 Upload pictures
  document.querySelector('#uploadImage').onclick = function () {
    if (images.localId.length == 0) {
      alert('Please use first. chooseImage Interface Selection Picture');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert('uploaded:'+i+i'/'+length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };
 
  //5.4 Download pictures
  document.querySelector('#downloadImage').onclick = function () {
    if (images.serverId.length === 0) {
      alert('Please use first. uploadImage Upload pictures');
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert('Has been downloaded:' + i + '/' + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };
   
  //6. Equipment Information Interface
  //6.1 Get the current network status
  document.querySelector('#getNetworkType').onclick = function () {
    wx.getNetworkType({
      success: function (res) {
        alert(res.networkType);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
  //End of Network Interface
   
  //7. Geographic Location Interface Start
  //7.1 Viewing Geographical Location
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT Creative garden',
      address: 'Xingang Middle Road, Haizhu District, Guangzhou 397 Number',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
 
  //7.2 Acquiring the Current Geographical Location
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('Users Deny Authorization to Acquire Geographical Location');
      }
    });
  };
  //7. Geographical location interface closure
   
  //8. Interface Operating Interface Beginning------------------------------------------------------------------------------------------------------
  //8.1 Hide the top right menu
  document.querySelector('#hideOptionMenu').onclick = function () {
    wx.hideOptionMenu();
  };
 
  //8.2 Display the menu in the upper right corner
  document.querySelector('#showOptionMenu').onclick = function () {
    wx.showOptionMenu();
  };
 
  //8.3 Mass Hidden Menu Items
  document.querySelector('#hideMenuItems').onclick = function () {
    wx.hideMenuItems({
      menuList: [
        'menuItem:readMode', //Reading patterns
        'menuItem:share:timeline', //Share in the circle of friends
        'menuItem:copyUrl' //Copy links
      ],
      success: function (res) {
        alert('Hidden "Reading Mode", "Share to Friends Circle", "Copy Links" and other buttons');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  //8.4 Batch display menu items
  document.querySelector('#showMenuItems').onclick = function () {
    wx.showMenuItems({
      menuList: [
        'menuItem:readMode', //Reading patterns
        'menuItem:share:timeline', //Share in the circle of friends
        'menuItem:copyUrl' //Copy links
      ],
      success: function (res) {
        alert('Buttons such as "Read Mode", "Share to Friends Circle", "Copy Link" have been displayed.');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  //8.5 Hide all non-basic menu items
  document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
    wx.hideAllNonBaseMenuItem({
      success: function () {
        alert('All non-basic menu items have been hidden');
      }
    });
  };
 
  //8.6 Display all hidden non-basic menu items
  document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
    wx.showAllNonBaseMenuItem({
      success: function () {
        alert('All non-basic menu items are displayed');
      }
    });
  };
 
  //8.7 Close the current window
  document.querySelector('#closeWindow').onclick = function () {
    wx.closeWindow();
  };
 //8. Interface Operating Interface End----------------------------------------------------------------------------------------------------------------------------------------
   
});  
 //Initialize jsapi interface status
wx.error(function (res) {
  alert("Call WeChat jsapi Status returned:"+res.errMsg);
});
   
 </script>
    
  </body>
</html>

There are four parameters in the above jsp code. The four parameters are the credentials for successful invocation of Wechat jsapi, namely appId, timestamp, nonceStr, signature, and how to generate these four parameters. If you don't know the reader, please see the upper left corner of this page. The menu, which has a detailed introduction, is not repeated here.  

Sixth, after the above code runs, the effect is as follows

Open Wechat and enter the interface. The function is red.

Click on the hidden menu in the upper right corner, and the effect is as follows

Click on the menu button in the upper right corner. The effect is as follows. Look carefully. There are also functions like copying links and sharing with friends circles.

Click on the Bulk Hide button and we will find that the circle of friends and copy links in the upper right corner are no longer available. The effect is as follows.

This article is original, address. http://www.vxzsk.com/119.html  Reprinted please indicate the source! Thank you!


Posted by dsaba on Wed, 03 Apr 2019 10:36:37 -0700

Hot Keywords

©2024 Programmer Group