第一種方案: uni-app uni-app的pc寬屏適配方案
從2.9版本起汗唱，uni-app 進一步提供了PC等寬屏的適配方案攻冷，完成了大統(tǒng)一
我們舉一個實際案例:
如下是基于uni-app的DCloud社區(qū)在mobile端的展示效果，列表褥实、詳情分為兩個頁面呀狼，點擊列表中的帖子，打開詳情頁面：
如下是基于uni-app的DCloud社區(qū)同一套代碼损离，稍作配置后哥艇，在pc端的展示效果，列表僻澎、詳情在同一個頁面中左右分欄顯示貌踏，點擊左側(cè)列表中的帖子，刷新右側(cè)詳情窗口的內(nèi)容窟勃，這個UI更適合pc寬屏祖乳，也更有pc桌面App的體驗。
采用的適配方案包括以下三個方面:
- 窗體級適配：leftwindow秉氧、rightwindow眷昆、topwindow等分欄
- 組件級適配：match-media組件
- rpx的寬屏響應
leftWindow方案除了適用于將原有的Mobile App適配到大屏顯示，也適用于新開發(fā)的PC應用，尤其是PC Admin管理控制臺隙赁。
如下是基于leftwindow垦藏、topwindow構(gòu)建的經(jīng)典pc admin布局：
通過electron打包為windows客戶端
(1)通過electron打包
(2)開發(fā)者可以隨意調(diào)用electron的API，以調(diào)用更多操作系統(tǒng)的能力（為方便多端兼容伞访，可以將這些特殊API寫在自定義的條件編譯里）
此種方案遇到的問題:
因為這種方式采用的是 窗體級適配：leftwindow、rightwindow轰驳、topwindow等分欄方式厚掷，也就是將一個界面分成了三個vue組件去做，會導致在打包apk時级解，界面會按照移動端呈現(xiàn)冒黑，而且打包后樣式也存在些許差異
第二種方案: 項目用到的技術(shù)是avue
實現(xiàn)前后端交互，及頁面跳轉(zhuǎn)功能
遇到的問題:
本地運行調(diào)后臺接口沒有問題勤哗，也能夠?qū)崿F(xiàn)頁面間跳轉(zhuǎn)抡爹，但是打包后調(diào)后臺接口存在跨域問題，導致界面無法跳轉(zhuǎn) 如圖所示
第三種方案: 項目用到的技術(shù)是vue（自測沒有問題）
技術(shù)方案: 基于 vue 來構(gòu)造 electron 應用程序的樣板代碼芒划，有專門的文檔
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
所實現(xiàn)的功能:
- 1.electron-vue中隱藏頂部菜單 隱藏關(guān)閉按鈕冬竟、自定義關(guān)閉 最大化 最小化按鈕
- 2.登錄頁面制作以及 封裝公共模塊、請求api接口實現(xiàn)登錄
- 3.electron-vue中 sheel模塊打開外部瀏覽器民逼、監(jiān)聽網(wǎng)絡變化彈出通知泵殴、右鍵菜單
- 4.系統(tǒng)托盤 點擊右上角關(guān)閉按鈕隱藏到托盤（任務欄托盤）
- 5.electron-vue 打包Windows上可以安裝的.exe軟件
- 6.可以實現(xiàn)界面跳轉(zhuǎn)
- 7.單獨打包exe應用程序，一步一步安裝拼苍，然后運行
綜上所述笑诅，我們選擇第三種方案更適合（用vue結(jié)合electron）來實現(xiàn)把網(wǎng)頁打包成一個在桌面運行的程序（即exe桌面應用程序）
打包工具.Electron
順便我們了解一下打包工具Electron？疮鲫？
對于我來說Electron相當于一個瀏覽器的外殼吆你，可以把網(wǎng)頁程序嵌入到殼里面，可以運行在桌面上的一個程序俊犯，可以把網(wǎng)頁打包成一個在桌面運行的程序妇多，通俗來說就是軟件，比如像QQ瘫析、優(yōu)酷砌梆、網(wǎng)易音樂等等。功能的強大超出你的想象贬循，可以構(gòu)建跨平臺桌面程序咸包，本身支持node.js，可以使用node.js的一些模塊杖虾。
