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