From 4b94a8ee6bb99b5c3d47617a6f20f050762919aa Mon Sep 17 00:00:00 2001 From: liujiangnan <695541723@qq.com> Date: Fri, 27 Dec 2019 21:34:42 +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 | 126 +++++++++++++++++++++++++++++++-- src/app/play/play.component.ts | 1 + 2 files changed, 123 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f51980f..c2a833a 100644 --- a/README.md +++ b/README.md @@ -27,17 +27,135 @@ npm start ## 项目结构 |-- bin - |-- dist |-- e2e |-- node_modules |-- publish |-- src - | |-- app - +| | |-- common +| | |-- form +| | |-- pipes +| | |-- play +| | |-- services +| | |-- style +| | |-- app.component.html +| | |-- app.component.scss +| | |-- app.component.ts +| | |-- app.module.ts | |-- assets +| |-- environments +| |-- services +| |-- index.html +| |-- main.ts +| |--....... + + + +* å…¶ä¸ play 文件夹是H5模æ¿å±•示页é¢ï¼Œform文件夹是模æ¿çš„é…ç½®é¡µé¢ +* common文件夹是以往åšè¿‡çš„æ¨¡æ¿ç§¯ç´¯çš„一些比较常用的 AngularJs 的组件 +* assetsæ–‡ä»¶å¤¹å˜æ”¾æ¨¡æ¿æ ·å¼çš„陿€èµ„æºï¼Œä¾‹å¦‚å°å›¾æ ‡ã€èƒŒæ™¯å›¾ç‰‡ã€å—ä½“ã€æ ·å¼ç‰ç‰ +* 其他文件夹开å‘者å¯ä»¥ä¸åšä»»ä½•更改 + +## å¼€å§‹å¼€å‘ + +本脚手架的页é¢ç±»UI框架是基于 [NG-ZORRO](https://ng.ant.design/docs/introduce/zh "With a Title") 框架实现的,在é…置页é¢ï¼ˆform文件夹),一些表å•è¾“å…¥ï¼Œä¸Šä¼ å›¾ç‰‡ç‰ç»„件也å¯ä»¥ä½¿ç”¨ NG-ZORRO 现æˆçš„组件 + +### å¼€å‘é…置页é¢ï¼ˆform/) + +é…置页é¢ä¸»è¦ä½œç”¨æ˜¯ä¸ºäº†å‘ˆçŽ°å¤šæ ·åŒ–æ¨¡æ¿ï¼Œæé«˜H5模æ¿çš„高å¤ç”¨æ€§ã€çµæ´»æ€§æä¾›çš„一个é…ç½®å·¥å…·ï¼Œæ ¹æ®H5模æ¿çš„设计规划或特性,会规定æŸäº›å…ƒç´ 是å¯ä»¥é…置的,比如背景图片ã€éŸ³é¢‘ã€é€‰é¡¹ã€æ ‡é¢˜ç‰ç‰ç‰ç‰ã€‚(课件制作者) 通过é…置页é¢ï¼Œå°±å¯ä»¥çµæ´»çš„æ›´æ¢è¿™äº›ï¼Œä»Žè€Œå½¢æˆå¤šç§å¤šæ ·çš„课件。 + + +é…置页é¢çš„å¼€å‘è¦æ±‚很简å•,我们ä¸å…³å¿ƒå¸ƒå±€ã€æ ·å¼ã€äº¤äº’ç‰æ‰€æœ‰å®žçŽ°ç»†èŠ‚ä¸Žæ•ˆæžœï¼Œåªéœ€è°ƒç”¨ä¸¤ä¸ªå†…置的全局接å£å³å¯ï¼š + +* setData 接å£ï¼Œç”¨äºŽå°†é…置的数æ®å˜å‚¨åˆ°äº‘端。 + + æ¤æ–¹æ³•是一个异æ¥çš„æ–¹æ³•,接收三个必è¦å‚æ•° + + obj: 一个json对象 + + callback: 回调函数 + + t_name: 模æ¿åç§° + + 一般使用例å如下: + + ``` + // tsè¯æ³•,ä¸èƒ½ç›´æŽ¥ä½¿ç”¨jsçš„window对象自定义方法 + (<any> window).courseware.setData(obj, callback, t_name); + ``` + +* getData 接å£ï¼Œç”¨äºŽå½“点击修改的时候将é…置的数æ®ä»Žäº‘端获å–下æ¥ã€‚ + + æ¤æ–¹æ³•是一个异æ¥çš„æ–¹æ³•,接收两个必è¦å‚æ•° + + > callback: 回调函数, 回调函数里会得到云端ä¿å˜çš„æ•°æ® + + > t_name: 模æ¿åç§° + + 一般使用例å如下: + + ``` + // tsè¯æ³•,ä¸èƒ½ç›´æŽ¥ä½¿ç”¨jsçš„window对象自定义方法 + const getData = (<any> window).courseware.getData; + getData((data) => { + //data 就是云端获å–的数æ®ï¼Œä¹Ÿå°±æ˜¯setData方法å˜åˆ°äº‘端的那个obj + //模æ¿å¼€å‘è€…éœ€è¦æ ¹æ®æ•°æ®ï¼Œä¾æ¬¡å¡«å†™åˆ°è¡¨å•的相应ä½ç½®ï¼Œæ–¹ä¾¿ç”¨æˆ·äºŒæ¬¡ä¿®æ”¹ç¼–辑 + }); + ``` + +### å¼€å‘展示页é¢ï¼ˆplay/) + +展示页é¢ä¸»è¦æ˜¯å‘ˆçŽ°æ¨¡æ¿ï¼Œé€šè¿‡H5æŠ€æœ¯ï¼Œå®žçŽ°å¤šæ ·åŒ–çš„äº¤äº’ä¸Žå±•ç¤ºæ–¹å¼ã€‚ + + +å±•ç¤ºé¡µé¢æ›´ç®€å•,开å‘者å¯ä»¥è¿ç”¨å„ç§æŠ€æœ¯ï¼Œå®žçŽ°Web端å¯ä»¥å®žçŽ°çš„ä»»ä½•æ•ˆæžœï¼ŒåŒ…æ‹¬2Dã€3Dã€åŠ¨ç”»ã€æ¸¸æˆç‰å„ç§åœºæ™¯ï¼ŒæŠŠè¡¨å•é…置的数æ®èŽ·å–到,用于渲染相对应的页é¢å³å¯ï¼š + +* getData 接å£ï¼Œç”¨äºŽå½“点击修改的时候将é…置的数æ®ä»Žäº‘端获å–下æ¥ã€‚ + + æ¤æ–¹æ³•是一个异æ¥çš„æ–¹æ³•,接收两个必è¦å‚æ•° + + > callback: 回调函数, 回调函数里会得到云端ä¿å˜çš„æ•°æ® + + > t_name: 模æ¿åç§° + + 一般使用例å如下: + + ``` + // tsè¯æ³•,ä¸èƒ½ç›´æŽ¥ä½¿ç”¨jsçš„window对象自定义方法 + const getData = (<any> window).courseware.getData; + getData((data) => { + //data 就是云端获å–的数æ®ï¼Œä¹Ÿå°±æ˜¯setData方法å˜åˆ°äº‘端的那个obj + //模æ¿å¼€å‘è€…éœ€è¦æ ¹æ®æ•°æ®æ¥æ¸²æŸ“或控制展示页é¢çš„呈现,达到模æ¿çš„互动目的 + }); + ``` + + + ### 补充方法 + + 在模æ¿çš„编辑或展示过程ä¸ï¼Œè¿˜ä¼šç»å¸¸é‡åˆ°å¦‚下两个场景,特æä¾›é’ˆå¯¹æ€§çš„解决办法 + + 1) 表å•录入往往需è¦ä¸Šä¼ 图片ã€éŸ³è§†é¢‘ç‰å¤šåª’体文件,所以脚手架内置如下方法,用于获å–ä¸€ä¸ªä¸Šä¼ åˆ°äº‘ç«¯çš„æŽ¥å£æ–¹æ³• + + ``` + const uploadUrl = (<any> window).courseware.uploadUrl; + const uploadData = (<any> window).courseware.uploadData; + + //例如用于NG-ZORROçš„ä¸Šä¼ ç»„ä»¶åˆ™å¦‚ä¸‹å†™æ³•ï¼š + <nz-upload class="p-image-uploader" [nzDisabled]="disableUpload" + [nzShowUploadList]="false" + nzAccept = "image/*" + [nzAction]="uploadUrl" <!-- 注æ„这里 --> + [nzData]="uploadData" <!-- 注æ„这里 --> + (nzChange)="handleChange($event)"> + </nz-upload> -||-- environments + ``` + 2) 在展示页é¢åŠ è½½å®Œæˆçš„æ—¶å€™ï¼Œéœ€è¦è°ƒç”¨ä¸€ä¸‹ä¸‹é¢çš„æ–¹æ³•,用于释放切æ¢è¯¾ä»¶çš„é®ç½©å±‚ + ``` + //æ¤æ–¹æ³•为固定写法, + //å…¶ä¸t_name为模æ¿å称,obj是云端å˜å‚¨çš„é…ç½®æ•°æ® + window["air"].hideAirClassLoading(t_name,obj); + ``` \ No newline at end of file diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index f58012d..52c4ddd 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -377,6 +377,7 @@ export class PlayComponent implements OnInit, OnDestroy { // é¢„åŠ è½½èµ„æº this.loadResources().then(() => { + window["air"].hideAirClassLoading(this.KEY,this.data); // this.setfontData(); this.init(); this.update(); -- 2.21.0