目前手机移动端,客户端是作为用户经常使用的交互方式,具有更强的扩展性,以及方便快捷特性,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.客户端放大缩小,监听后要动态改变客户端实际内容大小,不然会出现客户端实际宽度跟内容宽度不符合,客户端遮挡电脑桌面其他内容
先写道这里,后续有出现问题可以再继续更新