1. 对接说明

1. 第三方H5商品的链接，可以H5直播间内半屏展示；仅付款时，全屏跳出直播间。

   支付成功，建议添加返回直播间的按钮，以便于客户能再次回到直播间。

2. 小程序的商品，受制于小程序的页面规则，无法在H5的直播间内半屏显示。

3. App页面内的商品，可以在H5直播间内半屏展示，需要APP自行处理。

2. 必要配置

【企业设置】-【API对接管理】中，找到第三方H5商品对接配置项；

2.1. 修改要配置的主账号、子账号；

1. 已经存在的子账号，需要单独设置；

2. 新建的子账号，会同步主账号的配置；

2.2. 选择直播间嵌入方式，再配置需要全屏打开H5商品、半屏打开H5商品；

1. 未对接，直接在浏览器中打开直播间;

2. H5通过iframe嵌入直播;

3. uniapp使用webview或者APP中嵌入直播;

4. 小程序中嵌入直播;

5. 原生开发APP中嵌入直播;

2.3. 如需半屏显示商品，需要按照【3.对接说明】，配置相应的内容。

3. 对接说明

3.1 全屏打开商品的对接说明

嵌入直播间的宿主环境打开直播间时的对接参数

1. 打开直播间链接时，链接上拼上参数&env_mall=xxx, 值根据环境自行填写，如下：

• h5: 未对接，直接在浏览器中打开直播间;

• h5_iframe: H5通过iframe嵌入直播;

• uniapp: uniapp使用webview或者APP中嵌入直播;

• miniprogram: 小程序中嵌入直播;

• app: 原生开发APP中嵌入直播;

x
https://live.pili-live.com/livestreamapi/watch/?liveid={{直播id}}&enterprise_id={{企业id}}&env=xiaochengxu&env_mall=miniprogram&extra_info=xxx
//如小程序中嵌入直播，希望半屏打开H5商品，则观看端链接需要以这种形式拼接参数
https://live.pili-live.com/livestreamapi/watch/?liveid={{直播id}}&enterprise_id={{企业id}}&env=xiaochengxu&env_mall=miniprogram&extra_info=xxx

2. 如果需要携带其他信息，可以 extra_info=xxx 的形式拼接在直播间链接中。 extra_info应当是Json字符串并进行encodeURIComponent编码，示例代码如下：

xxxxxxxxxx
   let obj = {
      userid: 'zhangsan',
}
extra_info = encodeURIComponent(JSON.stringify(obj))

3.2 半屏打开商品的对接说明

以APP内嵌入直播间为例，对接可分为以下步骤：

1. APP内webview嵌套方式打开直播间；

2. 直播间内点击购物车内商品/推屏商品，半屏拉起商品详情页。如下图所示：

3. 点击商品详情页中的立即购买按钮，期望拉起APP的支付服务。

如上图所示，由于商品详情页是通过iframe嵌入到直播间中，所以需要：

1. 商品详情页 将 APP支付服务需要的参数 传递到直播间（详见3.2.2）；

2. 再由 直播间 携带参数与 APP 通信并唤起APP的支付服务（详见3.2.3）。

3.2.1 嵌入直播间的宿主环境打开直播间时的对接参数

1. 打开直播间链接时，链接上拼上参数&env_mall=xxx, 值根据环境自行填写，如下：

• h5: 未对接，直接在浏览器中打开直播间;

• h5_iframe: H5通过iframe嵌入直播;

• uniapp: uniapp使用webview或者APP中嵌入直播;

• miniprogram: 小程序中嵌入直播;

• app: 原生开发APP中嵌入直播;

xxxxxxxxxx
//如小程序中嵌入直播，希望半屏打开H5商品，则观看端链接需要以这种形式拼接参数
https://live.pili-live.com/livestreamapi/watch/?liveid={{直播id}}&enterprise_id={{企业id}}&env=xiaochengxu&env_mall=miniprogram&extra_info=xxx

2. 如果需要携带其他信息，以 extra_info=xxx 的形式拼接在直播间链接中。 extra_info应当是Json字符串并进行encodeURIComponent编码，示例代码如下：

xxxxxxxxxx
   let obj = {
      userid: 'zhangsan',
}
extra_info = encodeURIComponent(JSON.stringify(obj))

3.2.2 半屏第三方商城与直播间对接参数

半屏形式打开商城并希望与嵌入直播间的外部环境通信时，需要商城先与直播间通信，对接代码如下：

x
       * 'h5': 未对接，直接在浏览器中打开直播间;
let postData = {
      isThirdPartyMall: 1, // 必需值。第三方商城标识位，只有为 1 时直播间才接受此消息
      redirectUrl: '', // 必需值。需要跳转的链接，比如需要支付时，就填入支付链接，包含所有需要的参数
      /** 必需值,不传默认未对接，即直接在浏览器中打开直播间。
       * 直播间嵌入的环境，
       * 'h5': 未对接，直接在浏览器中打开直播间;
       * 'h5_iframe': H5通过iframe嵌入直播;
       * 'uniapp': uniapp使用webview或者APP中嵌入直播;
       * 'miniprogram': 小程序中嵌入直播;
       * 'app': 原生开发APP中嵌入直播;
       /
      env_mall: '',
      ……
}
parent.postMessage( postData, '');

除示例外，第三方商城需要什么参数可自行向 postData 对象中填充。

3.2.3 直播间与外部环境对接参数

1. 未进行对接时，直播间将直接跳转至3.2.2中 postData 的 redirectUrl 字段的值；

2. H5环境使用iframe嵌入直播间半屏打开商城时，直播间页面使用 parent.postMessage( obj, '*') 与自有H5环境进行通信，自有H5环境应进行监听。示例代码如下：

xxxxxxxxxx
window.addEventListener('message', this.handleMallMessage);
      handleMallMessage(e) {
            switch(e.origin) {
                  default: // H5半屏拉起商城通用方法
                        let { data } = e || {}
                        let { isThirdPartyMall } = data || {}
                        if(isThirdPartyMall) {
                              this.handleThirdPartyHalfScreenMallMsg(e)
                        }
                        break
            }
      },

3. uniapp使用webview嵌入直播间或者uniapp开发的App嵌入直播间半屏打开商城时，直播间页面使用 uni.postMessage() 与自有环境进行通信；

4. 小程序嵌入直播间半屏打开商城时，直播间页面使用 wx.miniProgram.navigateTo()与自有环境进行通信；

5. APP环境半屏嵌入直播间半屏打开商城时，从直播间回到APP，需要按照以下方法，告知APP。 注：IOS端 对接函数名 必须 为 nativeHandler，Android端 对接函数名 必须 为 gxtAndroidFn，示例代码：

xxxxxxxxxx
//IOS使用以下方法:
window.webkit.messageHandlers.nativeHandler.postMessage({
      'action': 'product',
      'data': params
});

xxxxxxxxxx
//Android使用以下方法:
   window.Android && window.Android.gxtAndroidFn && window.Android.gxtAndroidFn(JSON.stringify({
         'action': 'product',
         'data': params
   }));