电商服务

商品定制页面

江湖

江湖

江湖

江湖

江湖

江湖

江湖

商品定制组件

具体定制操作手册，请参考 江湖商品定制组件指引

商品转链服务

转链接口

通用接口信息

如需调用开放接口，须向小钼运营人员申请开放接口 appkey 和 secret。

请求地址 生产环境 https://api-cpa.jd.com/open/api
测试环境 https://daas-test.jd.com/sit/cpa/open/api
请求方式 POST

请求参数：

参数名称 中文名称 类型 是否必须 描述
method 接口名 String 是 每个接口不同
app_key 接入方标识 String 是 需要申请
timestamp 时间戳 String 是 格式 yyyy-MM-dd HH:mm:ss
format 格式 String 是 json
sign 签名 String 是 见签名算法描述
version 版本号 String 是 默认 1.0

签名算法描述如下：

1.将请求参数按参数名升序排序；

2.按请求参数名及参数值相互连接组成一个字符串：

<paramName1><paramValue1><paramName2><paramValue2>...；

3.将应用密钥分别添加到以上请求参数串的头部和尾部：<secret><请求参数字符串><secret>；

4.对该字符串进行 MD5（全部大写），MD5 后的字符串即是这些请求参数对应的签名；

签名算法 java 代码示例见【附 1】

具体接口信息

转链接口可对推广链接进行转链，转链后链接可按规则进行计佣和跟单。

通用请求参数：

参数名称 中文名称 类型 是否必须 描述
method 接口名 String 是 link.trans
app_key 接入方标识 String 是 需要申请
timestamp 时间戳 String 是 格式 yyyy-MM-dd HH:mm:ss
format 格式 String 是 json
sign 签名 String 是 见签名算法描述
version 版本号 String 是 1.0

业务请求参数：

参数名称 中文名称 类型 是否必须 描述
data 请求参数 String 是 由下面业务参数转成 json 字符串再进行 url encode 生成
materialId 推广物料链接 String materialId，skuId 二选一必传 最大长度 400
skuId String materialId，skuId 二选一必传 最大长度 100
couponUrl 优惠券领取链接 String 否 在使用优惠券、商品二合一功能时入参，且 materialId 须为商品详情页链接 最大长度 400
sub 渠道自定义字段 String 否 只能由数字和字母组成，长度不超过 20，订单接口原始返回
shortUrl 是否返回短链接 Integer 否 默认不返回短链，1 返回短链 短链接有效期 90 天
taskId 任务 id Integer 否 预留，区分推广类型

响应参数：

参数名称 中文名称 类型 是否必选 描述
code 结果码 Integer 是 200 成功，其他失败
message 信息 String 是 错误信息
result 结果数据 是
clickUrl 推广链接 String 是 长链接
shortUrl 短链接 String 否 入参 shortUrl=1 则返回短链接，否则只有长链接。
linkCode 链接编号 String 是 链接唯一标识

请求示例：

https://api-cpa.jd.com/open/api?method=link.trans&app_key=aaaaa

&data=%7B%22materialId%22%3A1%2C%7D&timestamp=2020-01-15 15:36:48

&format=json&sign=C94BA2AAE0F17DD5023E090DEC63D2B0

&version=1.0

响应示例：

成功

{

"code": 200,

"result": {

"clickUrl": "https://union-click.jd.com/jdc?e=&p=AyIGZRtYEA",

"shortUrl": "https://u.jd.com/a05Pdo",

"linkCode": "G7b9BHhgtx"

},

"message": "OK"

}

失败

{

"code": 400,

"message": "转链失败"

}

C 端页面获取商品列表接口

用途：

**根据推荐编码查询商品/内容/广告/KOL 等数据推荐接口，**推荐编码在江湖系统创建。

网关接口信息

生产环境 URL: https://big.jd.com/openapi/discovery/discoveryRecommend.recommendGetWay.action

入参

字段 类型 备注 是否可为空
header
accessToken String 授权码 否
appId String 三方用户 id 否
Map
recommendId String 推荐编号： 例如：A282016828225380352：接入优惠价数据 否
pin String 京东用户 pin，不传默认未登录 是
ip String ip 是
deviceId String 设备标识，用户真实设备标识 是
source String ios，android，pc，h5 否
sourceMap Map<String,Object> 用户页面信息，自定义信息，根据业务需求来定义 是
key:isEnd 前端传值 isEnd=1，后端终止请求，不返回数据 是
lastId String 上次的 id，透传即可,非第一页必传,否则导致重复数据 是
rid String 请求 id，唯一请求 ID，使用追踪日志 否
pageNO int 页码，默认 1 是
pageSize int 每页条数，默认 10 是

注意事项：

1、入参不传 pin 的时候，根据 deviceId 用户真实设备查询数据；

2、sourceMap 用户页面信息，用于上传用户页面信息，比如：项目信息、埋点信息等不固定的数据；

3、除了固定的老入参，新增入参，都加在 sourceMap 里。

入参示例：

"accessToken":”xx”,

"appId":”xx”,

{
  "pageSize": 10,
  "recommendId": "A282016828225380352",
  "rid": "2019123010000005",
  "source": "h5",
  "sourceMap": {
    "jddx_sc_skuGroupId": "",
    "isJrApp": true
  },
  "pin": "jdpin",
  "lastId": ""
}

出参

字段 类型 备注
Map
resultCode String 判断结果异常原因
resultData List 最终结果
resultMsg String 异常原因的中文描述
success boolean 判断是否处理成功
isEnd int 是否到底 0 有数据 1 无数据或者最后一页
lastId String 最后一条数据 ID
realId String 上一次请求的最后一条数据信息
extMapData Map 扩展数据
resultMapData Map 供应链参数扩展数据
字段 类型 备注
Map
id String 物料 ID（内容／商品／发现好物／众筹项目）
type String 101
subtype String 101001
clstags String 埋点
strategyType String cpc/dd/my/jd/fk/zt
templateType String //1:默认普通模式；2：拼购 3:秒杀；4:购物返利
itemDetail Object 物料具体内容（内容／商品／发现好物／众筹项目）
extMap Map 扩展字段

注意事项：

recommendId 策略编码，用于页面统计业务数据；

clstags 埋点，多个埋点用,隔开，用于页面统计点击/曝光/销售等数据。

itemDetail 里增加转链类型字段 spinChainType， 0、不需要转链，1、返利转链，2、cpc 链接

普通商品

参数 说明 数据类型
itemDetail 物料详情 JSON
click_url 点击跳转链接 String
exposal_url 曝光监测链接，httpurl，广告素材被展现时，可以用一个 0 像素的图片来加载此 url String
image_url （图片 url）fs\/t697\/350\/331568209\/346280\/56d84d3\/54a270faN273f0a90.jpg 展示时加上前缀：https://img12.360buyimg.com/n1/s300x300_ String
ad_title 商品名称 String
image_tag_url 右上角，618 等活动标签 String
goodsPrice 京东商品价格 String
realPrice 活动价格 String
otherPrice 活动到手价格（京喜商品） String
skuId 商品 skuId String
tags 标签（1 分期，2 自营 )
tags2 标签（数组，2 自营,3 信用卡,5 秒杀，6 新品，7 简单种草， 9 满减，10 包邮  ）
templateType 1：默认；2：拼购 3:秒杀；4：购物返利 String
spinChainType 转链类型 0、不需要转链，1、返利转链，2、cpc 链接 Integer
wlCommission 返现金额 String
hasCoupon 1: 有优惠券；0 没有优惠券 Integer
coupon 优惠券信息 Map
id 物料 ID String
type 物料类型 Integer
subtype 物料二级类型 Integer
clstags 埋点数据 String

优惠券信息 coupon：

字段 类型 说明
batchId Long 批次 id（唯一标识）
key String
link String 券链接
couponKind Integer 券种类
platformType Integer 券限制使用平台
quota Double 消费限额
discount Double 优惠卷金额
beginTime Date 券领取开始时间
discount Double 优惠卷金额
useStartTime Date 券使用开始时间
useEndTime Date 券使用结束时间
availableTime Date 领取后可用时间
source String 数据源
venderId Long 券的供应商 id
remainCnt Integer 剩余券数量
couponType Integer 券的类型
planId Long 计划 Id
type int 券类型 1：通用，2：计划，3：提报，4：公开, 6:二合一转链

源码

{

"clstags": "jr|keycount|jddx_A282016828225380352|#es_A282016828225380352_1728_101_11241247601_1__#",

"extMap": {

"rpcStrategyClstags": "",

"rpcStrategyRecId": "100119",

"rpcStrategyType": "es",

"rpcStrategyTypeRealCode": "es",

"rpcStrategyIsEndData": "0",

"rpcStrategySkuGroupId": "1728",

"rpcStrategyLastId": "1",

"allDataIndex": 0

},

"id": "11241247601",

"itemDetail": {

"ad_title": "英国菲玛斯（进口）洁厕净 厕所马桶清洁液 卫生间清洗剂 洁厕精 洁厕液洁厕剂 500ML 2 瓶装",

"click_url": "https://q.jd.com/m/react/index.html?skuId=11241247601&groupId=1728",

"commentMap": {},

"coupon": {

"remainCnt": 9980,

"useStartTime": 1580659200000,

"couponKind": 3,

"link": "//coupon.m.jd.com/coupons/show.action?linkKey=AAROH%2FxIpeffAs%2F%2BnaABEFoeiqrbVeNkUaac10TjzzjVWm3w%2FDUqDGPmviilvobSHdug2JNc7V9qDQe1F5gV7GLhWHR5Nw%3D%3D&to=mall.jd.com/index-586697.html",

"platformType": 0,

"venderId": 594953,

"discount": "19.0",

"batchId": 164052455,

"couponId": 141486674,

"type": 1,

"useEndTime": 1588262399000,

"couponType": 1,

"quota": "38.0",

"planId": 928218467,

"beginTime": 1580698680000,

"endTime": 1588215480000,

"class": "com.jd.union.api.search.goods.vo.UnionCoupon",

"key": "vender_FP#a54fac160a464d07bde20f9fe6f8c19f"

},

"exposal_url": "https://m.360buyimg.com/jrqb/jfs/t1/75774/7/7160/95/5d5404a0Eff3f80ba/728068dfc942243b.png",

"extDataMap": {},

"goodsPrice": "38.90",

"hasCoupon": 1,

"image_url": "jfs/t3271/136/5560019638/316716/348f1616/58733c80N654477b4.jpg",

"interestFree": 0,

"realPrice": "29.20",

"selfService": 0,

"skuId": "11241247601",

"spinChainType": 0,

"tags": [],

"tags2": [],

"wlCommission": "9.7"

},

"realId": "101_11241247601",

"strategyType": "cps",

"subtype": "101001",

"templateType": "1",

"type": "101"

}

resultCode 码和 resultMsg 描述

resultCode resultMsg
0000 成功
8001 未登录
10000 系统错误
10100 permission denied
10101 token 校验不通过
10200 请求参数错误
10201 参数必填
10202 参数错误，请使用日期格式:yyyy-MM-dd
10203 参数格式错误，日期格式应该是 yyyy-MM-dd
10204 参数格式错误，日期格式应该是 yyyy-MM-dd
10205 参数格式错误，日期格式应该是 yyyy-MM-dd HH:mm:ss
10205 参数格式错误，起飞日期大于返回日期
10502 不支持的参数
50100 RPC 服务调用异常
50101 RPC 服务返回空
50102 RPC 服务调用错误
50103 RPC 服务调用超时
21001 订单 JSF 异常
22001 订单 DAO 查询异常
23001 订单前台系统服务异常
21000 DAO 层异常
22000 JSF 层逻辑异常
23000 WEB 系统业务异常
9999 未知异常

三、订单查询接口（cps 任务）

通用接口信息

如需调用开放接口，须向小钼运营人员申请开放接口 appkey 和 secret。

请求地址 生产环境 https://api-cpa.jd.com/open/api
测试环境 https://daas-test.jd.com/sit/cpa/open/api
请求方式 POST

请求参数：

参数名称 中文名称 类型 是否必须 描述
method 接口名 String 是 每个接口不同
app_key 接入方标识 String 是 需要申请
timestamp 时间戳 String 是 格式 yyyy-MM-dd HH:mm:ss
format 格式 String 是 json
sign 签名 String 是 见签名算法描述
version 版本号 String 是 默认 1.0

签名算法描述如下：

1.将请求参数按参数名升序排序；

2.按请求参数名及参数值相互连接组成一个字符串：

<paramName1><paramValue1><paramName2><paramValue2>...；

3.将应用密钥分别添加到以上请求参数串的头部和尾部：<secret><请求参数字符串><secret>；

4.对该字符串进行 MD5（全部大写），MD5 后的字符串即是这些请求参数对应的签名；

签名算法 java 代码示例见【附 1】

业务请求参数：

参数名称 中文名称 类型 是否必须 描述
data 请求参数 String 是 由下面业务参数转成 json 字符串再进行 url encode 生成
optype 时间类型 Integer 是 1.下单时间 2.完成时间 3.更新时间
startDate 开始时间 String 是 格式 yyyy-MM-dd HH:mm:ss
endDate 结束时间 String 是 格式 yyyy-MM-dd HH:mm:ss
page 当前页数 Integer 否 默认 1
pageSize 每页大小 Integer 否 默认 20，范围 1-100

注：1.使用更新时间查询时，必须采用倒序的分页方式（从最后一页往回取）才能避免漏单问题。

2.请求参数时间区间跨度最长 20 分钟

响应参数：

参数名称 中文名称 类型 是否必选 描述
code 结果码 Integer 是 200 成功，其他失败
message 信息 String 是 错误信息
result 结果数据 是
total 数据总数 long 是
page 列表 List
id id Long 是
subUnionId 子联盟 ID String 是
sub 渠道自定义字段 String 否
linkCode 链接编号 String 是
parentAgencyCode 一级渠道编号 String 是
subAgencyCode 下级渠道编号 String 否
orderId 商城订单号 Long 是
parentOrderId 商城父订单号 Long 否
skuId 商品 ID Long 是
skuName 商品名称 String 是
skuNum 商品数量 Integer 是
skuReturnNum 商品退货数量 Integer 是
skuFrozeNum 商品售后中数量 Integer 是
price 商品单价 BigDecimal 是
payPrice 实际支付金额 BigDecimal 是
estimateCosPrice 预估计佣金额 BigDecimal 是 即用户下单的金额(已扣除优惠券、白条、支付优惠、进口税，未扣除红包和京豆)，有时会误扣除运费券金额，完成结算时会在实际计佣金额中更正。如订单完成前发生退款，此金额也会更新。
actualCosPrice 实际计佣金额 BigDecimal 是 订单完成后，会将误扣除的运费券金额更正。如订单完成后发生退款，此金额会更新。
validCode 有效码 Integer 是 -1：未知 2.无效-拆单 3.无效-取消 4.无效-京东帮帮主订单 5.无效-账号异常 6.无效-赠品类目不返佣 7.无效-校园订单 8.无效-企业订单 9.无效-团购订单 10.无效-开增值税专用发票订单 11.无效-乡村推广员下单 12.无效-自己推广自己下单 13.无效-违规订单 14.无效-来源与备案网址不符 15.待付款 16.已付款 17.已完成 18.已结算 19.无效-佣金比例为 0
traceType 同跨店 Integer 是 2：同店；3：跨店
unionTag 联盟标签数据 String 是
orderEmt 下单设备 Integer 是 1:PC,2:无线
plus 下单用户是否为 PLUS 会员 Integer 是 0：否，1：是
orderTime 下单时间 Date 是
finishTime 完成时间 Date 是
estimateParentAgencyFee 预估一级渠道分佣 BigDecimal 是
actualParentAgencyFee 实际一级渠道分佣 BigDecimal 是
estimateSubAgencyFee 预估下级渠道分佣 BigDecimal 否
actualSubAgencyFee 实际下级渠道分佣 BigDecimal 否
status 结算状态，预留 Integer 否
createdTime 创建时间 Date 是
modifiedTime 最后修改时间 Date 是

请求示例：

https://api-cpa.jd.com/open/api?method=cps.order.page&app_key=aaaaa

&data=%7B%22endDate%22%3A%222020-01-14%22%2C%22page%22%3A1%2C%22pageSize%22%3A10%2C%22startDate%22%3A%222020-01-01%22%2C%22optype%22%3A%223%22%7D

&timestamp=2020-01-15 17:40:07&format=json

&sign=09E7DFD4C6B15254C1BA0B4DFE7492B7&version=1.0

响应示例：

成功

{

"code": 200,

"result": {

"page": [

{

"id": 1100778,

"subUnionId": "11111",

"sub": "11111",

"linkCode": "11111",

"parentAgencyCode": "A000002",

"subAgencyCode": "A000002",

"orderId": 61861861866,

"parentOrderId": 61861861866,

"skuId": 5487565,

"skuName":"空气净化器 除雾霾 除甲醛 空气质量屏幕显示 三层净化",

"skuNum": 2,

"skuReturnNum": 1,

"skuFrozeNum": 1,

"price": 61.8,

"payPrice": 6.18,

"estimateCosPrice":6.18,

"actualCosPrice":6.18,

"validCode": 18,

"traceType": 3,

"unionTag": "0000000000000010",

"orderEmt": 1,

"plus": 1,

"orderTime": 1579488877000,

"finishTime": 1579488877000,

"estimateParentAgencyFee": 6.18,

"actualParentAgencyFee": 6.18,

"estimateSubAgencyFee": 6.18,

"actualSubAgencyFee": 6.18,

"status": 1,

"createdTime": 1579488877000,

"modifiedTime": 1579488877000

}

],

"total": 1289

},

" message ": "OK"

}

失败

{

"code": 400,

"message": "参数错误"

}

附 1 签名算法 java 代码示例

/**

* 构建签名

*

* @param paramsMap

* 参数

* @param secret

* 密钥

* @return

*/

public static String createSign(Map<String, ?> paramsMap, String secret) {

Set<String> keySet = paramsMap.keySet();

List<String> paramNames = new ArrayList<String>(keySet);

Collections.sort(paramNames);

StringBuilder paramNameValue = new StringBuilder();

for (String paramName : paramNames) {

paramNameValue.append(paramName).append(paramsMap.get(paramName));

}

String source = secret + paramNameValue.toString() + secret;

return encryptUpper(source);

}

/**

* 生成 md5,全部大写

*

* @param input

* @return

*/

public static String encryptUpper(String input) {

if(input == null || "".equals(input)) {

throw new IllegalArgumentException("The argument input can not be empty.");

}

try {

// 创建一个提供信息摘要算法的对象，初始化为 md5 算法对象

MessageDigest md = MessageDigest.getInstance("MD5");

// 计算后获得字节数组,这就是那 128 位了

byte[] buff = md.digest(input.getBytes());

// 把数组每一字节（一个字节占八位）换成 16 进制连成 md5 字符串

return byte2hex(buff).toUpperCase();

} catch (Exception e) {

throw new RuntimeException(e);

}

}

/**

* 二进制转十六进制字符串

*

* @param bytes

* @return

*/

public static String byte2hex(byte[] bytes) {

StringBuilder sign = new StringBuilder();

for (int i = 0; i < bytes.length; i++) {

String hex = Integer.toHexString(bytes[i] & 0xFF);

if (hex.length() == 1) {

sign.append("0");

}

sign.append(hex);

}

return sign.toString();

}

导购商品服务

导购小程序插件

在 app.json 中添加插件配置，例如 调试状态中 version 可配置 dev-版本,具体版本可联系相关研发

  "plugins": {
    "jdcz-plugin":{
      "version": "1.0.0",
      "provider": "wx6b529088850edc8c"
    }
  }
 }
1
2
3
4
5
6
7

组件库

mix-feed

  1. 引用组件
"usingComponents": {
  "mix-feed": "plugin://jdcz-plugin/mix-feed"
}
1
2
3
  1. wxml 中使用，sence 为江湖场景 id
<mix-feed id="mix-feed" sence="{{sence}}"></mix-feed>
1
  1. js 代码，注意
  • 需要为组件注册 scrollToTop 函数，否侧切换 tab 时 feed 无法滚动到第一页
  • 页面滚动时需要触发组件的 onScroll 函数，否则无法加载下一页
  • 例：
Page({
    data: {
        //场景id
        sence: "A244394853802164224",
    },
    onLoad: function () {
        this.mixFeedComp = this.selectComponent("#mix-feed");
        this.mixFeedComp.scrollToTop = (scrollTop) => {
            wx.pageScrollTo({
                scrollTop,
            });
        };
    },
    onPageScroll() {
        this.mixFeedComp.onScroll();
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  1. 案例
  • img1

search-comm 搜索推荐组件（1.0.2 版本增加）

  • 注意：新建一个新页面引入组件使用
  1. 引用组件
{
    "usingComponents": {
        "search-comm": "plugin://jdcz-plugin/search-comm"
    }
}
1
2
3
4
5
  1. wxml 中使用，入参：appid 为小程序 APPID，sub 为跟单标记字段（自定义字段），agencyId 为渠道 ID，mixSence 为推荐商品场景 ID，searchSence 为搜索商品场景 ID
<search-comm id="search-comm" appid="" sub="" agencyId="7427" mixSence="A337026396618403840" searchSence="A337025905787367424"></search-comm>
1
  1. js 代码，注意
  • 需要为组件注册 scrollToTop 函数，否侧切换 tab 时 feed 无法滚动到第一页。
  • 需要通过插件的 goSearch 方法暴露 wx 全局变量，否则 wx 的部分 API，插件内无法使用。
  • 页面滚动时需要触发组件的 onScroll 函数，否则无法加载下一页。
  • 例
const plugin = requirePlugin("jdcz-plugin");

Page({
    data: {},
    onLoad: function (options) {
        this.searchCommID = this.selectComponent("#search-comm");
        this.searchCommID.scrollToTop = (scrollTop) => {
            wx.pageScrollTo({
                scrollTop,
            });
        };
    },
    onShow() {
        // 暴露wx全局变量
        plugin.goSearch.call(wx);
    },
    onPageScroll() {
        this.searchCommID && this.searchCommID.onScroll();
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  1. 案例
  • img2

函数

跳转到京东购物小程序 （1.0.1 版本增加）

const plugin = requirePlugin("jdcz-plugin");
plugin.gotoJdMiniProgram.call(wx, "当前小程序appid");
1
2

自定义 URL 跳转到京东购物小程序 （1.0.2 版本增加）

const plugin = requirePlugin("jdcz-plugin");
plugin.gotoJdMiniProgramByURL.call(wx, "当前小程序appid", "跟单标记字段(自定义字段)", "渠道ID", "URL");
1
2

银行场景定制商城

接入方式

小程序

1.接入方式 1.江湖后台自动生成页面配置链接后 eg: 以 https://q.jd.com/m/pages/output.html?jhProjectId=449&jhPageId=pqyg8kqtnv1po64lw 链接为例嵌入小程序。嵌入方式：web-view，内置逻辑

if (window.__wxjs_environment == 'miniprogram') {
    if (
        rs.resultData.value &&
        rs.resultData.value.pointsType == 'points'
    ) {
        window.location.href = rs.resultData.value.payUrl;
    } else {
        wx.miniProgram.navigateTo({
            url: `/pages/points/pay/index?orderNo=${encodeURIComponent(
                rs.resultData.value.orderNo
            )}`,
        });
    }
} else {
    window.location.href = rs.resultData.value.payUrl;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.小程序中接入组件

公众号

APP

生成 h5 页面后引入组件，组件默认支持小程序跳转页面环境判断依赖：

<script src="https://m.jr.jd.com/??crayfish/zui/zepto/1.2.0/zepto.js,crayfish/zui/device/1.0.0/device.js" type="text/javascript"></script>
1

如果没有请优先添加。

一、在 html Dom 中加入以下代码（每一种都是不同的组件，瀑布流组件为第六个）:

ps:1-10 为实物商品组件，11 为虚拟权益商品组件，12-18 为功能性组件，19-20 为积分组件。

  1. 一拖二
<div class="jdOneRowTuoTwoColNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initOneTuoTwo();
1
  1. 一拖三
<div class="jdOneRowTuoThreeColNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initOneTuoThree();
1
  1. 多行三列
<div class="jdOneThreeColMoreRowNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdThreeColMoreRow();
1
  1. 一行四列
<div class="jdOneRowFourColNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdOneRowFourCol();
1
  1. 一行拖四列
<div class="jdOneRowTuoFourColNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdOneRowTuoFourCol();
1
  1. 多行两列
<div class="jdOneTwoColMoreRowNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdTwoColMoreRow();
1
  1. 一行一个
<div class="jdOneRowOneMoreColNew" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdOneRowOneMore();
1
  1. 优惠券组件
<div class="jdGylCoupon" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initCoupon();
1
  1. 优惠券包组件
<div class="jdGylCouponBag" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initCouponBag();
1

注意：以上九种组件支持同一样式，不同场景复用，混排，多个楼层，同一 class 类名函数只需调用一次。

  1. 瀑布流
<div class="jdMixWaterfall" id="jdMixWaterfall"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initMix({appid:'xxxxx'});
1

特别注意：mix 组件只能引入一次；

  1. 虚拟权益组件
<div class="jdOneThreeColMoreRowNewEquity" data-appId=""></div>
1

调用方式：

window.gylComponent && window.gylComponent.initJdThreeColMoreRowEquity();
1
  1. 搜索组件
<div class="jdGylSearch" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initSearch();
1
  1. 轮播图组件
<div class="jdGylSlideshow" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initSlideshow();
1
  1. ICON 组件
<div class="jdGylIcon" data-appId="xxxxxx"></div>
1

调用方式：

    window.gylComponent && window.gylComponent.initIcon();
1
  1. 楼层标题组件
<div class="jdGylTitle" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initTitle();
1
  1. 楼层间距组件
<div class="jdGylMargin" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initMargin();
1
  1. 倍图组件
<div class="jdGylMultiple" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initMultiple();
1
  1. 广告通栏组件
<div class="jdGylFullColumn" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initFullColumn();
1
  1. 积分一行一个组件
<div class="jdPointOneColMoreRow" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initPointOneColMoreRow();
1
  1. 积分一行两个组件
<div class="jdPointTwoColMoreRow" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initPointTwoColMoreRow();
1
  1. 两行多列活动氛围组件
<div class="jdActiveTwoColMoreRow" data-appId="xxxxxx"></div>
1

调用方式：

window.gylComponent && window.gylComponent.initActiveTwoColMoreRow();
1

二.引用方式

  1. 在 index.html 中的 head 中引入以下代码； 1.引入 zeptojs：
<script src="https://m.jr.jd.com/??crayfish/zui/zepto/1.2.0/zepto.js,crayfish/zui/device/1.0.0/device.js" type="text/javascript"></script>
1
  1. 引入组件 js ：
<script src="//jddx.jd.com/m/outputjs/newbundle.js?from=(区分渠道订单来源参数。需联系产品分配)"></script>
1
  1. mix 组件为例调用方法如下：
window.gylComponent.initMix({appid:'A237724365837221888',cls:'jdmix',skuid:'10000'})
1
  1. 具体说明： appid:通过江湖组件后台配置，id 区分预发与生产，调试过程中 id 必须要与 host 环境相对应，不然接口会报系统错误； cls: 根据自己页面的布局来决定传值，例如接入页面在 class=“page-view”上可以绑定滚动事件，那么将"page-view"作为第二个参数传入，如果传空则会将组件的滚动事件绑定到 document 上，如不需要可不传 skuid:如果页面需要根据当前页面商品来进行推荐相关商品，则传入该页商品 ID，如不需要，可不传如果接入页面为单页应用并且应用内多个页面接入 mix 组件，请看如下，如果是非单页请忽略 window.gylComponent.removeScrollEvent('cls')，window.gylComponent.addScrollEvent('cls') removeScrollEvent 方法需要在离开当前页到下一页时调用，需要销毁当前页 mix 组件绑定的滚动事件，防止两页之间引起滚动冲突。 addScrollEvent 方法需要回到已打开页时调用，目的是为 mix 组件绑定滚动事件，初始化时无需调用。 5.使用代码如下: *如果页面中既有上述 1-6 的楼层组件也有 mix 组件，使用以下方式调用：
<script>
    var g = document.createElement('script');
    g.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'jddx.jd.com/m/outputjs/newbundle.js?from=(区分渠道订单来源参数。需联系产品分配)';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);
    if (g.addEventListener) {
        g.addEventListener('load', function() {
                window.gylComponent && window.gylComponent.initMix({appid:'xxxxx'});   //xxxxx改为线上的appid(必传)
        });
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

在 vue 单页面中将上述代码引入到当前 mounted()中；在 react 单页面中将上述代码引入到 componentDidMount()中；

  1. 楼层动态切换调用方式

网关接口生产环境：https://ms.jr.jd.com/gw/generic/jrm/h5/m/getRecommendConfigInfo 网关接口预发环境：http://msinner.jr.jd.com/gw/generic/jrm/h5/m/getRecommendConfigInfo 传入参数：

reqData: {"recommendId": "A243309434810318848" }
1

返回参数：

代码如下: start:--------------------------------------------------------------------------------------》 // 注释：post 方法 需根据自己的请求方式修改 // 注释：appid 需换成要上线应用场景的 appid // 注释：className 为 vue 或者 react 变量

var self = this;
post("https://ms.jr.jd.com/gw/generic/jrm/h5/m/getRecommendConfigInfo", {
    // 如果JSON.stringify封装过有网关参数reqData，改成{"recommendId":"A243309434810318848" }即可，如果没以下参数；
    reqData: JSON.stringify {"recommendId":"A243309434810318848" }
}).then(rs => {
    if (
        rs &&
        rs.resultMap &&
        rs.resultMap.resultMapData &&
        rs.resultMap.resultMapData.componentStyleShow
    ) {
        self.className =  rs.resultMap.resultMapData.componentStyleShow;
    } else {
        self.className = "jdOneThreeColMoreRowNew";
    }
    var g = document.createElement("script");
    g.src = ("https:" == document.location.protocol ? "https://" : "http://") +"jddx.jd.com/m/outputjs/newbundle.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(g, s);
    if (g.addEventListener) {
        g.addEventListener("load", function() {
            switch (self.className) {
                case "jdOneRowTuoTwoColNew":
                    window.gylComponent && window.gylComponent.initOneTuoTwo();
                    break;
                case "jdOneRowTuoThreeColNew":
                    window.gylComponent && window.gylComponent.initOneTuoThree();
                    break;
                case "jdOneThreeColMoreRowNew":
                    window.gylComponent && window.gylComponent.initJdThreeColMoreRow();
                    break;
                case "jdOneRowFourColNew":
                    window.gylComponent && window.gylComponent.initJdOneRowFourCol();
                    break;
                case "jdOneRowTuoFourColNew":
                    window.gylComponent && window.gylComponent.initJdOneRowTuoFourCol();
                    break;
                default:
                    window.gylComponent && window.gylComponent.initJdThreeColMoreRow();
                    break;
            }
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

end------------------------------------

最后更新: 10/27/2020, 11:08:36 AM

积分兑换