前言

前几天在网上看到了这个桌面控制台，放在桌上可是相当的美丽，伸手一按就能完成各种操作，但是它的价格相当不美丽。

image-20230205115300832

image-20230205115408459

本来想着自己做一个，但是像我这种文科生对电路知识一窍不通，所以这个方案被我否决。于是我就把我的目光转向了吃灰多年的手机，我可以在手机上模拟一个控制台出来，于是就诞生了今天这款APP：桌面导航。

image-20230205130030368

应用下载

鸿蒙版未测试，仅按照华为相关要求修改了部分接口代码，可能会出现未知bug，鸿蒙版和安卓版不互通。

设计

首先非常感谢wdmomo这位大佬提供的界面设计。

画板 1

此应用一共分为两个版本，一个是横屏版另一个是竖屏版，这是两个独立的APP，名字都叫桌面导航，但是可以同时安装，白色底的这个是竖屏版，花色底的是横屏版。

image-20230205131037733

功能

这个APP的功能相信大家刚才在宣传片里也看到了，在手机上按下相应的按钮，然后电脑上会启动对应的应用。实现的原理很简单，首先手机先向电脑上请求应用列表，手机得到数据之后显示出来，手机按下按钮之后会向电脑发送指令，由电脑端程序进行接收以及执行。代码上就是前端那一套，写起来很简单。

image-20230205104154182

image-20230205104223209

image-20230205103826656

有两个小细节跟大家讲一下，一个是这个按钮按下去之后手机会震动，给你一个直观的反馈。另一个是这个软件里内置了丰富的动画效果，我把animate.css里所有除了out的效果全搬过来，这个动画会在图标出现的时候播放，这么多动画效果够大家玩一天的了。

image-20230205104008310

使用教程

电脑端

手机端

  1. 首次运行会自动跳转到设置页面。

    image-20230204211042995

  2. 输入电脑上的IP地址，并点击提交。

    image-20230204211152086

  3. 回到主页面就可以使用了。

    image-20230204211203012

  • 如需重新配置地址只需要点击设置即可重新回到设置页面。

    image-20230204211241327

关于高级功能实现

目前电脑上位机还不支持插入代码，不过我们可以换一种思路，直接把需要的功能打包成.exe文件，然后在配置路径里指向这个文件就行。

image-20230205114752679

PC版

如果你没有备用的手机，你完全可以直接把它运行在电脑上，顺手一点即可完成各种操作。

image-20230204211824043

image-20230204211853335