第一種方案: uni-app uni-app的pc寬屏適配方案
從2.9版本起，uni-app 進(jìn)一步提供了PC等寬屏的適配方案，完成了大統(tǒng)一
我們舉一個實(shí)際案例:
如下是基于uni-app的DCloud社區(qū)在mobile端的展示效果，列表、詳情分為兩個頁面，點(diǎn)擊列表中的帖子，打開詳情頁面：
如下是基于uni-app的DCloud社區(qū)同一套代碼，稍作配置后，在pc端的展示效果，列表、詳情在同一個頁面中左右分欄顯示，點(diǎn)擊左側(cè)列表中的帖子，刷新右側(cè)詳情窗口的內(nèi)容，這個UI更適合pc寬屏，也更有pc桌面App的體驗(yàn)。
采用的適配方案包括以下三個方面:
- 窗體級適配：leftwindow、rightwindow、topwindow等分欄
- 組件級適配：match-media組件
- rpx的寬屏響應(yīng)
leftWindow方案除了適用于將原有的Mobile App適配到大屏顯示，也適用于新開發(fā)的PC應(yīng)用，尤其是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寫在自定義的條件編譯里）
此種方案遇到的問題:
因?yàn)檫@種方式采用的是 窗體級適配：leftwindow、rightwindow、topwindow等分欄方式，也就是將一個界面分成了三個vue組件去做，會導(dǎo)致在打包apk時，界面會按照移動端呈現(xiàn)，而且打包后樣式也存在些許差異
第二種方案: 項(xiàng)目用到的技術(shù)是avue
實(shí)現(xiàn)前后端交互，及頁面跳轉(zhuǎn)功能
遇到的問題:
本地運(yùn)行調(diào)后臺接口沒有問題，也能夠?qū)崿F(xiàn)頁面間跳轉(zhuǎn)，但是打包后調(diào)后臺接口存在跨域問題，導(dǎo)致界面無法跳轉(zhuǎn) 如圖所示
第三種方案: 項(xiàng)目用到的技術(shù)是vue（自測沒有問題）
技術(shù)方案: 基于 vue 來構(gòu)造 electron 應(yīng)用程序的樣板代碼，有專門的文檔
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
所實(shí)現(xiàn)的功能:
- 1.electron-vue中隱藏頂部菜單 隱藏關(guān)閉按鈕、自定義關(guān)閉 最大化 最小化按鈕
- 2.登錄頁面制作以及 封裝公共模塊、請求api接口實(shí)現(xiàn)登錄
- 3.electron-vue中 sheel模塊打開外部瀏覽器、監(jiān)聽網(wǎng)絡(luò)變化彈出通知、右鍵菜單
- 4.系統(tǒng)托盤 點(diǎn)擊右上角關(guān)閉按鈕隱藏到托盤（任務(wù)欄托盤）
- 5.electron-vue 打包Windows上可以安裝的.exe軟件
- 6.可以實(shí)現(xiàn)界面跳轉(zhuǎn)
- 7.單獨(dú)打包exe應(yīng)用程序，一步一步安裝，然后運(yùn)行
綜上所述，我們選擇第三種方案更適合（用vue結(jié)合electron）來實(shí)現(xiàn)把網(wǎng)頁打包成一個在桌面運(yùn)行的程序（即exe桌面應(yīng)用程序）
打包工具.Electron
順便我們了解一下打包工具Electron？？
對于我來說Electron相當(dāng)于一個瀏覽器的外殼，可以把網(wǎng)頁程序嵌入到殼里面，可以運(yùn)行在桌面上的一個程序，可以把網(wǎng)頁打包成一個在桌面運(yùn)行的程序，通俗來說就是軟件，比如像QQ、優(yōu)酷、網(wǎng)易音樂等等。功能的強(qiáng)大超出你的想象，可以構(gòu)建跨平臺桌面程序，本身支持node.js，可以使用node.js的一些模塊。
