微信公众平台显示隐藏网页右上角菜单(第九课)

最新推荐文章于 2023-04-18 16:06:55 发布
最新推荐文章于 2023-04-18 16:06:55 发布
阅读量2.9k 收藏 2
点赞数

微信官方jsapi提供了界面操作接口，用来控制微信网页右上角的菜单，下面看看微信官方文档关于界面操作接口的说明。

隐藏右上角菜单接口

wx.hideOptionMenu();

显示右上角菜单接口

wx.showOptionMenu();

关闭当前网页窗口接口

wx.closeWindow();

批量隐藏功能按钮接口

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

批量显示功能按钮接口

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

隐藏所有非基础按钮接口

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

显示所有功能按钮接口

wx.showAllNonBaseMenuItem();

实现代码步骤

第一、jsp界面引入js库

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>

第二、<body></body>之间的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< 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 >

第三、<script></script>之间初始化微信jsapi库添加

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 ,  // 开启调试模式,调用的所有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  
});

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

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 界面操作接口 开始----------
   // 8.1 隐藏右上角菜单
   document.querySelector( '#hideOptionMenu' ).onclick =  function  () {
     wx.hideOptionMenu();
   };
 
   // 8.2 显示右上角菜单
   document.querySelector( '#showOptionMenu' ).onclick =  function  () {
     wx.showOptionMenu();
   };
 
   // 8.3 批量隐藏菜单项
   document.querySelector( '#hideMenuItems' ).onclick =  function  () {
     wx.hideMenuItems({
       menuList: [
         'menuItem:readMode' ,  // 阅读模式
         'menuItem:share:timeline' ,  // 分享到朋友圈
         'menuItem:copyUrl'  // 复制链接
       ],
       success:  function  (res) {
         alert( '已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮' );
       },
       fail:  function  (res) {
         alert(JSON.stringify(res));
       }
     });
   };
 
   // 8.4 批量显示菜单项
   document.querySelector( '#showMenuItems' ).onclick =  function  () {
     wx.showMenuItems({
       menuList: [
         'menuItem:readMode' ,  // 阅读模式
         'menuItem:share:timeline' ,  // 分享到朋友圈
         'menuItem:copyUrl'  // 复制链接
       ],
       success:  function  (res) {
         alert( '已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮' );
       },
       fail:  function  (res) {
         alert(JSON.stringify(res));
       }
     });
   };
 
   // 8.5 隐藏所有非基本菜单项
   document.querySelector( '#hideAllNonBaseMenuItem' ).onclick =  function  () {
     wx.hideAllNonBaseMenuItem({
       success:  function  () {
         alert( '已隐藏所有非基本菜单项' );
       }
     });
   };
 
   // 8.6 显示所有被隐藏的非基本菜单项
   document.querySelector( '#showAllNonBaseMenuItem' ).onclick =  function  () {
     wx.showAllNonBaseMenuItem({
       success:  function  () {
         alert( '已显示所有非基本菜单项' );
       }
     });
   };
 
   // 8.7 关闭当前窗口
   document.querySelector( '#closeWindow' ).onclick =  function  () {
     wx.closeWindow();
   };
  // 8 界面操作接口  结束------------------------------------------

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

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

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原创 -->
     < 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 > 
    < 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 >欢迎来到微信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 >
      
       
      
      < div  style = "display: none;" > 
       < p >基础接口之判断当前客户端是否支持指定的js接口</ p >   
      < input  type = "button"  value = "checkJSAPI"  id = "checkJsApi" >< br >
      < span  class = "desc"  style = "color: red" >地理位置接口-使用微信内置地图查看位置接口</ span >< br >
       < button  class = "btn btn_primary"  id = "openLocation" >openLocation</ button >< br >
       < span  class = "desc"  style = "color: red" >地理位置接口-获取地理位置接口</ span >< br >
       < button  class = "btn btn_primary"  id = "getLocation" >getLocation</ button >< br >
      < span  class = "desc"  style = "color: red" >获取网络状态接口</ span >< br >
       < button  class = "btn btn_primary"  id = "getNetworkType" >getNetworkType</ button >< br >
       < h3  id = "menu-image" >图像接口</ h3 >
       < span  class = "desc" >拍照或从手机相册中选图接口</ span >< br >
       < button  class = "btn btn_primary"  id = "chooseImage" >chooseImage</ button >< br >
       < span  class = "desc" >预览图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "previewImage" >previewImage</ button >< br >
       < span  class = "desc" >上传图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "uploadImage" >uploadImage</ button >< br >
       < span  class = "desc" >下载图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "downloadImage" >downloadImage</ button >< br >
     
   < br >
   显示图片< img  alt = ""  src = ""  id = "faceImg" >
   </ div >
   
   
   < script  type = "text/javascript" >
   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  
});  
   
wx.ready(function(){  
     // 5 图片接口
   // 5.1 拍照、本地选图
   var images = {
     localId: [],
     serverId: []
   };
   document.querySelector('#chooseImage').onclick = function () {
     wx.chooseImage({
       success: function (res) {
         images.localId = res.localIds;
         alert('已选择 ' + res.localIds.length + ' 张图片');
          $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
       }
     });
   };
 
   // 5.2 图片预览
   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 上传图片
   document.querySelector('#uploadImage').onclick = function () {
     if (images.localId.length == 0) {
       alert('请先使用 chooseImage 接口选择图片');
       return;
     }
     var i = 0, length = images.localId.length;
     images.serverId = [];
     function upload() {
       wx.uploadImage({
         localId: images.localId[i],
         success: function (res) {
           i++;
           //alert('已上传：' + i + '/' + length);
           images.serverId.push(res.serverId);
           if (i < length) {
             upload();
           }
         },
         fail: function (res) {
           alert(JSON.stringify(res));
         }
       });
     }
     upload();
   };
 
   // 5.4 下载图片
   document.querySelector('#downloadImage').onclick = function () {
     if (images.serverId.length === 0) {
       alert('请先使用 uploadImage 上传图片');
       return;
     }
     var i = 0, length = images.serverId.length;
     images.localId = [];
     function download() {
       wx.downloadImage({
         serverId: images.serverId[i],
         success: function (res) {
           i++;
           alert('已下载：' + i + '/' + length);
           images.localId.push(res.localId);
           if (i < length) {
             download();
           }
         }
       });
     }
     download();
   };
   
   // 6 设备信息接口
   // 6.1 获取当前网络状态
   document.querySelector('#getNetworkType').onclick = function () {
     wx.getNetworkType({
       success: function (res) {
         alert(res.networkType);
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   //网络接口结束
   
   // 7 地理位置接口 开始
   // 7.1 查看地理位置
   document.querySelector('#openLocation').onclick = function () {
     wx.openLocation({
       latitude: 23.099994,
       longitude: 113.324520,
       name: 'TIT 创意园',
       address: '广州市海珠区新港中路 397 号',
       scale: 14,
       infoUrl: 'http://weixin.qq.com'
     });
   };
 
   // 7.2 获取当前地理位置
   document.querySelector('#getLocation').onclick = function () {
     wx.getLocation({
       success: function (res) {
         alert(JSON.stringify(res));
       },
       cancel: function (res) {
         alert('用户拒绝授权获取地理位置');
       }
     });
   };
   // 7 地理位置接口 结束 
   
   // 8 界面操作接口 开始----------
   // 8.1 隐藏右上角菜单
   document.querySelector('#hideOptionMenu').onclick = function () {
     wx.hideOptionMenu();
   };
 
   // 8.2 显示右上角菜单
   document.querySelector('#showOptionMenu').onclick = function () {
     wx.showOptionMenu();
   };
 
   // 8.3 批量隐藏菜单项
   document.querySelector('#hideMenuItems').onclick = function () {
     wx.hideMenuItems({
       menuList: [
         'menuItem:readMode', // 阅读模式
         'menuItem:share:timeline', // 分享到朋友圈
         'menuItem:copyUrl' // 复制链接
       ],
       success: function (res) {
         alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
 
   // 8.4 批量显示菜单项
   document.querySelector('#showMenuItems').onclick = function () {
     wx.showMenuItems({
       menuList: [
         'menuItem:readMode', // 阅读模式
         'menuItem:share:timeline', // 分享到朋友圈
         'menuItem:copyUrl' // 复制链接
       ],
       success: function (res) {
         alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
 
   // 8.5 隐藏所有非基本菜单项
   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
     wx.hideAllNonBaseMenuItem({
       success: function () {
         alert('已隐藏所有非基本菜单项');
       }
     });
   };
 
   // 8.6 显示所有被隐藏的非基本菜单项
   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
     wx.showAllNonBaseMenuItem({
       success: function () {
         alert('已显示所有非基本菜单项');
       }
     });
   };
 
   // 8.7 关闭当前窗口
   document.querySelector('#closeWindow').onclick = function () {
     wx.closeWindow();
   };
  // 8 界面操作接口  结束------------------------------------------
   
});  
  //初始化jsapi接口 状态
wx.error(function (res) {
   alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
  </ script >
    
   </ body >
</ html >

上述jsp代码中有四个参数，这四个参数是成功调用微信jsapi的凭证，分别为appId(必填，公众号的唯一标识),timestamp(必填，生成签名的时间戳), nonceStr(必填，生成签名的随机串) ,signature(必填，签名)，关于如何生成这四个参数，如果不知道的读者，请查看本页面左上角的菜单，里面有详细介绍，在这里不在累述。 

第六、上述代码运行后，效果如下

打开微信进入界面，功能已表示为红色

点击隐藏右上角菜单，效果如下

点击显示右上角菜单按钮，效果如下，仔细看 此时还有复制链接，分享到朋友圈等功能

点击批量隐藏功能按钮，我们会发现，右上角的分享到朋友圈、复制链接已经没有了，效果图如下

此文章本站原创，地址  http://www.vxzsk.com/119.html   转载请注明出处！谢谢！
一顆苹果
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信公众平台与小程序开发 从零搭建整套系统.part1
12-03
注：由于该资源较大，故分为两个部分上传，资源共10积分，两个压缩包平均5积分。需要两部分同时下载，同时解压才能获得完整资源。（该部分为part1,part2也已上传至我的资源，可在我主页内下载） 本资源是《微信公众平台与小程序开发 从零搭建套系统》高清PDF扫描版。该书由张剑明著，中国工信出版集团和人民邮电出版社联合出版，有需要的小伙伴可以下载学习参考。 本书目录如下： 第1章　微信生态 1.1　微信：是一个生活方式　1 1.2　微信公众平台　6 1.2.1　公众平台简介　6 1.2.2　服务号和订阅号　7 1.3　企业号　8 1.4　小程序　8 1.5　微信开放平台　9 1.6　微信支付　10 1.7　表情开放平台　12 1.8　微信广告　12 1.9　小结　13 第2章　开发环境及技术介绍 2.1　集成软件包介绍　14 2.2　XAMPP的安装与配置　15 2.3　PhpStorm的安装及配置　20 2.4　相关技术介绍　23 2.4.1　HTTP　23 2.4.2　HTML5　25 2.5　小结　26 第3章　开发前的准备 3.1　开发概述　27 3.1.1　OpenID　27 3.1.2　公众号使用场景　28 3.2　公众号消息会话流程　30 3.3　接入指南　31 3.4　接口权限及调用频率　33 3.5　微信网页开发样式库　35 3.6　小结　37 第4章　常用调试方法及工具 4.1　微信测试号　38 4.2　接口在线调试　41 4.3　微信Web开发者工具　42 4.3.1　微信网页授权调试　43 4.3.2　JS-SDK权限校验　45 4.3.3　网页远程调试　45 4.4　前端调试工具　46 4.4.1　谷歌浏览器开发者工具　48 4.5　移动端抓包与调试　50 4.5.1　Charles抓包工具　55 4.6　小结　56 第5章　基于CodeIgniter的微信公众平台开发框架 5.1　CodeIgniter简介　57 5.2　工程代码改造　59 5.3　微信公众号开发配置　60 5.4　小结　63 第6章　微信网页开发 6.1　微信网页授权原理　64 6.1.1　网页授权注意事项　65 6.1.2　网页授权流程　66 6.2　微信网页授权实例　67 6.3　微信网页多域名授权　74 6.3.1　原理分析　74 6.3.2　代码实现　76 6.4　微信JS-SDK　78 6.4.1　接入准备　79 6.4.2　JS-SDK接口实例　80 6.5　小结　85 第7章　微信支付 7.1　微信支付接入方式　86 7.2　微信支付准备工作　88 7.3　微信支付实践　89 7.3.1　示例代码解析　90 7.3.2　支付示例　91 7.3.3　支付结果通知　96 7.4　聚合支付　99 7.4.1　聚合支付接入示例　101 7.5　小结　105 第8章　微信登录 8.1　微信开放平台　107 8.1.1　UnionID机制　108 8.2　微信自动登录　109 8.2.1　数据结构设计　110 8.2.2　代码实现　112 8.2.3　使用UnionID登录　117 8.2.4　如何应用到现有站点　118 8.3　小结　120 第9章　微信小程序 9.1　小程序简介　121 9.2　开发环境及框架　122 9.2.1　开发配置　125 9.2.2　HTTPS配置　126 9.3.1　iOS/Android开发者　129 9.3　如何着手开发小程序　129 9.4　页面生命周期　130 9.3.2　前端开发者　130 9.3.3　后端开发者　130 9.5　小程序组件和API　134 9.6　小程序登录　134 9.7　小程序微信支付　140 9.8　小结　145 第10章　案例：第一个echo server程序 10.1　接入开发者模式　146 10.2　消息响应　147 10.2.1　公众号会话保存Session　153 10.3　自定义菜单　154 10.4　小结　157 第11章　案例：微信随手记 11.1　需求描述　159 11.2　数据库设计　159 11.3　代码实现　161 11.3.1　添加主题　161 11.3.3　主题查看　163 11.3.4　图片下载　166 11.3.5　图片预览　169 11.3.6　聊天机器人　170 11.3.7　入口函数　174 11.4　运行效果　175 11.5　小结　177
微信公众平台与小程序开发 从零搭建整套系统
04-27
目录： 第1章　微信生态 1．1　微信：是一个生活方式　1 1．2　微信公众平台　6 1．2．1　公众平台简介　6 1．2．2　服务号和订阅号　7 1．3　企业号　8 1．4　小程序　8 1．5　微信开放平台　9 1．6　微信支付　10 1．7　表情开放平台　12 1．8　微信广告　12 1．9　小结　13 第2章　开发环境及技术介绍 2．1　集成软件包介绍　14 2．2　XAMPP的安装与配置　15 2．3　PhpStorm的安装及配置　20 2．4　相关技术介绍　23 2．4．1　HTTP　23 2．4．2　HTML5　25 2．5　小结　26 第3章　开发前的准备 3．1　开发概述　27 3．1．1　OpenID　27 3．1．2　公众号使用场景　28 3．2　公众号消息会话流程　30 3．3　接入指南　31 3．4　接口权限及调用频率　33 3．5　微信网页开发样式库　35 3．6　小结　37 第4章　常用调试方法及工具 4．1　微信测试号　38 4．2　接口在线调试　41 4．3　微信Web开发者工具　42 4．3．1　微信网页授权调试　43 4．3．2　JS-SDK权限校验　45 4．3．3　网页远程调试　45 4．4　前端调试工具　46 4．4．1　谷歌浏览器开发者工具　48 4．5　移动端抓包与调试　50 4．5．1　Charles抓包工具　55 4．6　小结　56 第5章　基于CodeIgniter的微信公众平台开发框架 5．1　CodeIgniter简介　57 5．2　工程代码改造　59 5．3　微信公众号开发配置　60 5．4　小结　63 第6章　微信网页开发 6．1　微信网页授权原理　64 6．1．1　网页授权注意事项　65 6．1．2　网页授权流程　66 6．2　微信网页授权实例　67 6．3　微信网页多域名授权　74 6．3．1　原理分析　74 6．3．2　代码实现　76 6．4　微信JS-SDK　78 6．4．1　接入准备　79 6．4．2　JS-SDK接口实例　80 6．5　小结　85 第7章　微信支付 7．1　微信支付接入方式　86 7．2　微信支付准备工作　88 7．3　微信支付实践　89 7．3．1　示例代码解析　90 7．3．2　支付示例　91 7．3．3　支付结果通知　96 7．4　聚合支付　99 7．4．1　聚合支付接入示例　101 7．5　小结　105 第8章　微信登录 8．1　微信开放平台　107 8．1．1　UnionID机制　108 8．2　微信自动登录　109 8．2．1　数据结构设计　110 8．2．2　代码实现　112 8．2．3　使用UnionID登录　117 8．2．4　如何应用到现有站点　118 8．3　小结　120 第9章　微信小程序 9．1　小程序简介　121 9．2　开发环境及框架　122 9．2．1　开发配置　125 9．2．2　HTTPS配置　126 9．3．1　iOS/Android开发者　129 9．3　如何着手开发小程序　129 9．4　页面生命周期　130 9．3．2　前端开发者　130 9．3．3　后端开发者　130 9．5　小程序组件和API　134 9．6　小程序登录　134 9．7　小程序微信支付　140 9．8　小结　145 第10章　案例：第一个echo server程序 10．1　接入开发者模式　146 10．2　消息响应　147 10．2．1　公众号会话保存Session　153 10．3　自定义菜单　154 10．4　小结　157 第11章　案例：微信随手记 11．1　需求描述　159 11．2　数据库设计　159 11．3　代码实现　161 11．3．1　添加主题　161 11．3．3　主题查看　163 11．3．4　图片下载　166 11．3．5　图片预览　169 11．3．6　聊天机器人　170 11．3．7　入口函数　174 11．4　运行效果　175 11．5　小结　177
html 5效果不显示,详解如何解决H5开发使用wx.hideMenuItems无效果不生效
weixin_42500642的博客
06-03 513
情况：引入SDK 的签名不报错与调试工具生成的结果也是一模一样，但是使用hideMenuItems没有小效果，不会报错。解决方式：把要执行的wx.hideMenuItems()放到wx.ready这里面就有生效了wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在p...
微信分享实现只显示分享给朋友或特定按钮
凌晨不睡觉
04-18 456
微信右上角打开的菜单很多在文档中并没有详细的展示，想要挨个屏蔽不太现实，所以只能反向操作，先借助隐藏所有非基础按钮接口这个功能API来屏蔽所有的功能按钮，再借助。微信最新的分享策略会导致通过链接进入网页的只能分享出来链接而不是之前的分享卡片。微信内要是分享过多被恶意举报为诱导分享的话公众号或域名被封的概率会很大，解封也很麻烦，所以我们需要及尽量的优化分享减少不必要的跟有风险的分享项，非必要项的例如：分享到腾讯微博，分享到朋友圈；风险项的例如：分享到QQ，分享到企业微信等可能还会让域名在这二者内被封禁；
苹果IOS隐藏复制链接等按钮失效及报错the permission value is offline verifying解决办法
czhsun的博客
03-22 4576
苹果IOS隐藏复制链接等按钮失效及报错the permission value is offline verifying解决办法
微信公众号右上角菜单
weixin_34062469的博客
09-02 381
普通网址：如http://www.baidu.com 1 $(function(){ 2 /* 3 * htmls 当前页面的http://链接 4 */ 5 6 //请求验证签名 7 $.ajax({ 8 async:false, 9 type: "GE...
微信公众平台jsapi开发教程(8)显示隐藏网页右上角菜单
linfanhehe的专栏
02-23 8955
文章来源 http://www.vxzsk.com/119.html 微信官方jsapi提供了界面操作接口，用来控制微信网页右上角的菜单，下面看看微信官方文档关于界面操作接口的说明。 隐藏右上角菜单接口 wx.hideOptionMenu(); 显示右上角菜单接口 wx.showOptionMenu(); 关闭当前网页窗口接口 wx.closeWindow(); 批量隐藏功
微信公众平台与小程序开发 从零搭建整套系统.part2
12-03
本资源是《微信公众平台与小程序开发 从零搭建套系统》高清PDF扫描版。该书由张剑明著，中国工信出版集团和人民邮电出版社联合出版，有需要的小伙伴可以下载学习参考。 本书目录如下： 第1章　微信生态 1.1　微信：...
微信公众号开发教程 微信公众平台应用开发实践.zip
01-11
微信公众平台应用开发实践教程.zip 1.php+html5+xml 第2章 微信公众平台API 第3章 第一个微信应用 第4章 带自定义菜单的微信应用 第5章 实战案例1 每日十幅图 第6章 实战案例2 人脸识别 第7章 实战案例3 游戏命运...
(html)wx.hideMenuItems 这个方法，隐藏微信功能按钮方法，是否可以用？(设置修改微信分享的菜单)
热门推荐
snow_love_xia的博客
08-22 2万+
今天分享一个简单的问题，现在微信分享盛行，微信分享已经成为了一种很好的宣传销售渠道，自然，产品对于分享的要求也就高了，这两天正好参与这块的开发，分享一下几个小的细节总结吧！ 1.分享文案的传递：对于不同的用户，我们有专门的定制的分享文案 对于文案传递就成了一个问题，因为是不同分享文案的传递，其实就是一个变量，那么这个问题变成了变量的传递，这样是不是就解决了 ...
在微信中隐藏或显示部分菜单
weixin_33998125的博客
03-15 699
2019独角兽企业重金招聘Python工程师标准>>> ...
自定义微信分享
空空的博客
04-09 257
1.根据官方文档微信JS-SDK说明文档 做好准备工作（eg:在公众号绑定域名，请后端同事把所需要的时间戳返回等）2.引入官方js文件&lt;script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"&gt;&lt;/script&gt;3. var gameInfo = { "gtitle": ...
微信sdk 隐藏右上角菜单项
weixin_30429201的博客
06-25 427
wx.ready(function () { // 8.3 批量隐藏菜单项 wx.hideMenuItems({ menuList: [ 'menuItem:share:qq', //分享到QQ 'menuItem:share:weiboApp', // 分享到Weibo 'menuIt...
前18大旋转修整器企业占据全球87%的市场份额.docx
05-06
前18大旋转修整器企业占据全球87%的市场份额
Planet-SkySat-Imagery-Product-Specification-Jan2020.pdf
05-06
SKYSAT IMAGERY PRODUCT SPECIFICATION PLANET.COM VIDEO Full motion videos are collected between 30 and 120 seconds by a single camera from any of the active SkySats. Videos are collected using only the Panchromatic half of the camera, hence all videos are PAN only. Videos are packaged and delivered with a video mpeg-4 file, plus all image frames with accompanying video metadata and a frame index file (reference Product Types below)
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
05-06
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
2019年A~F题特等奖论文合集.pdf
最新发布
05-06
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，历年美赛特等奖O奖论文
雷达物位变送器安装和操作手册
05-06
雷达物位变送器安装和操作手册
微信公众平台开发网页获取用户地理位置
07-14
微信公众平台开发中，可以通过网页授权获取用户地理位置。下面是一些步骤供你参考： 1. 在微信公众平台中创建一个网页应用。 2. 在网页应用设置中配置授权回调域名，确保域名与你的网页应用的服务器域名一致。 3. 在网页中引入微信JS-SDK，并初始化配置。 4. 在用户点击授权按钮时，调用微信JS-SDK提供的接口，请求用户授权获取地理位置。 5. 用户同意授权后，微信会将用户的地理位置信息返回给你的网页应用的回调地址。 6. 在回调地址的服务器端处理地理位置信息，并进行相应的业务逻辑操作。 需要注意的是，获取用户地理位置需要用户的授权，因此在开发过程中要提供明确的说明和获取授权的流程，确保用户的隐私安全。 具体的实现细节可以参考微信公众平台开发文档中关于网页授权和JS-SDK的相关内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值