第一种方案: uni-app uni-app的pc宽屏适配方案
从2.9版本起,uni-app 进一步提供了PC等宽屏的适配方案,完成了大统一
我们举一个实际案例:
如下是基于uni-app的DCloud社区在mobile端的展示效果,列表、详情分为两个页面,点击列表中的帖子,打开详情页面:
如下是基于uni-app的DCloud社区同一套代码,稍作配置后,在pc端的展示效果,列表、详情在同一个页面中左右分栏显示,点击左侧列表中的帖子,刷新右侧详情窗口的内容,这个UI更适合pc宽屏,也更有pc桌面App的体验。
采用的适配方案包括以下三个方面:
- 窗体级适配:leftwindow、rightwindow、topwindow等分栏
- 组件级适配:match-media组件
- rpx的宽屏响应
leftWindow方案除了适用于将原有的Mobile App适配到大屏显示,也适用于新开发的PC应用,尤其是PC Admin管理控制台。
如下是基于leftwindow、topwindow构建的经典pc admin布局:
通过electron打包为windows客户端
(1)通过electron打包
(2)开发者可以随意调用electron的API,以调用更多操作系统的能力(为方便多端兼容,可以将这些特殊API写在自定义的条件编译里)
此种方案遇到的问题:
因为这种方式采用的是 窗体级适配:leftwindow、rightwindow、topwindow等分栏方式,也就是将一个界面分成了三个vue组件去做,会导致在打包apk时,界面会按照移动端呈现,而且打包后样式也存在些许差异
第二种方案: 项目用到的技术是avue
实现前后端交互,及页面跳转功能
遇到的问题:
本地运行调后台接口没有问题,也能够实现页面间跳转,但是打包后调后台接口存在跨域问题,导致界面无法跳转 如图所示
第三种方案: 项目用到的技术是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的一些模块。