# tt-recommend-component

> 食用说明

Latest version **1.0.21** (published 2021-12-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install tt-recommend-component
pnpm add tt-recommend-component
yarn add tt-recommend-component
bun add tt-recommend-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2021-12-22 |
| First published | 2020-09-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mambaforever |

## Links

- npm: https://www.npmjs.com/package/tt-recommend-component
- npm.io page: https://npm.io/package/tt-recommend-component

## Recent versions

- 1.0.21 (latest) — 2021-12-22
- 1.0.20 — 2021-12-22
- 1.0.15 — 2021-01-12
- 1.0.14 — 2021-01-05
- 1.0.13 — 2020-12-23
- 1.0.12 — 2020-11-18
- 1.0.11 — 2020-10-26
- 1.0.10 — 2020-10-16
- 1.0.9 — 2020-10-15
- 1.0.8 — 2020-10-14
- 1.0.7 — 2020-09-28
- 1.0.6 — 2020-09-21
- 1.0.5 — 2020-09-21
- 1.0.4 — 2020-09-21
- 1.0.3 — 2020-09-21
- … 3 more at https://npm.io/package/tt-recommend-component/versions

## README

# 视频-相关推荐组件

### 引入方式

#### npm引入

##### npm初始化，npm下载

```elm
npm init -y
npm install tt-recommend-component
```

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

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

```json
// 例：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)时的回调)`

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

```html
<!-- 例：需事件回调的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>
```

```js
// 例：需事件回调的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("获取推荐列表数据失败")
  },
})
```





### 代码示例

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

```js
// 例：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设置的值，返回全部数据。

---
_Source: https://npm.io/package/tt-recommend-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._