获取微信收货地址准备动作：在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。
一、web-view加载H5
<web-view src="https://test.com/data/address.html"></web-view>
2.引入外部JS库
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>获取微信收获地址</title> <!--微信小程序API--> <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!--layUI核心库--> <script type="text/javascript" src="static/layui/layui.js" charset="utf-8"></script> <link href="static/layui/css/layui.css" type="text/css" rel="stylesheet">
3.构建HTML表单
<button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" onclick="getAddInfo();">获取微信地址</button> <div class="layui-fluid" style="margin-top: 20px;"> <form class="layui-form layui-form-pane" lay-filter="component-form-group"> <div class="layui-card"> <div class="layui-card-header" style="text-align: center;font-weight: bold;">地址信息</div> <div class="layui-card-body"> <div class="layui-form-item"> <label for="provinceName" class="layui-form-label">省份<span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="provinceName" name="provinceName" class="layui-input"></div> </div> <div class="layui-form-item"> <label for="cityName" class="layui-form-label">地市<span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="cityName" name="cityName" class="layui-input"></div> </div> <div class="layui-form-item"> <label for="countyName" class="layui-form-label">区县 <span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="countyName" name="countyName" class="layui-input"></div> </div> <div class="layui-form-item"> <label for="detailInfo" class="layui-form-label">地址<span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="detailInfo" name="detailInfo" class="layui-input"></div> </div> <div class="layui-form-item"> <label for="userName" class="layui-form-label">姓名 <span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="userName" name="userName" class="layui-input"></div> </div> <div class="layui-form-item"> <label for="telNumber" class="layui-form-label">电话<span class="x-red">*</span></label> <div class="layui-input-block"><input type="text" id="telNumber" name="telNumber" class="layui-input"></div> </div> </div> </div> </form> </div>
4.判断运行宿主环境
wx.miniProgram.getEnv，API接口，在H5中使用，必须引入jweixin-1.6.0.js
<!-- 判断运行宿主环境--> var wxApp = false; wx.miniProgram.getEnv(function (res) { if (res.miniprogram) { wxApp = true; } else { wxApp = false; } });
5.调用小程序地址
- https://test.com，必须完成域名备案和业务域名验证；
- wx.miniProgram.redirectTo，跳转到微信小程序，并传递相关参数;
//调用小程序地址 function getAddInfo() { if (wxApp) { wx.miniProgram.redirectTo({ url: '/pages/wxaddr/wxaddr?posurl=https://test.com/data/address.html',//跳转回小程序页面,传参 success: function () { console.log('成功跳回小程序') }, fail: function () { console.log('跳转回小程序页面失败'); }, }); } else { console.log('未在小程序宿主环境'); } }
6.js获取url参数
//获取参数; function getQueryVar(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); }
二、小程序核心代码
1.wxaddr.wxml
- userName，是一组从微信收货地址获取到的对象，在url传递过程中，转为字符串。
<web-view src="https://test.com/data/address.html?userName={{address}}"></web-view>
2.wxaddr.js
- address赋值
data: { address: '', },
- 加载调用chooseAddress API接口
onLoad: function (options) { console.log(options) var that = this; if (options.posurl) { that.chooseAddress(options); } else { wx.navigateBack(); } },
3.选择微信地址
address: JSON.stringify(res),赋值格式转换；
//选择微信地址 chooseAddress: function (a) { console.log(a) var that = this; if (wx.chooseAddress) { wx.chooseAddress({ success: function (res) { // console.log(res); that.setData({ address: JSON.stringify(res), //具体收货地址显示 flag: false, }) }, fail: function (err) { console.log(JSON.stringify(err)); console.info("收货地址授权失败"); wx.showModal({ title: "网络超时", content: "刷新重试", showCancel: !1 }); that.setData({ bt: '' }); } }) } else { console.log('当前微信版本不支持调用或网络超时，请手动输入地址或重试'); that.setData({ bt: '' }); } },
@漏刻有时
