如何使Tauri开发的系统像一个原生应用

我最近在使用Tauri开发一个用于测评的工具。我们使用Tauri制作桌面应用当然想让它尽可能像个原生应用。但它的界面是运行在WebView上，因此它的外观和感觉往往像一个Web应用程序。我将尽可能的使我的应用像个原生应用，因此把我在开发过程中的经验记录在这里。

关键点

• 禁用上下文菜单
• 禁用窗口滚动
• 抑制滚动反弹
• 不留余白
• 使文本不可选
• 缺省的鼠标样式
• 字体字号
• 原生菜单
• 键盘快捷键
• 黑暗模式

禁用上下文菜单

在网页上点击右键可以出现默认的、全局的上下文菜单，这是很常见的。但在原生应用中通常是不会出现这种情况的，需要禁用掉它:

document.addEventListener('contextmenu', event => event.preventDefault());

使文本不可选

在网页上选择文本是很正常的，但在原生应用中通常是不能的。通过如下设置可以禁用它。需要注意的是，这并不影响文本框中的文本选择。

body {
    user-select: none;
}

缺省的鼠标样式

在网页上，随着鼠标划过不同的显示标签，会根据内容的不同显示多种鼠标的光标样式。但是在原生应用中，鼠标大多数情况下还都呈现默认光标样式。让我们将光标样式设置为缺省模式：

body {
	cursor: default;
}

抑制滚动反弹

滚动反弹是指当滚动到屏幕边缘时会产生类似弹簧的效果。默认情况下，整个屏幕都可以随着弹跳运动滚动。

滚动反弹与滚动性有关，因此如下设置可以抑制反弹滚动。

body {
    overflow: hidden;
}

禁用窗口滚动

当页面内容大于窗口尺寸时，通常页面会在整个窗口上滚动。但是在原生应用中，通常组件都是固定的，仅有某些组件可滚动，例如：列表框、表格、多行文本框等。

首先应将整个窗口设置为禁止滚动，然后将可滚动的组件的设置为可滚动：

body {
	overflow: hidden;
}

.contents {
	overflow: scroll;
	height: calc(100vh - 40px)
}

不留余白

为了使网页美观，设计时通常都会在页面上留白，但在原生应用中通常是不留余白的。首先在全局中设置margin和padding为0。然后在设计页面时，请谨记这个原则并谨慎使用这两个属性。

body {
    margin: 0;
    padding: 0;
}

字体字号

待完善

原生菜单

待完善

键盘快捷键

待完善

黑暗模式

待完善

最后

我还会持续更新这篇文章。将一些技巧介绍给大家，提高应用系统的可用性。

总体来说，使用Tauri开发是一次很棒的经历。