微信收货地址共享开发接口基本使用场景是:
用户点击按钮----->弹出微信收货地址选择页面---->用户选择收货地址,点击确定后,用户能够获取用户收货地址信息。
1.增加页面按钮标签:
1
|
<div id=
"select-address"
>选择收货地址</div>
|
2.引用相关javascript文件
1
2
|
<script type=
"text/javascript"
src=
"js/jquery.min.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×tamp=$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
微信收货地址共享开发接口基本使用场景是:
用户点击按钮----->弹出微信收货地址选择页面---->用户选择收货地址,点击确定后,用户能够获取用户收货地址信息。
1.增加页面按钮标签:
1
|
<div id=
"select-address"
>选择收货地址</div>
|
2.引用相关javascript文件
1
2
|
<script type=
"text/javascript"
src=
"js/jquery.min.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×tamp=$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