# 「小程序交易保障标展示组件」接入文档

# 一、功能说明

「小程序交易保障标展示组件」开放给已获得交易保障标的商家，可自主引入该组件到小程序商品详情页，传递官方对账号的认可，增强用户交易信心。自定义场景示意详见下图（组件仅为下图中被框的部分，不展示额外信息）。

「小程序交易保障标」是对达到交易健康标准的优质小程序的认证。交易保障标的开通要求参考文档《交易保障标产品说明》，可在「MP 后台-功能-交易保障-交易保障标」页面内申请开通交易保障标。详见下图。

# 二、相关接口

# 1. 引入步骤

1）引入方式：在 app.json 中加上配置

    "plugins": {
      "shoppingGuarantee": {
        "version": "latest",
        "provider": "wxd65104595293601e"
      }
    },

在app.json中，version字段的值需要固定为'latest'，保证功能能够正常运行

2）使用页面，如 test 页面中加上组件配置，如在 test.json

{
  "usingComponents": {
    "guarantee-bar": "plugin://shoppingGuarantee/guarantee-bar"
  }
}

3）在对应的页面 wxml，如 test.wxml

  <guarantee-bar pageType="{{pageType}}" goodsName="{{goodsName}}" goodsImg="{{goodsImg}}" align="{{align}}" spaceSize="{{spaceSize}}" goodsPrice="{{goodsPrice}}" bannerStyle="{{bannerStyle}}"  />

# 特殊说明（第三方服务商开发的小程序）：

如果是第三方服务商代开发模式的话，需要在 ext.json 文件里面额外加上配置，保证功能能正常运行

{"recompile":true}

# 2. 对应配置

属性

类型

默认值

必填

说明

pageType

string

goods_detail

否

页面类型（枚举值），具体如下

合法值	释义
goods_detail	商品详情页类型

goodsName

string

是

商品名称

goodsImg

string

是

商品图片

goodsPrice

string

是

商品价格（具体价格或者价格区间）

align

string

是

cell对齐方式（枚举值）具体如下

合法值	释义
between	两端对齐，不可修改spaceSize，默认该值
left	左对齐，选择左对齐后可以修改左对齐间距spaceSize（需要大于等于12）

spaceSize

string

否

align选择左对齐后的左对齐间距（仅左对齐生效）

bannerStyle

object

是

右侧文案样式对应属性(枚举值，且为string类型),具体值如下

bannerStyle.fontSize的合法值	释义
mini	对应字号是14
normal	对应字号是15
middle	对应字号是16
large	对应字号是17

bannerStyle.fontOpacity合法值	释义
gray	灰色
dark	黑色

示例： test.wxml

     <guarantee-bar pageType="goods_detail" goodsName="{{goodsName}}" goodsImg="{{goodsImg}}" goodsPrice="{{goodsPrice}}" align="{{align}}" spaceSize="{{spaceSize}}" bannerStyle="{{bannerStyle}}"   />

test.js

Page({
  data: {
    align: 'between',
    spaceSize: 12,
    bannerStyle: {
      fontSize: 'normal',
      fontOpacity: 'gray',
    },
    pageType: 'goods_detail',
    goodsName: '微信气泡狗零钱包',
    goodsImg: 'https://xxxxx/',
    goodsPrice: '28元'
  },
})

# 「小程序交易保障标展示组件」 接入文档

# 一、功能说明

# 二、相关接口

# 1. 引入步骤

# 特殊说明（第三方服务商开发的小程序）：

# 2. 对应配置

# 「小程序交易保障标展示组件」接入文档