关于桌面客户端开发心得

目前手机移动端，客户端是作为用户经常使用的交互方式，具有更强的扩展性，以及方便快捷特性，web端的访问存在一定的局限性，所以开发移动端跟客户端更能对客户展示重点关注内容，让客户精准获取想要的内容信息是相当重要的，下面我就讲下客户端开发所遇到的一些问题和心得

1.客户端的开发方式探索（1.Qusar框架，市面上一个集成vue组件的框架，拓展性不足，国内目前使用的人很少，知识库内容较少，遇到问题FAQ都没有，（2）electron+vue3基于electron的打包方式，可配置使用的平台类型，ios系统，windows系统都可以配置，组件基于vue3。可以使用比较主流的组件框架，antD，elementUi，iView等等)

2.客户端脱壳处理，不展示外部框，只展示内容部分，可切换大小等功能，核心思想，使用electron配置项，背景透明，客户端切换大小使用ipcRender通信，转换客户端大小。

配置项关键1. transparent: true,//透明背景2.resizable: false,//窗口大小是否可调节   frame: false /*是否展示顶部导航  去掉关闭按钮  最大化最小化按钮*/,

3.客户端调试，因为客户端调试比较不方便，日志console.无法打印服务端日志，所以有必要在开发中找到一种调试方式，引入electron-log 组件,引入方式配置如下图：

打印后的日志保存地址为本地电脑存储路径，logpath &  C:\Users\zhangliang\AppData\Roaming\disease_vite在安装路

开发阶段，可以默认打开调试界面，如果打包后启动可以配置打开调试界面设置，开发时候mainWindow.webContents.openDevTools();启用调试，如果是打包后使用Alt+CommandOrControl+Shift+D

4.客户端服务端与客户端消息通信，使用ipcRenderer，例如页面放大缩小，监听客户端鼠标指令拖拽等

5.通信高阶使用，客户端配置项，使用通信方式，请求系统配置项后用ipcRenderer发送配置项给客户端，使用fs组件读取本地配置

获取成功后发送内容到客户端

客户端存储在本地localStorage

6.客户端开发使用vue3的那种模式，在template和jsx之间选择，对于内容动态性比较大，且内容简单直接，页面宽度适应性有严格要求的情况下，我选择jsx开发方式，页面动态加载渲染，页面使用适应性特性组件，引入方式也可以按需引入

页面内容可组装性更强，数据驱动逻辑更加清晰，主要是slot方便许多

7.客户端拖拽属性引起无法触发点击事件问题处理

（1）外层框架层可以使用拖拽属性：-webkit-app-region:drag;，内容层直接禁用可拖拽属性，这样就可以点击

（2）使用ipcRenderer通信方式动态监听鼠标指令，客户端做出响应

8.客户端跳转web端与内部跳转

1. 如果客户端跳转使用window.open()跳转后会新增客户端页面

2. 如果使用electron shell脚本打开则可选择跳转机器安装的浏览器类型，及打开浏览器新标签页

9.客户端放大缩小，监听后要动态改变客户端实际内容大小，不然会出现客户端实际宽度跟内容宽度不符合，客户端遮挡电脑桌面其他内容

先写道这里，后续有出现问题可以再继续更新