* 需要提供入口名称、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"
            }
        }
    ]
}

播放端互动层前端开发流程

实现思路

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

开发流程

1、拉取 trip/h5-live-wemodules 仓库并安装依赖

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

2、使用 trip-tools/generator-live 脚手架初始化玩法模块，选择 播放端交互组件，按提示配置

$ yo live

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

$ grunt dev

4、组件开发，框架选用 Weex，src/common 中封装了一些常用方法

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

grunt prepub

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

grunt publish

配置&使用流程

7、进入多媒体中心互动组件管理，在对应环境下完成组件配置（配置示例、权限申请见下方）

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

配置示例

新增组件入口及环境切换：
新增组件配置：
- 组件名：即是脚手架生成的组件名，对应组件目录名称
- 环境：当前所处线上/预发/日常环境，不可更改
- 版本：SDK 版本，目前默认写 2，若未来 SDK 版本更新，需要做组件适配并重新录入
- App：互动组件需要露出的客户端，旅客 alitrip/手淘 taobao，若要两端露出见下面注意部分
- 来源：组件主要用途，目前旅客只涉及直播，默认填 LIVE
- 分类：业务分类，组件管理平台不适用，可按组件业务线填写，如机票 flight，通用 common
- type：组件类型，旅客默认都用 weex，默认填 WEEX
- 横屏代码：从 build 目录拷贝对应构建压缩后代码并填入此处
- 竖屏代码：同上，旅客目前主要填竖屏代码即可
注意：
- 来源、type 两个字段为全大写
- 同一个组件名可以分版本、App、来源录入多个组件
- 若一个交互组件既要在手淘中露出，又要在旅客中露出，则需要按不同 App 录入两份，基于此也可以实现不同端间的差异化

权限申请

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

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

开通后使用花名账号登陆

Keywords

FAQs

Is generator-live popular?

Is generator-live well maintained?

Package last updated on 30 Aug 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install