第一种方案: uni-app uni-app的pc宽屏适配方案
从2.9版本起，uni-app 进一步提供了PC等宽屏的适配方案，完成了大统一
我们举一个实际案例:
如下是基于uni-app的DCloud社区在mobile端的展示效果，列表、详情分为两个页面，点击列表中的帖子，打开详情页面：
image.png
如下是基于uni-app的DCloud社区同一套代码，稍作配置后，在pc端的展示效果，列表、详情在同一个页面中左右分栏显示，点击左侧列表中的帖子，刷新右侧详情窗口的内容，这个UI更适合pc宽屏，也更有pc桌面App的体验。
image.png
采用的适配方案包括以下三个方面:
- 窗体级适配：leftwindow、rightwindow、topwindow等分栏
- 组件级适配：match-media组件
- rpx的宽屏响应
leftWindow方案除了适用于将原有的Mobile App适配到大屏显示，也适用于新开发的PC应用，尤其是PC Admin管理控制台。
如下是基于leftwindow、topwindow构建的经典pc admin布局：
image.png
通过electron打包为windows客户端
(1)通过electron打包
(2)开发者可以随意调用electron的API，以调用更多操作系统的能力（为方便多端兼容，可以将这些特殊API写在自定义的条件编译里）
此种方案遇到的问题:
因为这种方式采用的是 窗体级适配：leftwindow、rightwindow、topwindow等分栏方式，也就是将一个界面分成了三个vue组件去做，会导致在打包apk时，界面会按照移动端呈现，而且打包后样式也存在些许差异
第二种方案: 项目用到的技术是avue
实现前后端交互，及页面跳转功能
遇到的问题:
本地运行调后台接口没有问题，也能够实现页面间跳转，但是打包后调后台接口存在跨域问题，导致界面无法跳转 如图所示
image.png
第三种方案: 项目用到的技术是vue（自测没有问题）
技术方案: 基于 vue 来构造 electron 应用程序的样板代码，有专门的文档
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
所实现的功能:
- 1.electron-vue中隐藏顶部菜单 隐藏关闭按钮、自定义关闭 最大化 最小化按钮
- 2.登录页面制作以及 封装公共模块、请求api接口实现登录
- 3.electron-vue中 sheel模块打开外部浏览器、监听网络变化弹出通知、右键菜单
- 4.系统托盘 点击右上角关闭按钮隐藏到托盘（任务栏托盘）
- 5.electron-vue 打包Windows上可以安装的.exe软件
- 6.可以实现界面跳转
- 7.单独打包exe应用程序，一步一步安装，然后运行
综上所述，我们选择第三种方案更适合（用vue结合electron）来实现把网页打包成一个在桌面运行的程序（即exe桌面应用程序）
打包工具.Electron
顺便我们了解一下打包工具Electron？？
对于我来说Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。
网友评论