網易嚴選經過一年多的快速發展，專案膨脹很快，業務規劃上，也到了拆分工作台的時候了。當前乙個業務人員在完成乙個新品開發的流程的時候，需要在多個業務系統之間切換。然而因為歷史原因，各後台專案有著不同的互動視覺形式，體驗比較差，統一互動視覺規範與前端互動已經迫在眉睫。
設計與開發這套規範的目標，是讓使用者體驗更佳，操作習慣一致，各系統間能夠無縫對接。
從使用者體驗上規範：統一認證、互動、視覺規範。 從開發流程上規範：前端開發規範、基礎框架、樣式庫、元件庫。 從開發效率上規範：構建工具、npm私有庫、輔助開發工具。
1. 統一認證，統一管理外網訪問許可權
統一認證的實現，讓各個系統直接的切換變的更流暢，避免了流暢跳轉時業務系統需要重新登入。
實現方案：
統一各業務系統的網域名稱，分配應用名給各業務系統。
接入統一的登入服務來實現。
統一外網訪問管理：應用登入時，登入服務根據使用者許可權生成可訪問列表的token，nginx通過secure_link模組來進行鑑權與控制**。
2. 統一互動視覺規範
一致的互動視覺規範，這也是後面各個步驟實施的基礎，在前端同學的深度參與下，互動視覺同學提取目前各業務系統的互動視覺需求，完成了互動視覺規範的制定。
互動同學提供了符合規範的一套axure元件庫，在產品互動階段進行規範。
3. 統一基礎前端框架
統一基礎框架是元件庫開發與**復用的基礎，我們選擇了anguarjs(1.x)的繼承者angular(當前4.x)
angular中文官網 。
4. 基礎樣式庫與樣式規範
開發了實現整個互動視覺規範的基礎樣式庫@shark/shark-css。
通過樣式開發命名規範，保障後續各種業務元件樣式之間能夠相容，不會互相汙染。
5. 基礎元件庫與元件規範
在angular框架下前端組開發了符合互動視覺規範的基礎元件庫@shark/shark-angularx。
通過元件規範，保證後續都各業務元件的介面、資料處理、校驗能夠統一與規範。
6. 開發文件、模版工程
開發文件方面，以元件說明、介面說明、元件例項、**片段四部分來展示各個元件的互動和試用方式。
模版工程，用於規範**結構，模組組織方式，為業務的模組化開發和模組化復用做好基礎。在模版工程中，提供了常見的表單、列表、tab、模態等業務模組的開發案例。
7. npm私服
我們搭建了一套npm私服，供發布公共樣式庫、公共元件庫、業務元件、公共業務模組。
8. 開發流程
前端本地開發環境
npm run server前端聯調模式（配置remote位址）
npm run server-remote前端build模式測試
npm run server-build9. 外掛程式、cli工具
配套的編輯器外掛程式，輔助**生成，專案建立，開發了元件庫和模版工程配套的vscode外掛程式，cli工具。
10. 願景
希望經過大家的努力，嚴選的後台系統，能給使用者提供更好的使用體驗，提公升大家的工作效率。
網易雲免費體驗館，0成本體驗20+款雲產品！
網易嚴選後台系統前端規範化解決方案
網易嚴選經過一年多的快速發展，專案膨脹很快，業務規劃上，也到了拆分工作台的時候了。當前乙個業務人員在完成乙個新品開發的流程的時候，需要在多個業務系統之間切換。然而因為歷史原因，各後台專案有著不同的互動視覺形式，體驗比較差，統一互動視覺規範與前端互動已經迫在眉睫。設計與開發這套規範的目標，是讓使用者體...
網易嚴選html css
document關於新疆部分地區寄遞管控通知 登入 註冊 我的訂單 會員甄選家 企業採購 客戶服務 客戶服務 首頁居家生活 服飾鞋包 美食酒水 個護清潔 母嬰親子 運動旅行 數碼家電 嚴選全球 為你嚴選 眾籌 新品首發 守護你的髮際線，黑芝麻丸 100克 29 39 切絲擦絲切蒜輔食 家用食物 多功...
網易嚴選的wkwebview測試之路
uiwebview是蘋果繼承於uiview封裝的乙個載入web內容的類,它可以載入任何遠端的web資料展示在你的頁面上，你可以像瀏覽器一樣前進後退重新整理等操作。不過蘋果在ios8以後推出了wkwebview來載入web。uiwebview自ios2就有，wkwebview從ios8才有，毫無疑問w...