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

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

1.增加页面按钮标签:


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



2.引用相关javascript文件


<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接口注入权限验证配置


wx.config({        


                  debug: true,        


                  appId: configData[         "appId"         ],        


                  timestamp: configData[         "timestamp"         ],        


                  nonceStr: configData[         "nonceStr"         ],        


                  signature: configData[         "signature"         ],        


                  jsApiList: [        


                  'checkJsApi'         ,        


                  'editAddress'         ,        


                  'chooseWXPay'         ,        


                  'getLatestAddress'         ,        


                  'openCard'         ,        


                  'getLocation'        


                  ]        


         });


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


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.编写按钮点击事件


//获取用户收货地址接口        


         $(         '#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方法如下:


$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注意是字符串,所以应该进行转换。


$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许可证