小程序
取消
开发
中文
EN
取消
  • 平台能力

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

    # 一、功能说明

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

    「小程序交易保障标」是对达到交易健康标准的优质小程序的认证。交易保障标的开通要求参考文档《交易保障标产品说明》，可在「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 12 否 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元'
  },
})