generator-live v0.1.12

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 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 字段填入组件名

配置示例

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

• 新增组件配置：

• 注意：

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

权限申请

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

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

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