因為是一個人開發(fā)，來來回回折騰了快2年，終于開發(fā)完成，Ezine小程序電子雜志編輯器是針對于B端客戶研發(fā)的一款編輯器，由PC端編輯器和小程序解析器構成，僅支持小程序下的電子雜志，以非開源方式服務于B客戶。服務對象需要具有一定的美編功底。因只面對B端美編，編輯器不再考慮C端普通用戶使用體驗，則功能及操作設計會更簡潔高效，上手后能大幅度提升雜志編輯效率。另外我們也花費了大量的精力提升C端用戶在小程序的使用體驗和性能提升。

測試地址：（目前僅支持chrome瀏覽器）

https://ezine.blankpage.site/DataEdit.aspx?token=XmKZmuY6dUUuw9HPon9XsjL1TBZQLlWxHNsLeqlnhKUZlRSR116q9KDQY%2ffPbcCd

• 產品特點

1. 所見即所得

編輯器采用所見即所得方式，90%工作都是通過鼠標單擊、雙擊、拖拽來完成的?？赏ㄟ^掃二維碼在小程序中預覽效果，在編輯器下掃碼后小程序端會有刷新按鈕，后面每次刷新即可看到最新結果。

1. 原生小程序支持

本編輯器開發(fā)目標即針對小程序來做，充分利小程序自身優(yōu)勢以解決H5在微信下的先天不足。如：全屏瀏覽，小程序下原生組件應用，小程序API接口使用，小程序內部跳轉、視頻號等等。

1. 性能問題

項目前后經(jīng)過兩次重構，重點解決了擴展性、兼容性、性能三大問題，目前客戶做的最大電子雜志：資源包300+M、共60頁，400+組件動畫，小程序下可流暢瀏覽，客戶反饋良好。預計500M資源，100頁以內雜志問題不大。

1. 操作簡潔

編輯面板構建時就參考了市面大量的編輯器，重新梳理后化繁為簡，編輯器所有組件屬性都可直接看到并操作，可一次點擊即完成屬性設置，解決市面上編輯器需要大量二次或多次點擊才能完成設置。排序類功能全部為拖拽方式實現(xiàn)。并支持鍵盤事件的：拷貝、粘貼、刪除、撤銷、微調、保存等操作。工作效率至少提升20%以上。

1. B端支持特性

加入B端用戶才要考慮的特性，比如顯示當頁雜志總字節(jié)數(shù)，每張圖片字節(jié)數(shù)，并設定不同顏色警告，以方便編輯盡快找到并更換過大尺寸的圖片。另外：支持短屏/長屏雜志混排模式，支持左右/上下滑動翻頁功能，支持自定加載圖標，支持背景音樂，支持自定義分享內容及圖片，支持生成雜志目錄，支持長文滑動觸發(fā)動畫等。

1. 資源載入

可動態(tài)設置載入多少資源進入指定頁碼，使得資源未加完成后時，即可瀏覽，以減少用戶等待時間。如設置50%，100M的資源在小程序下通過8線程全速加載到50%的資源量(小程序最多支持10線程)，即進入指定頁碼，在即將進入指定頁碼前，線程數(shù)量直接減為慢速2線程。釋放出最大CPU片段以減少卡頓，提升用戶瀏覽體驗。對于重復使用的圖片，加載時也會做判重處理。

1. 原生JS開發(fā)

編輯器：為原生的JS開發(fā)，未引用任何第三方代碼，120K左右JS代碼支撐整個編輯器。經(jīng)歷過2次項目重構，使得編輯具有了極強的擴展性。

小程序解析器：以組件方式引用，JS+CSS大小為40K左右。版本更新一般整體替換組件目錄即可,非常方便。

1. 字體抽取

設置字體后，在保存時會將整本雜志同類字體匯總，然后去對應字體包中抽取所使用的文字。10M的字體包在抽取出所用字體后，包的大小一般在2Kb-100Kb之間，使得小程序端的字體加載效率直線飆升50-200倍左右。

1. 動畫應用

2. 小程序下的動畫并非通過SetData方式運行，使得動畫執(zhí)行非常高。多個動畫并行不會有卡頓問題。

3. 支持用戶通過下拉滑動來動態(tài)觸發(fā)當前屏的動畫，使用戶下拉瀏覽過程中體驗絲滑動畫。

4. 任意組件都可掛載進場、循環(huán)、退場動畫。如字體、圖片、視頻、焦點滾動圖等。

5. 任意彈出組件也支持彈出時的進場、循環(huán)，和關閉彈窗時的退場動畫。

6. Svg格式

支持SVG素材的使用，使得各類SVG形狀和動畫可以在小程序下使用，用戶可自行上傳SVG素材，且在編輯器下可編輯部分Svg素材的屬性。

1. 項目整合（同客戶自身項目）

項目可部署于客戶的線上服務器或域網(wǎng)中，并開放接口同客戶自身后臺完美整合。兩種整合方式：1.由客戶后臺來管理雜志，編輯器變?yōu)闊o數(shù)據(jù)庫方案。2.由編輯器自身管理雜志，客戶后臺調用創(chuàng)建、刪除、編輯等接口。另外：編輯器產生的內容除自身備份一份，會同步至OSS一份。

1. 多人編輯

一本大的雜志會由多個編輯共同來完成。編輯器以分段編輯再合并的方式，支持多人同時對一本雜志進行編輯?？稍诙唐趦瓤焖偻瓿纱笮碗s志的編輯工作。

1. 安全問題

項目通信采用DES加密方式進行，且項目本身可做到在域網(wǎng)內無數(shù)據(jù)庫運行，編輯器端任意保存都會生成備份，且同步多端備份。Oss端可設置為不可刪。

• PC端編輯器面板拖拽及縮放

所有面板位置都可通過拖拽調整，雙擊面板頭部，則面板變?yōu)樽钚』?/p>

• 通用屬性面板 (單擊/拖拽)

場景中的任意組件單擊選中后，可直接拖拽調整位置，通過四周控制進行縮放（支持等比和非等比），通用面板于設定組件的位置、尺寸、透明、旋轉、填充寬、填充色、邊線寬、邊線色、圓角、陰影。該面板為全局通用，支持任意組件。其中尺寸和位置：1.可通過場景中拖拽組件直接調整；2.也可通過輸入數(shù)值調整；3.支持鍵盤的（↑→ ↓ ←）進行微調;

• 二次編輯（雙擊）

為方便用戶快速二次編輯，將二次編輯功能設置為在組件上雙擊，如：圖片雙擊可換圖，文字雙擊編輯文字，視頻雙擊換視頻，焦點圖雙擊添加新圖（焦點圖組件自帶排序和刪除功能）等

• 組件面板

目前支持的組件有圖片、文字、普通視頻、在線視頻、焦點圖、下拉長圖、下拉長文等組件模式。通過點擊即可將對應組件插入到編輯場景中。另外面板中整合了片段代碼管理（用于多人并發(fā)編輯）和保存按鈕。其中圖片上傳不做壓縮處理，壓縮會導致圖片質量不在編輯控制下，圖片支持單次上傳多圖。

• 分頁面板

分頁面板用于創(chuàng)建雜志的分頁

支持：分頁的新增、刪除、拖拽排序功能。另外分頁中的組件會隨場景中組件的變動同步變動。分頁左上角為頁碼，可通過為組件設置跳轉頁面，點擊后即可跳轉至對應的分頁。

分頁面板尾部為二維碼，該二維碼支持：主雜志預覽、分頁雜志預覽、線上版小程序預覽、體驗版小程序預覽（通過鏈接識別用戶身份）

• 全局及單頁面板

該面板在點擊頁面任意空白位置時出現(xiàn)。

全局設置：資源加載設置（資源加載至百分比進入場景），小程序下分享用的標題及圖片、背景音樂和音樂圖標、資源加載時的圖標、左右切換/上下切換開關。另外可設置全局的背景圖和背景色。鼠標移動至面板設置框時會有提示用法。

單頁設置：當前的標題、圖標（主要用于在小程序下生成目錄，不填則不會出現(xiàn)在目錄中），當前面的背景色和背景圖，短文/長文模式開關

• 私有特性面板

點擊場景中不同的組件：私有面板會切換至對應組件的私有屬性設置，比如：

文字：私有樣式15種：字體、字色、加粗、斜體、下劃線、距左、距右、距中、字號、行距、字距、陰影模糊度、陰影顏色、水平陰影、垂直陰影；并支持7種跳轉：跳至指定小程序、跳至指定小程序指定頁面、跳至H5頁面、跳至當前雜志指定頁碼、跳至視頻號、跳至視頻號指定視頻、跳至視頻號指定直播；

圖片：長按保存開關，對圖片設置：模糊、亮度、對比、飽和、去色、色相、反色、褐色。另外跳轉同文字；

視頻：自動播放、循環(huán)播放、顯示進度控制等開關；

焦點圖：切換間隔、狀態(tài)指示開關、切換方向開關；

下拉長圖（文）：隱藏滾動條開關、長按保存開關（小程序下功能）；

Svg素材：鎖定比例、素材中所有顏色設置、陰影模糊度、陰影顏色、水平陰影、垂直陰影、跳轉同文字；

• 動畫面板

動畫面板支持進場、循環(huán)、退場三種類型動畫；每類動畫都可設置速度、延遲執(zhí)行；其中循環(huán)動畫有循環(huán)次數(shù)設置；進場動畫支持32種效果；循環(huán)動畫支持10種效果；退場動畫支持14種效果。直接點擊即可對組件設置動畫。

動畫面板在單獨設置組件動畫時，會動態(tài)演示該組件的動畫效果。面板上方的進場、循環(huán)、退場按鈕，可針對該場景用所有的組件，同時進行動畫效果。

另外如果該頁面為長文，小程序下會根據(jù)下拉滑動來動態(tài)觸發(fā)動畫。以防止頁面過長，用戶未下拉，動畫已經(jīng)播放完的問題。

另外彈窗也支持動畫，點擊按鈕后，彈窗以動畫入場然后執(zhí)行循環(huán)動畫。當關閉窗口后，則執(zhí)行退場動畫

• 層級面板

層級面板會顯示當前場景中所有組件，并顯示當前選中組件：可對場景中組件鎖定（鎖定后不可操作），隱藏（如彈窗圖片過大，需要隱藏，以防遮蓋其它組件），刪除組件，圖片類組件的字節(jié)數(shù)（美編常誤傳未壓縮大圖，可通過此處快速定位到過大圖片更換），進場/循環(huán)動畫狀態(tài)、彈窗管理（用于管理哪個組件作為按鈕，哪個組件作為彈窗，成對出現(xiàn)），可通過拖拽調整組件的層級（解決遮蓋問題）。

面板上方顯示本頁面所有圖片的字節(jié)數(shù)。右上角藍色小點為解除本頁所有彈窗關聯(lián)。

• 素材面板

素材面板主要用于管理SVG素材，支持素材分類的擴展，支持用戶手動上傳.svg素材，通過素材的私有面板面可對指定的素材進行變形/顏色的二次編輯。

素材本身也可以是支持動畫的素材, 素材也可搭配頁面中的動畫、陰影等設置。來實行酷炫的動畫效果。注意：素材不支持雙擊編輯。

• 鍵盤事件

鍵盤事件主要功能為提升工作效率

復制ctrl+c：復制會包含被復制對像的所有屬性，如位置、大小、動畫等，如果圖片復用，也可用復制；

粘貼ctrl+v：粘貼時會將復制的組件所有屬性繼承，支持粘貼至非當前場景；

撤銷ctrl+z：撤銷支持任意操作的撤銷；

保存ctrl+s；微調方向鍵↑→ ↓ ←；刪除del；

• 場景/輔助線

支持短屏和長屏模式下的背景參考網(wǎng)格，一般小程序端按750寬設計，所以輔助線每格的寬高都為25px，支持吸附特性，組件在接近參考網(wǎng)格3px時候會被吸附至對應網(wǎng)格上。支持屏幕組件在場景左右居中和上下居中的吸附，常規(guī)拖拽時在右上角做綠色延長參考線。另外支持鍵盤和面板對組件位置的微調，微調時吸附功能無效。

• 小程序端解析器

1. 核心

小程序端解析的核心思想為：兼容和性能，因為無法預計客戶會做出多么復雜的雜志。所以必須將兼容性和性能放至第一位，如果一個功能無法同時滿足此兩點，一般不會納入到規(guī)劃中。

1. 客戶小程序引用

提供一個組件目錄，40K右右，組件自身為全屏，直接引用該組件即可?？蛻粢虢M件的頁面需要提供如下參數(shù)：eid雜志ID，uid作者ID，pid默認跳轉至指定頁碼。在提供組件時同進提供引入demo頁。組件在運行過程中會同父級通信。同步當前組件的狀態(tài)。

1. 加載器

Json加載：先加載需要解析的json，該json經(jīng)后臺壓縮后，比編輯器所用json體積少1倍左右。

資源加載：通過對json的解析，抽取資源路徑，開始8線程全速下載，并同時附帶loading的動畫。圖片、字體、素材等會直接下載至手機端緩存中。資源加載完成后，進入場景。但如果設置加載進度非100%，則加載至對應的百分比，進入場景，將線程減少并完后后續(xù)加載，當用戶直接跳轉至未被加載資源的頁面時，會動態(tài)停止該頁所有的資源加載，頁面將以直接請求網(wǎng)絡方式來獲取所用的資源。

1. 解析器

解析器將后臺傳來的json解析為對應樣式、屬性并關聯(lián)至所有的展示節(jié)點中。解析器為預解析，以減少用戶在瀏覽過程中動態(tài)解析造成的性能損耗。解析過程會在資源加載時同步進行。

1. 頁碼/狀態(tài)管理

頁碼管理主要為當前和下一頁的狀態(tài)管理，支持頁碼跳轉，手勢翻頁事件，前端左右滑動、上下滑動時狀態(tài)展示等。另外也會根據(jù)頁碼來重置目標頁至初始狀態(tài)，如：動畫。

1. 動畫管理

動畫管理會比較復雜：

1. 常規(guī)動畫：從入場、循環(huán)、退場三段動畫順序播放；

2. 滑動觸發(fā)動畫：根據(jù)滑動下拉條進度。輪詢組件位置，并觸發(fā)動畫入場、循環(huán)、退場播放，因為在下拉過程一邊滑動，一邊輪詢，一邊執(zhí)行動畫，性能消耗極大，此處建立了較多的機制來防止空輪詢。

3. 彈窗動畫：彈窗動畫默認不顯示，不走常規(guī)動畫和下拉觸發(fā)機制，只在通過點擊觸發(fā)后才進入動畫，并且只播放入場、循環(huán)動畫。在彈窗關閉時會二次觸發(fā)退場動畫。

1. 音頻管理

音頻綁定在全局數(shù)據(jù)中，以防止多個雜志頁面同時播放，且當前打開頁無權管理其它頁面音頻的問題，一般同時只能有一個音頻的播放。另外如果頁面中有視頻播放時，音頻會自動關閉，當跳至新頁無視頻時，音頻會重新開啟。另外就是音頻圖標和用戶手工關閉音頻播放的管理。

1. 彈窗管理

彈窗彈出時，需要確保組件為最上層，在其下有一個半透明背景，通過點擊半透明背景關閉彈窗。同一時間只允許一個彈窗出現(xiàn)。彈窗管理主要為層級和彈窗事件管理，彈窗動畫在動畫管理中處理。另外半透明背景也為動畫方式淡出和淡入。

1. 跳轉管理

用于各組件點擊后的跳轉，支持7種跳轉：跳至指定小程序、跳至指定小程序指定頁面、跳至H5頁面、跳至當前雜志指定頁碼、跳至視頻號、跳至視頻號指定視頻、跳至視頻號指定直播。H5跳轉需要配置白名單，視頻號跳轉需要客戶端小程序開通了視頻號。

1. 其它

如px轉rpx(小程序自身轉換精度不足，會導致錯位)，Base64轉換，目錄管理，圖片長按保存，刷新等等的輔助功能。

• 編輯服務器后端

1. 綜述

服務器端采用.NET開發(fā)，支持有數(shù)據(jù)庫和無數(shù)據(jù)庫兩種版本。無數(shù)據(jù)庫版不做雜志管理，僅做雜志生成和編輯，有數(shù)據(jù)庫版本可做雜志簡單的雜志管理，如增減刪等。整個項目可部署于外網(wǎng)或公司內網(wǎng)。整體功能來說服務端壓力并不大。

1. 加解密

編輯器同客戶后臺通信采用DES加密，秘串中包含創(chuàng)建或打開雜志必須的數(shù)據(jù)。客戶后臺在用戶瀏覽器種特征碼，特征碼提取數(shù)據(jù)會包含在秘串中。由編輯器解密并查找特征碼，以確保是同一用戶。編輯器自身數(shù)據(jù)傳遞使用AES加密。

1. 字體抽取

字體抽取采用google提供的字體抽取方案。實際應用后效果比較理想。但會有小概率出現(xiàn)提取字體包中不包含的字體，導致無法提取的問題。

1. JSON壓縮

編輯器使用一份完整版本的Json，解析器使用壓縮過的json，數(shù)據(jù)量相差1倍左右。過大會導致小程序加載json時間變長。為減少用戶等待焦慮，小程序必須能夠快速加載到json并進入到資源加載讀數(shù)狀態(tài)；

1. 資源上傳

Oss:?所有上傳資源都會同步至OSS，小程序使用OSS資源。OSS安全設置為寫、改權限。不可刪除。

圖片：壓縮后質量不可控，已調整為由編輯手工控制，編輯器和OSS各存一份；
字體：保存時會抽取所有頁面使用到的字體，匯總后抽取，編輯器和OSS各存一份；

Svg：Svg格式小程序端只能遠程引用，同img引用方式一樣。編輯器和OSS各存一份；

Json：數(shù)據(jù)每次保存時，會創(chuàng)建當前時間命名的備份，然后再生成正式json。兩種數(shù)據(jù)在編輯器和oss各存一份。

判重：服務器端在每次上傳文件時，會提取特征碼比對，以確保不會大量重復上傳內容。

• 編輯器JS類結構

基礎服務：非獨立類文件，提供通用基礎支持方法。如唯一ID生成、文件上傳、圖片加載，數(shù)據(jù)雙向綁定等服務。

項目初始化類：浮動面板、編輯區(qū)排版/縮放、初始化所有業(yè)務類

分頁管理類：所有分頁的創(chuàng)建、排序、刪除、組件插入頁面的解析，新增組件接口、頁碼轉json等處理。

組件管理類：其下拆分子類：圖片類、文本類、素材類、滾動文字類、滾動圖類、視頻類、焦點圖類，這些子類都實現(xiàn)些通用方法（如新增、編輯、json解析，數(shù)據(jù)綁定至面板，生成撤銷閉包等），子類之間無關聯(lián)，后期擴展非常方便。

通用樣式類：所有組件共用的屬性，對當前選中組件長、寬、位置、透明、旋轉等屬性的處理。

參考線類：同通用樣式類中的組件位置調整有關，由拖拽事件被動激活此類的輔助線，拖拽結果關閉輔助線。

層級管理類：當前場景中組件隱藏、鎖定、刪除、層級排序、彈窗等管理。

動畫管理類：選中組件的掛載、播放、刪除等管理，對當前場景所有組件的動畫播放處理。

鍵盤事件類：拷貝、復制、粘貼、刪除、上下左右微調、保存等動作處理

撤銷類：用于撤銷隊列管理，此類很小，撤銷動作會在其它類中包裝為閉包方法，此處只保存隊列和撤銷動作執(zhí)行；