# "Weixin Mini Program Transaction Security Standard Display Component" access document
# I. Function Dxplaination
"The Weixin Mini Program transaction guarantee display component" is open to merchants who have obtained transaction guarantee subjects, and can voluntarily introduce this component to the Mini Program product details page to convey official recognition of the account and enhance user confidence in trading.The custom scene representations are detailed in the diagram below (the components are only the portions of the diagram below that are boxed and do not show additional information).
The "Weixin Mini Program Transaction Assurance Standard" is the certification of high-quality mini-programs that meet transaction health standards.Opening a safeguard subject requires reference to the document
# II. Related interfaces
# 1. Steps to introduce
- Introduction: Add configuration in apagejson
"plugins": {
"shoppingGuarantee": {
"version": "latest",
"provider": "wxd65104595293601e"
}
},
In Apagejson, the value of the version field needs to be fixed to 'latest' to ensure that the function will work properly
- Use a page, such as the test page with component configuration, such as test.json
{
"usingComponents": {
"guarantee-bar": "plugin://shoppingGuarantee/guarantee-bar"
}
}
- In the corresponding page wxml, such as test.wxml
<guarantee-bar pageType="{{pageType}}" goodsName="{{goodsName}}" goodsImg="{{goodsImg}}" align="{{align}}" spaceSize="{{spaceSize}}" goodsPrice="{{goodsPrice}}" bannerStyle="{{bannerStyle}}" />
# Special instructions (developed by a third-party service provider Weixin Mini Program):
If it is a third-party service provider generation development mode, then you need to add additional configuration in the ext.json file to ensure that the function can run normally
{"recompile":true}
# 2. The corresponding configuration
attribute | type | Default values | Required to fill in | Introductions | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
pageType | string | goods_detail | no | Page type (enumeration value), as follows | |||||||||||||||||
| |||||||||||||||||||||
goodsName | string | - | yes | Product Name | |||||||||||||||||
goodsImg | string | - | yes | Image of the product | |||||||||||||||||
goodsPrice | string | - | yes | Product price (specified price or price range) | |||||||||||||||||
align | string | - | yes | The cell alignment (enumeration value) is as follows | |||||||||||||||||
| |||||||||||||||||||||
spaceSize | string | 12 | no | Align Left alignment spacing after selecting left alignment (left alignment only works) | |||||||||||||||||
bannerStyle | object | - | yes | The right copy style corresponds to the property (enumerated value, and is of type string), with the following values | |||||||||||||||||
|
Examples: 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元'
},
})