generator-live

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

开发流程

1、拉取中控台组件开发仓库 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，开发框架采用 Weex，项目已整合开发、构建工具，脚手架工具维护在 trip-tools/generator-live
2. 每个互动组件相关资源文件收敛在一个目录内，入口文件默认为 entry.we，开发构建 js 输出到 dist 目录，发布前压缩后输出到 build 目录
3. 开发完成后，在 多媒体中心互动组件管理 进行组件录入（若旅客、手淘都投放需要录入为两份）

开发流程

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

$ git clone [e-mail]: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组件开发。
  

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