视频-相关推荐组件

引入方式

npm引入

npm初始化，npm下载

npm init -y
npm install tt-recommend-component

字节小程序开发者——工具——构建npm

在需要引入组件的页面的json文件中手动添加usingComponents

// 例：index.json
{
  "usingComponents": {
    "recommendComponent": "/miniprogram_npm/tt-recommend-component/recommend-component"
  }
}

需传入组件的参数

options(object): 页面 onload 生命周期接收的参数

需包括的属性：

| 属性 | 类型 | 默认值 | 必填 | 说明 | | ----------- | -------- | ---------- | -------- | ------------------------------------------------------------ | | article_gid | string | | 是 | 文章id（无需手动携带，由服务端下发到页面onload的回调参数中） |

config(object):

需包括的属性：

| 属性 | 类型 | 默认值 | 必填 | 说明 | | ---------------- | -------- | ---------- | -------- | ------------------------------------------------------------ | | adId | string | | 是 | 广告id | | adInsertPosition | number | 3 | 否 | 设置广告隔几出一（最少设置隔3出1） | | count | number | 5 | 否 | 每次加载相关推荐数量（5-10） | | scale | number | 0.8 | 否 | 组件尺寸（0.8-1，1为通屏） | | Total | number | | 否 | 加载的总推荐数，最少为0条 | | noHistory | boolean | false | 否 | 页面跳转方式：默认为保留当前页面（navigate）；设置为 true 时为关闭当前页面（redirect）。开发者按需传入。 |

组件内向外暴露的一些回调（可选）:

开发者在组件上绑定需要的事件回调即可

绑定在组件上的回调事件名为：

• adSuccessCb(广告加载成功回调)
• adFailedCb(广告加载失败回调)
• loading(数据请求成功回调)
• loadFail(数据请求失败回调)
• loadDone(获取的数据量达到设置的总数据量(total)时的回调)

事件回调由开发者定义，示例代码如下：

<!-- 例：需事件回调的index页面 index.ttml -->
<view class="indexContainer">
  <recommendComponent 
    tt:if="{{componentOpt}}" 
    options="{{componentOpt}}" 
    config="{{config}}"
    bind:adSuccessCb="adSuccessCb" 
    bind:adFailedCb="adFailedCb"
    bind:loading="loadingCb"
    bind:loadDone="loadDoneCb"
    bind:loadFail="loadFailedCb"
  >
  </recommendComponent>
</view>

// 例：需事件回调的index页面 index.js
Page({
  data: {
    ...
  },
  onLoad: function (opt) {
    ...
  },
  // 广告加载成功的回调
  successCb: (e) => {
    console.log("广告加载成功::::: ",e)
  },
  // 广告加载失败的回调
  failedCb: (e) => {
    console.log("广告加载失败::::: ",e)
  }, 
  // 数据请求成功的回调
  loadingCb: () => {
    console.log("获取推荐列表数据成功")
  },
  // 获取的数据量达到设置的总数据量(total)时的回调
  loadDoneCb: () => {
    console.log("获取的推荐数据达到设置的总推荐数")
  },
  // 数据请求失败的回调
  loadFailedCb: () => {
    console.log("获取推荐列表数据失败")
  },
})

代码示例

<!-- 例：index页面的 index.ttml -->
<view class="indexContainer">
  <recommendComponent tt:if="{{componentOpt}}" options="{{componentOpt}}" config="{{config}}"></recommendComponent>
</view>

// 例：index页面的 index.js
Page({
  data: {
    componentOpt: null,
    config: {
      scale: 0.8,  // 组件尺寸,0.8-1,1为通屏
      adInsertPosition: 3,  // 广告隔几出1, 最少设置隔3出1
      adId: "6n2fcqaj0e6hxxxxx", // 广告id
      count: 5, // 每次加载相关推荐数,5-10条，可见下方提示
      total: 30  // 推荐加载的总条数，可见下方提示
    }
  },
  onLoad: function (opt) {
    console.log('当前 article_gid',opt.article_gid);
    this.setData({
      componentOpt: opt
    })
  },
})

提示：

• 头条7.8.8版本及以下：加载的相关推荐只请求一次，最多加载20条（加载数量可由开发者传入的 count 决定，取值为 5-20，如不传默认加载20条）; 如设置的count值小于设置的total值，那么最终加载数量由count值决定。

• total属性：返回的推荐总数量。如数据数量小于total设置的值，返回全部数据。