（tauri+svelte+cesium）谁不想在桌面摆个地球仪呢🌏起因是想尝试一下tauri这个桌面端开发库，既然已

起因是想尝试一下tauri这个桌面端开发库，既然已经尝试了一个新鲜的，再尝试一个svelte应该也不是什么问题，所以有了这个demo项目。

环境需求

Nodejs
Rust
webview2

创建项目

首先运行命令创建项目

pnpm create tauri-app

下载完依赖后，首先输入应用名，默认是tauri-app

? Project name (tauri-app) ›

然后选择包管理器,可以根据自己的喜好选择

? Choose your package manager ›
❯ cargo
  pnpm
  yarn
  npm

接下来选择想要使用的框架模板，这里选取svelte

? Choose your UI template ›
❯ vanilla
  vue
  vue-ts
  svelte
  svelte-ts
  react
  react-ts
  solid
  solid-ts

这时候项目就创建完成了，进入项目目录安装依赖，运行命令启动项目

cd [project-name] && pnpm i

打开package.json，里面默认添加的脚本如下

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "tauri": "tauri"
}

其中只有运行web页面的脚本，所以需要手动添加tauri的开发与打包脚本

"scripts": {
    "tauri:dev": "tauri dev",
    "tauri:build": "tauri build"
}

运行tauri:dev脚本，出现以下界面即运行成功

注意:

tauri编译时遇到wix文件下载失败的问题，可以手动下载该zip包，然后解压缩至C:\Users[用户名]\AppData\Local\tauri\WixTools文件夹内，如果没有直接创建该目录即可。

引入cesium

因为tauri的模板更新，将原有的rollup打包换成了vite，所以在这里不仅可以使用原有像rollup一样的安装cesium资源拷贝方式，也可以使用vite更加便捷的vue-plugin-cesium来完成cesium的引入

pnpm i vue-plugin-cesium

在vite.config.ts中直接引入

plugins: [
    svelte(),
    cesium()
],

在页面中初始化cesium即可,记得修改样式使cesium撑满整个页面

<script lang="ts">
  import { onMount } from 'svelte';
  import * as Cesium from 'cesium';

  let viewer: Cesium.Viewer;
  Cesium.Ion.defaultAccessToken = [yourKey];
  onMount(() => {
    viewer = new Cesium.Viewer('cesiumContainer');
  })

<main>
  <div id="cesiumContainer"></div>
</main>

然后在tauri.conf.json中修改窗口配置，让窗口成为一个矩形且不能缩放

"windows": [
  {
    "fullscreen": false,
    "height": 500,
    "resizable": false,
    "title": "tauri-app",
    "width": 500
  }
]

启动应用，这时候地球就已经显示出来了，如下所示

优化效果

为了使地球周围干净，因此需要移除cesium所有组件及星空背景和太阳等内容

viewer = new Cesium.Viewer('cesiumContainer' ,{
    orderIndependentTranslucency: false,
    contextOptions: {
        webgl: {
          alpha: true,
        }
    },
    geocoder:false, //搜索功能
    homeButton:false, //视角恢复功能
    sceneModePicker:false, // 2d、3d切换功能
    baseLayerPicker:false, //地图底色选择功能
    navigationHelpButton:false, //帮助功能
    animation:false, //动画功能
    timeline:false, //时间线功能
    fullscreenButton:false //全屏功能
});
viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
viewer.scene.globe.enableLighting = false;
viewer.shadows = false;
viewer.scene.sun.show=false;
viewer.scene.moon.show=false;
viewer.scene.skyAtmosphere.show=false;
viewer.scene.fog.enabled=false;

还有底部的logo信息需要css去除

:global(.cesium-viewer-bottom){
    display: none !important;
}

此时界面中将只有地球，不会有其他元素，如图所示

最后一步是将tauri的背景透明，然后去掉窗口框，这样才有一个地球放在桌面的视觉效果

"windows": [
  {
    ...
    "transparent":true, //背景透明
    "decorations":false, //窗口框体
    "alwaysOnTop":true, //永远置于顶部
    "skipTaskbar":true //不显示在任务栏
  }
],

不要忘记将界面自身背景色去除

:global(html) {
    background: transparent;
}

注意

这里的透明只是视觉透明，其实透明部分的窗口无法穿透点击下面区域

最后将项目打包为exe,执行tauri build命令

移动窗口

没有窗体的窗口是没法被移动的，这时候可以添加一个div，上面加一个拖动属性

<div data-tauri-drag-region class="mask"></div>

按住这部分就可以拖动窗体了

最后

打包完成的exe双击可以直接打开，然后一个地球就可以放在桌面欣赏了