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" } } ] }
播放端互动层前端开发流程
实现思路
- 航旅互动玩法交互层前端开发库为 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
字段填入组件名
配置示例
新增组件入口及环境切换:
新增组件配置:
注意:
- 来源、type 两个字段为全大写
- 同一个组件名可以分 版本、App、来源 录入多个组件
- 若一个交互组件既要在手淘中露出,又要在旅客中露出,则需要按不同 App 录入两份,基于此也可以实现不同端间的差异化
权限申请
联系接口人 @石泉,标准话术 from @迟伤:
石泉, http://dmtzj.taobao.com/componentErrorPage.htm 这个“多媒体中心互动组件管理”,帮忙开一下权限吧。 航旅前端,直播共建做互动层的weex组件开发。
开通后使用花名账号登陆