基於React+Koa實現一個h5編輯器

原創

2020-11-02 17:18

{ logoText }

\n})\n複製代碼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的Header組件的props屬性完全是由我們之前設計的json結構來定義的，在用戶編輯的過程中將收據收集並傳給Header組件。最後一步是將這些組件動態傳給"},{"type":"text","marks":[{"type":"strong"}],"text":"dynamic"},{"type":"text","text":"組件，這塊在上文也介紹過了，大家可以根據自己的實現來做動態化渲染。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"實現預覽功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"預覽功能這塊比較簡單, 我們只需要將用戶生成的json數據丟進H5渲染器中即可, 這裏我們需要做一個渲染頁面單獨用來預覽組件. 先來看看幾個預覽效果:"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/cc2a3120fa3e9f91b8e4232ddba0b634.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/56/56dcc4129cf232980c2828be4ac04fbe.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面的渲染器原理已經介紹了, 這裏就不一一介紹了,感興趣的可以交流討論."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"實現在線下載功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在線下載這塊我們需要用到一個開源庫: "},{"type":"text","marks":[{"type":"strong"}],"text":"file-saver"},{"type":"text","text":", 專門解決前端下載文件困難的窘境. 具體使用舉例:"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"var FileSaver = require('file-saver');\nvar blob = new Blob([\"Hello, world!\"], {type: \"text/plain;charset=utf-8\"});\nFileSaver.saveAs(blob, \"hello world.txt\");\n複製代碼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上代碼可以實現將傳入的數據下載爲txt文件, 如果是Blob, 是不是還能在線下載圖片, html呢? 答案是肯定的, 所以我們的下載任務採用該方案來實現."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"後端部分實現"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後端部分由於涉及的知識點比較多, 不是本文考慮的重點, 所以這裏大致提幾個點, 大家可以用完全不同的技術來實現後臺服務, 比如說"},{"type":"text","marks":[{"type":"strong"}],"text":"PHP"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"Java"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"Python"},{"type":"text","text":"或者"},{"type":"text","marks":[{"type":"strong"}],"text":"Egg"},{"type":"text","text":". 筆者這裏採用的是"},{"type":"text","marks":[{"type":"strong"}],"text":"koa"},{"type":"text","text":". 主要實現功能如下:"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"保存模板"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真機原理的數據源存儲"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶相關功能"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"H5圖牀和靜態文件託管"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體代碼可以參考筆者的另一篇全棧開發文章"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"基於nodeJS從0到1實現一個CMS全棧項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"模式基本一致."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"github地址："},{"type":"link","attrs":{"href":"https://github.com/MrXujiang/h5-Dooring","title":null},"content":[{"type":"text","text":"Dooring傳送門"}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"後期規劃"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後期"},{"type":"text","marks":[{"type":"strong"}],"text":"Dooring"},{"type":"text","text":"項目規劃如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"豐富組件庫組件，添加可視化組件"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加配置交互功能"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組件細分和代碼優化"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加PC端搭建平臺"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加表單設計平臺"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加typescript支持和單元測試"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"最新迭代功能"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優化H5編輯器界面"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加可視化組件——進度條"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修復win下預覽樣式問題，添加移動端訪問出現提示頁"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"最後"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果想學習更多"},{"type":"text","marks":[{"type":"strong"}],"text":"H5遊戲"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"webpack"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"node"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"gulp"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"css3"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"javascript"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"nodeJS"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"canvas數據可視化"},{"type":"text","text":"等前端知識和實戰，歡迎在《趣談前端》一起學習討論，共同探索前端的邊界。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}