# generator-live

> 直播互动层脚手架

Latest version **0.1.12** (published 2016-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install generator-live
pnpm add generator-live
yarn add generator-live
bun add generator-live
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2016-08-30 |
| First published | 2016-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.8.0 |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 圣司 |
| Maintainers | shengsi |
| Keywords | yeoman-generator, generator-live |

## Links

- npm: https://www.npmjs.com/package/generator-live
- npm.io page: https://npm.io/package/generator-live

## Dependencies (5)

- [semver](https://npm.io/package/semver.md) ~5.1.0
- [inquirer](https://npm.io/package/inquirer.md) ~1.0.2
- [git-config](https://npm.io/package/git-config.md) 0.0.7
- [html-wiring](https://npm.io/package/html-wiring.md) ~1.2.0
- [yeoman-generator](https://npm.io/package/yeoman-generator.md) ^0.21.1

## Recent versions

- 0.1.12 (latest) — 2016-08-30
- 0.1.11 — 2016-08-30
- 0.1.10 — 2016-08-22
- 0.1.8 — 2016-08-17
- 0.1.7 — 2016-08-17
- 0.1.6 — 2016-08-04
- 0.1.5 — 2016-08-04
- 0.1.4 — 2016-08-04
- 0.1.3 — 2016-08-04
- 0.1.2 — 2016-08-04
- 0.1.1 — 2016-08-04
- 0.1.0 — 2016-08-04

## README

# PC 中控台配置 iframe 前端开发流程

<img src="https://img.alicdn.com/tfs/TB1rtPOLXXXXXctaXXXXXXXXXXX-2368-1660.png" width="1000" />

### 开发流程

1、拉取中控台组件开发仓库 [trip/live-platform](http://gitlab.alibaba-inc.com/trip/live-platform)，安装依赖

```
$ tnpm install
```

2、新建脚手架，选择 `中控台配置层`，按提示配置，生成包括默认的模板、样式、逻辑

```
$ yo live
```

3、启动开发环境，浏览器访问打开本地页面

```
$ grunt dev
```

4、组件开发 & 调试，iframe 宽高为 `800x540`，开发者主要针对脚手架已提供的内容部分进行配置开发

5、开发完成后，执行 `grunt build`（或直接执行 `gurnt prepub`），构建组件
    * 模板通过 tpl_compiler 构建为 .js 文件，用于实现同一个 vm 渲染不同配置组件
    * js/css 执行正常压缩/混淆逻辑

```
$ grunt prepub
```

6、发布组件，静态资源推送至 CDN，到 tripmedia 中修改静态资源版本号

```
$ grunt publish
```

### 配置&使用流程

7、联系淘宝直播接口人 @影逸 配置中控台入口

    * 需要提供入口名称、icon、iframe 地址，具体格式可参考淘宝提供的 [素材投放开发标准文档](http://gitlab.alibaba-inc.com/mtb/drlivebg/wikis/livebg-access)
    * 注意：PC 中控台默认展示的入口根据访问中控台传入的 from 参数控制

8、开发者/主播通过入口启用互动组件

9、中控台访问 tripmedia 提供的 iframe

    * 如上文所述，tripmedia 仅提供入口容器，具体渲染成哪个组件由 tripPage 控制拉取的 js/css 静态资源决定

10、iframe 根据 tripPage 参数拉取不同静态资源展示

    * 静态资源包括第 5 步生成的模板、样式、逻辑，开发中使用的主入口 index.html 不提供给线上使用

11、开发者/主播配置组件，与服务端系统交互

    * 具体交互逻辑由开发者/业务方决定，通过向直播平台 postMessage 触发玩法推送
    
## 配置示例

#### 提交给 @影逸 的 iframe 配置参数：

* `机票宝贝添加接入信息`
* 素材类型：flightItem
* 提交素材内容 postMessage action：FLIGHT_ITEM_SELECT
* 关闭投放选择器 action：FLIGHT_ITEM_CLOSE
* 中控台动态接入配置

    ```
    {
        "from": "alitrip",
        "config": [
            {
                "name": "机票",
                "type": "flightItem",
                "feedType": "800",
                "iconImage": "//gw.alicdn.com/mt/TB1osuZLXXXXXXFXVXXXXXXXXXX-52-26.png",
                "action": {
                    "type": "link",
                    "value": "//media.alitrip.com/video/interaction/showMaterial.htm?tripPage=flight-item&tripType=0"
                },
                "dailyAction": {
                    "type": "link",
                    "value": "//media.daily.alitrip.net/video/interaction/showMaterial.htm?tripPage=flight-item&tripType=0"
                }
            }
        ]
    }
    ```
    
    
# 播放端互动层前端开发流程

### 实现思路

1. 航旅互动玩法交互层前端开发库为 [trip/h5-live-wemodules](http://gitlab.alibaba-inc.com/trip/h5-live-wemodules)，开发框架采用 [Weex](http://alibaba.github.io/weex/doc/)，项目已整合开发、构建工具，脚手架工具维护在 [trip-tools/generator-live](http://gitlab.alibaba-inc.com/trip-tools/generator-live)
1. 每个互动组件相关资源文件收敛在一个目录内，入口文件默认为 entry.we，开发构建 js 输出到 dist 目录，发布前压缩后输出到 build 目录
2. 开发完成后，在 [多媒体中心互动组件管理](http://dmtzj.taobao.com/component_list.htm) 进行组件录入（若旅客、手淘都投放需要录入为两份）

### 开发流程

1、拉取 [trip/h5-live-wemodules](http://gitlab.alibaba-inc.com/trip/h5-live-wemodules) 仓库并安装依赖

```
$ git clone git@gitlab.alibaba-inc.com:trip/h5-live-wemodules.git
$ tnpm install
```

2、使用 [trip-tools/generator-live](http://gitlab.alibaba-inc.com/trip-tools/generator-live) 脚手架初始化玩法模块，选择 `播放端交互组件`，按提示配置

```
$ yo live
```

3、启动开发环境，自动打开浏览器

```
$ grunt dev
```

4、组件开发，框架选用 [Weex](http://alibaba.github.io/weex/doc/)，`src/common` 中封装了一些常用方法

5、开发完成后，执行预发布命令，在 `build` 目录中生成压缩后的模块 js 代码

```
grunt prepub
```

6、完成模块开发后，发布项目

```
grunt publish
```

### 配置&使用流程

7、进入 [多媒体中心互动组件管理](http://dmtzj.taobao.com/component_list.htm)，在对应环境下完成组件配置（配置示例、权限申请见下方）

8、对应 PC 中控台配置 iframe 中 `componentName` 字段填入组件名

## 配置示例

* 新增组件入口及环境切换：

    <img src="https://img.alicdn.com/tfs/TB1XG6bLpXXXXchXVXXXXXXXXXX-2054-730.png" width="600" />

* 新增组件配置：

    <img src="https://img.alicdn.com/tfs/TB1eNm4LpXXXXaiapXXXXXXXXXX-1937-2017.jpg" width="600" />
    
    * 组件名：即是脚手架生成的组件名，对应组件目录名称
    * 环境：当前所处 线上/预发/日常 环境，不可更改
    * 版本：SDK 版本，目前默认写 2，若未来 SDK 版本更新，需要做组件适配并重新录入
    * App：互动组件需要露出的客户端，旅客 alitrip/手淘 taobao，若要两端露出见下面 注意 部分
    * 来源：组件主要用途，目前旅客只涉及直播，默认填 LIVE
    * 分类：业务分类，组件管理平台不适用，可按组件业务线填写，如机票 flight，通用 common
    * type：组件类型，旅客默认都用 weex，默认填 WEEX
    * 横屏代码：从 build 目录拷贝对应构建压缩后代码并填入此处
    * 竖屏代码：同上，旅客目前主要填竖屏代码即可

* 注意：
    * 来源、type 两个字段为全大写
    * 同一个组件名可以分 版本、App、来源 录入多个组件
    * 若一个交互组件既要在手淘中露出，又要在旅客中露出，则需要按不同 App 录入两份，基于此也可以实现不同端间的差异化

## 权限申请

* 联系接口人 @石泉，标准话术 from @迟伤：

    ```
    石泉，
    http://dmtzj.taobao.com/componentErrorPage.htm
    这个“多媒体中心互动组件管理”，帮忙开一下权限吧。
    航旅前端，直播共建做互动层的weex组件开发。
    ```

* 开通后使用花名账号登陆

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