@sewise-dev 2017-12-12T03:27:05.000000Z 字数 2529 阅读 593

iframe形式引入微录播业务

渠道对接 微录播

更新历史

编号	版本	说明	作者	日期
1	v1.0	1.创建文档	huanghy	2017-12-11

1.参数列表

参数必选类型说明

access_token 是 string 第三方平台鉴权签证

iframe 是 number iframe引入的标识（如:iframe=1）

methodUrl 否 string 接收iframe事件的路径

参数	必选	类型	说明
access_token	是	string	第三方平台鉴权签证
iframe	是	number	iframe引入的标识（如:iframe=1）
methodUrl	否	string	接收iframe事件的路径

2.路径列表

2.1 创建知识点：
第一步：(标识：cut)
a.业务：选择视频（视频上传，视频剪辑，视频合成）
b.路径：http://vtest.sewise.com/weike/make?access_token=XXX&iframe=1&methUrl=http://baidu.com/getMethod.html#/cut
第二步：(标识：choose)
a.业务：选择pdf(上传pdf)
b.路径：http://vtest.sewise.com/weike/make?access_token=XXX&iframe=1&methUrl=http://baidu.com/getMethod.html#/choose
第三步：(标识：zimu)
a.业务：保存项目（视频打点创建知识点、语音识别编辑字幕）
b.路径：http://vtest.sewise.com/weike/make?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html#/zimu
注：完成知识点编辑将会跳转到创建课时页面

2.2 创建课时
第一步：(标识：lecturemake)
方式一：
a.业务：一个空的课时，知识点可以随意组成，由此新建一个课时，未指定课时将默认添加到【默认课程】下
b.路径：http://vtest.sewise.com/weike/MakeWeike?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html#/lecturemake
方式二：
a.业务：在一个swp项目的基础上，编辑知识点，由此新建一个课时，未指定课时将默认添加到【默认课程】下（如：swpid为12345）
b.路径：http://vtest.sewise.com/weike/MakeWeike?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html&swpid=12345#/lecturemake
方式三：
a.业务：再次编辑课时，在原先已经创建好的课时（swl）的基础上，再次编辑知识点（如：swlid为123456）
b.路径：http://vtest.sewise.com/weike/MakeWeike?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html&swlid=123456#/lecturemake
方式四：
a.业务：指定一个课程，添加一个新的课时，编辑知识点（如：courseid为1234567）
b.路径：http://vtest.sewise.com/weike/MakeWeike?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html&courseid=1234567#/lecturemake
第二步：(标识：sharemwei)
a.课时详情(课时名称)，继承上一步的路径，只是改变哈希值（#/sharemwei）
b.路径：http://vtest.sewise.com/weike/MakeWeike?access_token=&iframe=1&methUrl=http://baidu.com/getMethod.html#/sharemwei
注：完成创建课时后，将会跳回到带有课程id的lecturemake页

3.交互过程

3.1 methodUrl

methodUrl为接收iframe事件的路径，该路径指向的应是一个html页面。

3.2 初始化iframe的路径

路径：methodUrl +'?curMethod='+当前页面标识+'&nextMethod='+下一步跳转的页面标识；

3.2 methodUrl指向的页面内容

//示例:
//parent.parent.XX()为交互的关键，该语句将会调用您父级页面上的XX方法；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接收method页面dome</title>
</head>
<body>
<script type="text/javascript">
    var curMethod = GetQueryString("curMethod");//当前当前页面标识
    var nextMethod = GetQueryString("nextMethod");//下一步跳转的页面标识
    switch (nextMethod) {
        case 'lecturemake':
            parent.parent.XX(); //XX()方法为自主平台定义的方法，您可以在参照此种方式扩展您的业务
            break;
        case 'sharemwei':
            parent.parent.XX(); //XX()方法为自主平台定义的方法，您可以在参照此种方式扩展您的业务
            break;
        default:
            alert("访问失败！参数不正确。");
            break;
    }
    //获取URL参数
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return '';
    }
</script>
</body>
</html>