微信收货地址共享开发接口讲解



微信收货地址共享开发接口基本使用场景是:

  用户点击按钮----->弹出微信收货地址选择页面---->用户选择收货地址,点击确定后,用户能够获取用户收货地址信息。

1.增加页面按钮标签:

1
<div id= "select-address" >选择收货地址</div>

2.引用相关javascript文件

1
2
<script type= "text/javascript"  src= "js/jquery.min.js" ></script>
<script type= "text/javascript"  src= "http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>

3.通过jssdk的config接口注入权限验证配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.config({
     debug: true,
     appId: configData[ "appId" ],
     timestamp: configData[ "timestamp" ],
     nonceStr: configData[ "nonceStr" ],
     signature: configData[ "signature" ],
     jsApiList: [
     'checkJsApi' ,
     'editAddress' ,
     'chooseWXPay' ,
     'getLatestAddress' ,
     'openCard' ,
     'getLocation'
     ]
});

其中configData通过如下方法获取:

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
var  currentURL = location.href.split( '#' )[0];
var  configData;
var  ajaxData={
     url: 'getJsConfig.php' ,
     type: 'post' ,
     data:{
         currentURL:currentURL
     },
     datatype: 'json' ,
     async:false,
     success: function (data)
     {
         if (data==null)
             alert( 'null' );
         else
         {  
             configData = data;
         }
     },
     error: function ()
     {
       alert( 'error' );
     }
}
$.ajax(ajaxData); //获取configData

这里ajax获取configData的方法为getJsConfig,具体的签名算法可参看微信开发者文档,这里不再赘述。

注意:请确保微信公众号设置里面已经绑定了JS接口安全域名,最终应该在debug为true的模式下提示success。 

4.编写按钮点击事件

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
//获取用户收货地址接口
$( '#select-address' ).click( function (){
     var  currentURL = location.href.split( '#' )[0];
     var  ajaxData={
         url: 'addressProcess.php' ,
         type: 'post' ,
         data:{
             currentURL:currentURL
         },
         datatype: 'json' ,
         async:false,
         success: function (data){
             WeixinJSBridge.invoke(
                 'editAddress' ,
                 {
                     appId:data[ 'appId' ],
                     scope: 'jsapi_address' ,
                     signType: 'sha1' ,
                     addrSign:data[ 'addrSign' ],
                     timeStamp:data[ 'timeStamp' ],
                     nonceStr:data[ 'nonceStr' ]
                 },
                 function  (res) {
                     // res存有地址信息
                     for ( var  key in res){
                         alert(key+ ":" +res[key]);
                     }
                 }
             );
         }
     };
     $.ajax(ajaxData);
});

通过addressProcess获取configData,以供WeixinJSBridge.invoke使用,最终res参数中含有地址信息,可以应用于页面逻辑;另外,addressProcess方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$appId  = getAppID( 'APPID' );
$nonceStr =createNoncestr(12);
$timeStamp  = time();
$timeStamp = "$timeStamp" ; //时间戳必须是字符串
// 计算addrSign:包括appid,url,timestamp,noncestr,网页accesstoken
$url  $_POST [ 'currentURL' ];
$accessToken  = getAccessToken( 'accessToken' );
$string  "accesstoken=$accessToken&appid=$appId&noncestr=$nonceStr&timestamp=$timeStamp&url=$url" ;
$addrSign  = sha1( $string );
$signPackage  array (
   "appId"      => getAppID( 'APPID' ),
   "nonceStr"   =>  $nonceStr ,
   "timeStamp"  =>  $timeStamp ,
   "addrSign"  =>  $addrSign
);
$this ->ajaxReturn( $signPackage , $type = 'json' );

几点注意的:

(1)addressProcess中$timeStamp注意是字符串,所以应该进行转换。

1
$timeStamp = "$timeStamp" ; //时间戳必须是字符串

(2)进行sha1的字符串中,注意参数timestamp中s为小写

(3)官方文档提供的实例中sha1最后的结果是错误的,不要受到影响

(4)这里的accessToken是用网页授权接口获取的,获取accessToken的scope是snsapi_base(和前端网页JavaScript API传入的scope不同)。

(5)官方文档说:“因为使用了网页授权接口,url是经过微信回调后打开的,所以参与签名使用的url必须带上微信服务器返回的code和state参数。),实际测试过程中,code和state参数并不是必须的。  

最后,实际开发中,建议参考下面收货地址文档,并结合这篇博客代码进行查找错误即可。

备注:微信官方的有关收货地址的文档地址:

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_8

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4


创意共享3.0许可证


微信收货地址共享开发接口基本使用场景是:

  用户点击按钮----->弹出微信收货地址选择页面---->用户选择收货地址,点击确定后,用户能够获取用户收货地址信息。

1.增加页面按钮标签:

1
<div id= "select-address" >选择收货地址</div>

2.引用相关javascript文件

1
2
<script type= "text/javascript"  src= "js/jquery.min.js" ></script>
<script type= "text/javascript"  src= "http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>

3.通过jssdk的config接口注入权限验证配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.config({
     debug: true,
     appId: configData[ "appId" ],
     timestamp: configData[ "timestamp" ],
     nonceStr: configData[ "nonceStr" ],
     signature: configData[ "signature" ],
     jsApiList: [
     'checkJsApi' ,
     'editAddress' ,
     'chooseWXPay' ,
     'getLatestAddress' ,
     'openCard' ,
     'getLocation'
     ]
});

其中configData通过如下方法获取:

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
var  currentURL = location.href.split( '#' )[0];
var  configData;
var  ajaxData={
     url: 'getJsConfig.php' ,
     type: 'post' ,
     data:{
         currentURL:currentURL
     },
     datatype: 'json' ,
     async:false,
     success: function (data)
     {
         if (data==null)
             alert( 'null' );
         else
         {  
             configData = data;
         }
     },
     error: function ()
     {
       alert( 'error' );
     }
}
$.ajax(ajaxData); //获取configData

这里ajax获取configData的方法为getJsConfig,具体的签名算法可参看微信开发者文档,这里不再赘述。

注意:请确保微信公众号设置里面已经绑定了JS接口安全域名,最终应该在debug为true的模式下提示success。 

4.编写按钮点击事件

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
//获取用户收货地址接口
$( '#select-address' ).click( function (){
     var  currentURL = location.href.split( '#' )[0];
     var  ajaxData={
         url: 'addressProcess.php' ,
         type: 'post' ,
         data:{
             currentURL:currentURL
         },
         datatype: 'json' ,
         async:false,
         success: function (data){
             WeixinJSBridge.invoke(
                 'editAddress' ,
                 {
                     appId:data[ 'appId' ],
                     scope: 'jsapi_address' ,
                     signType: 'sha1' ,
                     addrSign:data[ 'addrSign' ],
                     timeStamp:data[ 'timeStamp' ],
                     nonceStr:data[ 'nonceStr' ]
                 },
                 function  (res) {
                     // res存有地址信息
                     for ( var  key in res){
                         alert(key+ ":" +res[key]);
                     }
                 }
             );
         }
     };
     $.ajax(ajaxData);
});

通过addressProcess获取configData,以供WeixinJSBridge.invoke使用,最终res参数中含有地址信息,可以应用于页面逻辑;另外,addressProcess方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$appId  = getAppID( 'APPID' );
$nonceStr =createNoncestr(12);
$timeStamp  = time();
$timeStamp = "$timeStamp" ; //时间戳必须是字符串
// 计算addrSign:包括appid,url,timestamp,noncestr,网页accesstoken
$url  $_POST [ 'currentURL' ];
$accessToken  = getAccessToken( 'accessToken' );
$string  "accesstoken=$accessToken&appid=$appId&noncestr=$nonceStr&timestamp=$timeStamp&url=$url" ;
$addrSign  = sha1( $string );
$signPackage  array (
   "appId"      => getAppID( 'APPID' ),
   "nonceStr"   =>  $nonceStr ,
   "timeStamp"  =>  $timeStamp ,
   "addrSign"  =>  $addrSign
);
$this ->ajaxReturn( $signPackage , $type = 'json' );

几点注意的:

(1)addressProcess中$timeStamp注意是字符串,所以应该进行转换。

1
$timeStamp = "$timeStamp" ; //时间戳必须是字符串

(2)进行sha1的字符串中,注意参数timestamp中s为小写

(3)官方文档提供的实例中sha1最后的结果是错误的,不要受到影响

(4)这里的accessToken是用网页授权接口获取的,获取accessToken的scope是snsapi_base(和前端网页JavaScript API传入的scope不同)。

(5)官方文档说:“因为使用了网页授权接口,url是经过微信回调后打开的,所以参与签名使用的url必须带上微信服务器返回的code和state参数。),实际测试过程中,code和state参数并不是必须的。  

最后,实际开发中,建议参考下面收货地址文档,并结合这篇博客代码进行查找错误即可。

备注:微信官方的有关收货地址的文档地址:

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_8

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4


创意共享3.0许可证


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值