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

## 一、功能说明

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

  ![](https://res.wx.qq.com/op_res/Xw_fRw0B4PZAFlPBbEaqjRF6yV7cD_GIGL8jynqL8JeJbtnrGEeMJGUa8n5MoXTrJ_pcNJ_H18wvLY2XhMVt8g)

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

![](https://res.wx.qq.com/op_res/oNkjTO77R_iNqpiN54YA7731skTXEHeZJNE12eA2GBbTzFF-ZRhPB2zcNJ6qgIkpngXwbQPY--5rJhSWS7feSg)

## 二、相关接口

### 1. 引入步骤

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

```json
    "plugins": {
      "shoppingGuarantee": {
        "version": "latest",
        "provider": "wxd65104595293601e"
      }
    },
```
在app.json中，version字段的值需要固定为'latest'，保证功能能够正常运行 

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

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

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

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

```

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

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

```json
{"recompile":true}

```

### 2. 对应配置


```json
[
  {
    "属性": "pageType",
    "类型": "string",
    "默认值": "goods_detail",
    "必填": "否",
    "说明": "页面类型（枚举值），具体如下",
    "子项": [
      {
        "合法值": "goods_detail",
        "释义": "商品详情页类型"
      }
    ]
  },
  {
    "属性": "goodsName",
    "类型": "string",
    "默认值": "-",
    "必填": "是",
    "说明": "商品名称"
  },
  {
    "属性": "goodsImg",
    "类型": "string",
    "默认值": "-",
    "必填": "是",
    "说明": "商品图片"
  },
  {
    "属性": "goodsPrice",
    "类型": "string",
    "默认值": "-",
    "必填": "是",
    "说明": "商品价格（具体价格或者价格区间）"
  },
  {
    "属性": "align",
    "类型": "string",
    "默认值": "-",
    "必填": "是",
    "说明": "cell对齐方式（枚举值）具体如下",
    "子项": [
      {
        "合法值": "between",
        "释义": "两端对齐，不可修改spaceSize，默认该值"
      },
      {
        "合法值": "left",
        "释义": "左对齐，选择左对齐后可以修改左对齐间距spaceSize（需要大于等于12）"
      }
    ]
  },
  {
    "属性": "spaceSize",
    "类型": "string",
    "默认值": "12",
    "必填": "否",
    "说明": "align选择左对齐后的左对齐间距（仅左对齐生效）"
  },
  {
    "属性": "bannerStyle",
    "类型": "object",
    "默认值": "-",
    "必填": "是",
    "说明": "右侧文案样式对应属性(枚举值，且为string类型),具体值如下",
    "子项": [
      {
        "bannerStyle.fontSize的合法值": "mini",
        "释义": "对应字号是14"
      },
      {
        "bannerStyle.fontSize的合法值": "normal",
        "释义": "对应字号是15"
      },
      {
        "bannerStyle.fontSize的合法值": "middle",
        "释义": "对应字号是16"
      },
      {
        "bannerStyle.fontSize的合法值": "large",
        "释义": "对应字号是17"
      }
    ]
  }
]
```

示例：
test.wxml

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

test.js

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

```