英特网校

微信公众号开发收货地址共享/获取收货地址

在这篇微信公众平台开发教程中,我们将介绍如何在网页中实现获取收货地址的功能。微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,后续可以免填写支持快速选择,也可增加和编辑。此地址为用户属性,可在各商户的网页中共享使用。支持原生控件填写地址,地址数据会传递到商户。

注意本教程需要在真实域名和真实服务器中测试,并且需要在手机中用微信打开测试此功能!

本文需要先配置微信相关数据:【本教程使用的是微信公众平台接口测试帐号】最终测试效果

GIF12.gif

1.申请微信公众号测试账号

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

点击然后用自己的微信账号扫下登录!登录后获取appid和appsecret

1.png

2.修改JS接口安全域名【修改实际的域名】

2.jpg

3.用手机关注测试号公众号

3.jpg

4、修改网页授权微信用户基本信息【页面授权域名与真实页面一致】

4.png

5.png

5.下载官方demo

http://demo.open.weixin.qq.com/jssdk/sample.zip【demo为4个文件,每个文件都不能删除,需要修改的文件为sample.php文件】

(1)、修改js的地址官方script地址为http://res.wx.qq.com/open/js/jweixin-1.0.0.js,共享地址需要jweixin-1.1.0.js及以上版本才能调用

(2)、修改文档中的配置信息

(3)、添加js脚本,在配置中的jsApiList中添加"openAddress",同时在按钮点击事件中添加wx.openAddress事件!

<script>

  wx.config({

    jsApiList: [

        "openAddress"

    ]

  });

  wx.ready(function () {

    // 在这里调用 API

      $("#getWxAddress").click(function () {

wx.openAddress({

success: function (res) {

 var userName = res.userName; // 收货人姓名

var postalCode = res.postalCode; // 邮编

var provinceName = res.provinceName; // 国标收货地址第一级地址(省)

 var cityName = res.cityName; // 国标收货地址第二级地址(市)

 var countryName = res.countryName; // 国标收货地址第三级地址(国家)

 var detailInfo = res.detailInfo; // 详细收货地址信息

 var nationalCode = res.nationalCode; // 收货地址国家码

   var telNumber = res.telNumber; // 收货人手机号码

   $(".username").text(userName);

   $(".telphone").text(telNumber);

   $(".address").text(provinceName+cityName+countryName);

   $(".addressinfo").text(detailInfo);

   $(".code").text(postalCode);

              }

          });

      })

});

</script>







评论中心

登录后可评论,请 登录 注册