From a87aa9e6eaf1e666bcade9ebe0046e3b0dafe177 Mon Sep 17 00:00:00 2001
From: liujiangnan <695541723@qq.com>
Date: Thu, 27 Feb 2020 02:11:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)

diff --git a/README.md b/README.md
index 23f62a7..85bfdd4 100644
--- a/README.md
+++ b/README.md
@@ -154,6 +154,101 @@ npm start
   });
   ```
 
+  ### 互动课件
+
+  通过H5的交互方式,我们可以很轻松的制作在线的互动课件,使老师端与学生端实现联动,使在线课堂更具有交互性。
+
+  * onEvent 定义事件:用于自定义同步事件,配合多端互动使用,与sendEvent方法配合使用,用于监听多端发送的同步事件
+
+  参数
+
+  > evtName : 自定义事件的名称
+
+  > callback : 回调函数,回调函数里会得到传过来的数据
+
+  使用例子:
+
+  ```
+  const cw = (<any> window).courseware;
+  //订阅一个事件
+  cw.onEvent('testEvent', (data,next) => {
+    console.log(data); 
+    //处理事件的同步逻辑
+
+    //在逻辑处理完之后一定要执行next方法,用于解锁事件队列
+    next();
+  }); 
+  ```
+
+  * sendEvent 发送事件:用于自定义同步事件,配合多端互动使用,与onEvent方法配合使用,用于对端发送同步事件
+
+  参数
+
+  > evtName : 自定义事件的名称
+
+  > data : 传递的参数 
+
+  使用例子:
+
+  ```
+  const cw = (<any> window).courseware;
+  //发送事件
+  //这样,所有端(教师、学生) 都会触发 testEvent 方法
+  cw.sendEvent('testEvent', 'Hello world'); 
+
+  ```
+
+  * storeAspect 存储切面数据: 课件的切面状态数据;互动课件需要每一个开发者设计切面状态,用于学生进入已经进行的课件,恢复课件同步。例如老师讲图片轮播到第四页,这个时候学生进入教师,要恢复到第四页,才能跟老师同步上课。
+
+  参数
+
+  > data : 保存的数据,一个JSON对象
+
+  使用例子:
+
+  ```
+  const cw = (<any> window).courseware; 
+  //存储切面数据,用于学生进入教室,同步课堂信息等
+  cw.storeAspect({page: 5}); 
+  ```
+
+  * getAspect 获取切面数据: 课件的切面状态数据;互动课件需要每一个开发者设计切面状态,用于学生进入已经进行的课件,恢复课件同步。例如老师讲图片轮播到第四页,这个时候学生进入教师,要恢复到第四页,才能跟老师同步上课。
+
+  参数
+
+  > callback : 获取切面数据的回调函数
+
+  使用例子:
+
+  ```
+  const cw = (<any> window).courseware; 
+  //存储切面数据,用于学生进入教室,同步课堂信息等
+  cw.getAspect(function(aspect){
+    //恢复切面状态的逻辑
+  }); 
+  ```
+
+  * 补充项
+
+  1)  有时候我们在实现模板效果的时候,需要当前用户数据,比如,老师会显示某个按钮,而学生不显示,我们可以用如下方式获取教室信息
+
+  ```
+  //获取教室信息,值得注意的是获取这个信息一定要再 getData方法之后,或者确保页面完成之后
+  let airClassInfo = window["air"].airClassInfo;
+  ```
+
+  2)  互动课件的 getData 方法的回调函数里多返回了一个切面参数,类似如下:
+
+  ```
+  const getData = (<any> window).courseware.getData;
+  getData((data, aspect) => {
+    //data 就是云端获取的数据,也就是setData方法存到云端的那个obj
+    //aspect 切面参数,用于恢复页面的状态
+    //模板开发者需要根据数据来渲染或控制展示页面的呈现,达到模板的互动目的 
+  });
+  ```
+
+
 
   ### 补充方法
 
-- 
2.21.0