使用 reveal.js 和 wilddog 實現(xiàn)移動端控制 Web 端 PPT 展示
相信大家工作這么久了，肯定會被要求做PPT等一系列報告，作為前端開發(fā)的熊孩子，我們肯定是喜歡折騰的，想想能夠用web頁面做一份PPT是不是很酷炫，其實在github已經(jīng)有一個不錯的開源的The HTML Presentation Framework,reveal.js,上面會有相應的文檔說明，好了現(xiàn)在有前人已經(jīng)造好的輪子可以直接用了，我們是否可以再加上點什么，能不能用手機端控制網(wǎng)頁版的PPT播放？下面就是我使用reveal.js，wilddog來實現(xiàn)的用手機端控制PPT展示的小demo.
get reveal.js
查看reveal.js上面的文檔說明，然后下載到本地，我們可以根據(jù)文檔和我們想要實現(xiàn)的效果直接修改目錄中的index.html文件，寫完我們的reveal版的PPT后其實就已經(jīng)完成了80%了，因為你完全可以發(fā)布到服務器上直接訪問，并且有很多快捷鍵：F11我們可以全屏查看整個PPT ，ESC 我們能看到所有的幻燈片，S另開一個窗口并有相應的功能，B能暫時隱藏當前展示的內(nèi)容，當開啟mouseWheel: true后就能夠通過鼠標的滑輪來控制頁面展示。
使用revea.js的優(yōu)勢
- 使用前端技術來實現(xiàn)PPT，能夠鍛煉前端技術，充分發(fā)揮自己的能力
- 支持多端展示
- 支持markdown語法，代碼高亮，PDF導出等功能
- 能夠自定義背景為圖片，視頻，GIF等，能夠?qū)Ρ尘暗那袚Q動畫自定義展示
- …
pretty cool!
更多的內(nèi)容可以查看demo
wilddog
其實我這里只是使用了它一個比較強大的功能————實時數(shù)據(jù)同步和通信，在我們在頁面中加入了野狗后，當數(shù)據(jù)庫中的數(shù)據(jù)發(fā)生變化的時候我們就能夠?qū)崿F(xiàn)的在頁面中展示。實現(xiàn)手機web端控制頁面展示的關鍵點就在手機打開頁面對野狗中自己的數(shù)據(jù)庫進行數(shù)據(jù)的改變操作，這樣能夠同步到reveal.js展示的頁面中。
具體步驟如下 ：
1,我們在wilddog注冊賬號后就能新建自己的免費的基于key-value的數(shù)據(jù)庫，wilddog
2,查看wilddog的數(shù)據(jù)庫操作的api文檔
3,編寫頁面的控制器頁面文件（這里只是簡單的實現(xiàn)了上下左右的翻頁指令效果，這里只是試驗了想法的可行性），實現(xiàn)的思路就是當點擊了頁面真的幾個button后對數(shù)據(jù)庫進行set/update操作,改變數(shù)據(jù)庫的某個值，reveal端接受到數(shù)據(jù)變化后進行相應的動作，如下：