微信小店开发之跳转微信商品页接口(9)

最新推荐文章于 2021-06-21 16:52:50 发布
最新推荐文章于 2021-06-21 16:52:50 发布
阅读量2.8k 收藏
点赞数
分类专栏： 微信公众平台jsapi接口开发教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linfanhehe/article/details/60866094
版权

文章来源 http://www.vxzsk.com/124.html

微信小店接口必须经过微信认证的服务号才可以有权限调用，订阅号无权限。

微信小店

跳转微信商品页接口

1
2
3
4
wx.openProductSpecificView({
     productId:  '' ,  // 商品id
     viewType:  ''  // 0.默认值，普通商品详情页1.扫一扫商品详情页2.小店商品详情页
});

第一、新建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>

jweixin-1.1.0.js是调用微信jsapi的库，所以必须引入，第二行是本案例使用了jquery，所以引入的是jquery库
第二、引入界面样式，由于几节界面案例样式太难看，所以这次案例美化了一下界面。

1
<link rel= "stylesheet"  href= "http://203.195.235.76/jssdk/css/style.css" />

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

1
2
3
4
5
6
< center >< h3 >欢迎来到微信jsapi测试界面-V型知识库</ h3 ></ center >
     < div  class = "lbox_close wxapi_form" >
      < h3  id = "menu-shopping" >微信小店接口</ h3 >
       < span  class = "desc" >跳转微信商品页接口</ span >
       < button  class = "btn btn_primary"  id = "openProductSpecificView" >openProductSpecificView</ button >
      </ div >

第四、<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
24
25
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
                   'scanQRCode' , // 微信扫一扫接口
                   'openProductSpecificView' //微信小店
                ]  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

jsApiList数组中，最后一项就是我们调用微信小店接口的函数，此函数必须在jsapi库中初始化，否则微信小店跳转微信商品页功能无法调起。

第六、完整的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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<%@ 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" >
     < link  rel = "stylesheet"  href = "http://203.195.235.76/jssdk/css/style.css" />
    < 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 >
     < div  class = "lbox_close wxapi_form" >
      < h3  id = "menu-shopping" >微信小店接口</ h3 >
       < span  class = "desc" >跳转微信商品页接口</ span >
       < button  class = "btn btn_primary"  id = "openProductSpecificView" >openProductSpecificView</ button >
      </ div >
       
      
      < div  style = "display: none;" >
      < h3  id = "menu-scan" >微信扫一扫</ h3 >
       < span  class = "desc" >调起微信扫一扫接口</ span >
       < button  class = "btn btn_primary"  id = "scanQRCode0" >scanQRCode(微信处理结果)</ button >
       < button  class = "btn btn_primary"  id = "scanQRCode1" >scanQRCode(直接返回结果)</ button >
       
      < 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 >
       < 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
                   'scanQRCode',// 微信扫一扫接口
                   'openProductSpecificView'//微信小店
                ] // 必填，需要使用的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 界面操作接口  结束------------------------------------------
  
  // 9 微信原生接口 开始---------------------
   // 9.1.1 扫描二维码并返回结果
   document.querySelector('#scanQRCode0').onclick = function () {
     wx.scanQRCode();
   };
   // 9.1.2 扫描二维码并返回结果
   document.querySelector('#scanQRCode1').onclick = function () {
     wx.scanQRCode({
       needResult: 1,
       desc: 'scanQRCode desc',
       success: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
  // 9 微信原生接口 结束---------------------
  // 11.3  跳转微信商品页 开始--------------
   document.querySelector('#openProductSpecificView').onclick = function () {
     wx.openProductSpecificView({
       productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
       extInfo: '123'
     });
   };
    // 11.3  跳转微信商品页 结束--------------
});  
  //初始化jsapi接口 状态
wx.error(function (res) {
   alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
  </ script >
    
   </ body >
</ html >

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

此文章本站原创，地址  http://www.vxzsk.com/124.html   转载请注明出处！谢谢！


木凡007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp H5 JSSDK封装使用
a_靖的博客
11-10 5383
先看效果吧， 封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是wx.error ，如果返回 true 就标识执行了ready ， 可以调用JSSDK的 API 了，如下图示例代码： this.$common.Init.call(this); this.wxjssdkInti().then(rr => { console.log('jssdk初始化成功', rr) wx.getLocation({ type: 'wg.
uniapp 微信H5分享 下载就能用
12-15
针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495
微信小程序之页面跳转和参数传递的实现
08-29
主要介绍了微信小程序之页面跳转和参数传递的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
PHP版微信小店接口开发实例
10-21
主要介绍了PHP版微信小店接口开发方法,结合实例形式分析了php实现微信小店接口调用的相关操作技巧,需要的朋友可以参考下
微信WeixinJSBridge API
weixin_33845477的博客
11-04 146
1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;微信WeixinJSBridge API&lt;/title&gt; 5 &lt;meta charset="utf-8" /&gt; 6 &lt;script type="text/
微信小店开发之跳转微信商品页接口(第十一课)
飞龙在天
11-11 3616
微信小店接口必须经过微信认证的服务号才可以有权限调用，订阅号无权限。 微信小店 跳转微信商品页接口 wx.openProductSpecificView({     productId: '', // 商品id     viewType: '' // 0.默认值，普通商品详情页1.扫一扫商品详情页2.小店商品详情页 });
简易解决微信页面重定向,关闭微信浏览器页面,进来不浪费时间。
weixin_30649859的博客
06-27 2145
微信浏览器页面获得用户的code需调用微信的API，并且进行一个重定向的页面跳转。 以下是重定向的JS代码： var wxCode = getQueryString("code"); $(function(){ 　　/*监控用户按返回的方法*/ 　　function pushHistory() {　　　　var state = {　　　　　　title: "title",　　　　　　ur...
【微信公众平台开发】微信JS-SDK开发
爱奇途
01-29 4130
根据微信开发文档步骤如下： 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 JS接口安全域名设置 mi.com（前面不用带www/http,域名必须备案过） 2.引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js 3.通过co
微信分享JS-SDK示例页面
JEECG官方博客
08-10 7059
微信JS SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置一、JS部分wx.ready(function () {  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断  document.querySelector('#checkJsApi').onclick = function () {    wx.checkJ
微信JS SDK Demo
weixin_34096182的博客
03-24 78
微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置 原文：http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 一、JS部分 复制代码 wx.ready(function () { // 1 判断当前版本是否支持指定 JS ...
微信官方jssdk Demo
u011313703的博客
09-01 2086
1.html部分 html> html>head>meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meta charset="utf-8"> title>微信JS-SDK Demotitle> meta name="viewport" content="width=device-width,
微信小店接口
06-10
微信小店接口
Vue仿微信app页面跳转动画效果
01-19
10:14:11独立开发者在开发移动端产品时，为了更高效，通常会使用Web技术来开发移动端项目，可以同时适配Android、iOS、H5，稍加改动还可适配微信小程序。 在使用Vue.js开发移动端页面的时候，默认的组件转场效果过于...
微信小程序 页面跳转传参详解
01-19
微信小程序 页面跳转传参，做微信小程序必定会用的这样的功能，这里就记录下本人学习实现代码资料。 刚接触微信小程序，多里面的语法和属性还不怎么聊解，如有不多的地方希望各位大神多多指教。今天来说下微信小程序...
vue.js 微信支付前端代码
zhoujianjava的博客
08-11 9621
onBridgeReady: function () {       const openId = localStorage.getItem('openId')       payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型，可不填         this.message = rt.
由零开始学习小程序架构
iiicai的专栏
04-08 862
背景，大公司占据入口流量，小程序百花齐放的2019，你如何由零开始学习小程序架构。 大纲： 1、查看亿级小程序学习源码 2、学习小程序常用API 3、构建常用的小程序基础库 4、构建自己的小程序框架 1、查看亿级小程序学习源码： 安装mumu模拟器，或者已经root的旧手机。http://mumu.163.com/ 安装ES文件浏览器，微信。 安装 adb 工具 参考：https://w...
解决触发change事件调用接口时，出现一次点击触发调用了多次接口的问题
天天向上
06-11 1797
具体描述：在不刷新页面的情况下，第一次点击，调用了一次接口；第二次点击，调用了两次接口，依此类推 解决方法：在每次调用change事件之前先解绑，在加事件即可；用unbind() 或 off('change') 解绑 $(that).children('input').unbind(); ...
http:/222.212.79/app/zscd.html,emscripten/src/shell.html at 1.29.12 · emscripten-core/emscripten · G...
热门推荐
weixin_36304957的博客
06-21 21万+
version="1.1"id="Layer_1"x="0px"y="0px"width="296px"height="78px"viewBox="420 120 100 170"enable-background="new 0 0 900 400"xml:space="preserve"inkscape:version="0.48.4 r9939"sodipodi:docname="emscri...
微信公众平台jsapi开发教程(1)获取jsapi_ticket
linfanhehe的专栏
08-29 3万+
微信公众平台jsapi开发教程1 jsapi_ticket的获取
uniapp开发h5页面跳转微信支付功能
最新发布
04-05
要在uniapp开发的H5页面中添加微信支付功能，需要按照以下步骤进行操作： 1. 首先，在微信支付商户平台上注册并获取商户号、AppID和AppSecret等信息。 2. 在uniapp项目中安装并引入微信支付的相关插件，如weixin-pay、wx-pay等。 3. 在需要进行支付的页面中，调用微信支付的API接口，传入商户号、AppID、AppSecret等信息，以及订单号、订单总金额、商品描述等支付相关信息。 4. 调用微信支付的统一下单API接口，生成预支付订单，并返回相关的支付信息，包括预支付ID、随机字符串、签名等。 5. 将返回的支付信息传递给前端页面，使用微信JSAPI调起微信支付页面进行支付操作。 6. 在支付完成后，接收微信支付通知，更新订单状态等相关操作。 需要注意的是，微信支付功能需要在微信客户端中进行操作，因此需要在微信浏览器或微信小程序中打开H5页面才可以正常使用支付功能。同时，为了保障支付安全，需要进行支付信息加密和签名等操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值