电商插件

地址组件

我的收藏

选择地址组件，默认展示“选择收货地址”。

用户首次点击“选择收货地址”，弹起地址授权弹窗，用户点击“好的，使用已有地址”，弹起地址列表弹窗，用户选中任一地址自动关闭弹窗；用户点击“暂不，新增地址”，弹起新增地址弹窗，用户通过“新增收货地址”按钮，进入新建地址页面。

使用限制

在使用生服插件中的组件和 API 前，需要对行业插件有一个基本了解，可以参考文档：行业插件介绍，然后按照以下步骤及顺序使用生服插件中的能力：

参考申请行业插件完成插件的申请，注意只有小程序拥有生服类目资质才可见申请入口；

参考使用行业插件进行能力的调用；

行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。

在使用组件时需要在页面 index.json 文件中进行引入

// index.json
{
  "usingComponents": {
      "address-area": "ttd206a4bb4d498b0511://address-area"
  }
}

完成组件的引用后，就可以像自定义组件一样引用address-area

// index.ttml
<address-area
    bind:authorize="addressAuthHandler"
    bind:change="addressChangeHandler"
    bind:cancel="cancelHandler"
    bind:error="addressErrorHandler"
  >
  </address-area>

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
bind:authorize	EventHandle		否	地址授权弹起授权弹窗时触发，开发者可以在此回调完成业务逻辑	2.67.0.0
bind:change	EventHandle		否	用户选择地址时、地址信息发生变化时触发	2.67.0.0
bind:cancel	EventHandle		否	用户取消选择时触发	2.67.0.0
bind:error	EventHandle		否	错误回调，组件发生错误时触发	2.67.0.0

bind:change 事件对象的 detail

•

该对象为 object 类型，包含以下属性：

属性名	类型	说明	最低支持版本
value	object	用户选中的地址数据	2.67.0.0

•

开发者可以通过 event.detail.value 获取到用户选中的地址数据

•

event.detail.value 数据说明

属性名	类型	说明	最低支持版本
addressId	string	地址 id	2.67.0.0
gender	number	性别 •1: 男 •2: 女	2.67.0.0
genderName	string	性别名称 •先生 •女士	2.67.0.0
concatName	string	联系人名字	2.67.0.0
concatPhone	string	联系电话	2.67.0.0
doorNum	string	门牌号	2.67.0.0
locationName	string	地址名称	2.67.0.0
provinceCode	string	省	2.67.0.0
provinceName	string	省名称	2.67.0.0
cityCode	string	市	2.67.0.0
cityName	string	市名称	2.67.0.0
districtCode	string	区	2.67.0.0
districtName	string	区名称	2.67.0.0
lode	string	经度 •坐标系为 `"gcj02"`，base64 编码后	2.67.0.0
lade	string	纬度 •坐标系为 `"gcj02"`，base64 编码后	2.67.0.0

bind:error 事件对象的 detail 说明

•

该对象为 object 类型，包含以下属性：

属性名	类型	说明	最低支持版本
errNo	number	组件内部错误码	2.67.0.0
errMsg	string	组件内部错误信息，如传入属性类型错误等	2.67.0.0

•

errNo 说明如下：

errNo（错误码）	含义
21600	开发者回调 bind:getdefaultaddress 失败
21601	获取地址列表，服务端错误
21600	开发者回调 bind:getdefaultaddress 失败
21601	获取地址列表，服务端错误
21602	Fail to authorize address
21603	querying address
21604	Fail to query address
21605	Fail to change address

代码示例

示意图

<address-area
    bind:authorize="addressAuthHandler"
    bind:change="addressChangeHandler"
    bind:cancel="cancelHandler"
    bind:error="addressErrorHandler"
  >
  </address-area>

addressAuthHandler (event) {
  // 授权弹窗展现时触发，建议开发者可在此进行授权前处理
},
addressChangeHandler () {
    const { value: addressInfo } = event.detail;
},
cancelHandler(event) {
  // 关闭地址弹窗时触发
},
addressErrorHandler(event) {
     const { errNo , errMsg } = event.detail
    // do something
    // errNo（错误码，对应某种具体报错原因）
    // errMsg（报错信息）
},

Bug & Tip

•

开发者可通过tt.canIUse("address-area")判断组件可用性，不可用时建议弹窗提示，文案参考："当前版本暂不支持该功能，请升级抖音客户端"

•

暂不支持 IDE调试，请使用真机调试或预览