github_mirrors/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-08-22 22:16:14 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
87bd94972410d4474b905c3fd8a2c29d3856be15
reference/docs/tauri.html
jaywcjlove 87bd949724 doc: update docs/tauri.md (#996) 2e985e4fee
2025-08-12 02:21:21 +00:00

683 lines
60 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>tauri 备忘清单
&#x26; tauri cheatsheet &#x26; Quick Reference</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta description="tauri 备忘清单
===
tauri 是一个轻量、高性能的跨平台应用开发框架，这里展示了它的常用配置与命令清单
入门，为开发人员分享快速参考备忘单。">
<meta keywords="tauri,reference,Quick,Reference,cheatsheet,cheat,sheet">
<meta name="author" content="jaywcjlove">
<meta name="license" content="MIT">
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
<link href="../style/style.css" rel="stylesheet">
<link href="../style/katex.css" rel="stylesheet">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/tauri.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js?v=1.9.0"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="tauri-备忘清单"><svg viewBox="0 0 256 289" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
<path d="M178.497 104.93c0 15.155-12.285 27.44-27.44 27.44-15.153 0-27.438-12.285-27.438-27.44 0-15.153 12.285-27.438 27.439-27.438s27.439 12.285 27.439 27.439Z" fill="#FFC131"></path>
<circle fill="#24C8DB" transform="rotate(180 104.91 183.505)" cx="104.911" cy="183.505" r="27.439"></circle>
<path d="M207.93 192.86a104.766 104.766 0 0 1-36.168 14.717 73.586 73.586 0 0 0 3.617-33.176c29.953-10.472 49.82-38.964 49.292-70.69-.53-31.727-21.336-59.542-51.622-69.008-30.286-9.467-63.23 1.546-81.733 27.324a122.227 122.227 0 0 0-40.16 11.723C64.86 29.536 105.956-.445 152.244.005c46.288.45 86.794 31.224 99.636 75.697 12.841 44.473-5.026 92.103-43.95 117.157ZM52.404 92.832l25.693 3.118a73.586 73.586 0 0 1 3.243-14.593 104.766 104.766 0 0 0-28.936 11.475Z" fill="#FFC131"></path>
<path d="M47.913 95.577a104.766 104.766 0 0 1 36.419-14.842 73.46 73.46 0 0 0-4.116 33.3c-29.847 10.619-49.549 39.148-48.906 70.822.642 31.673 21.484 59.38 51.738 68.78 30.253 9.399 63.127-1.62 81.604-27.352a122.227 122.227 0 0 0 40.16-11.6c-13.736 44.169-54.812 74.1-101.064 73.645-46.252-.453-86.733-31.184-99.602-75.612-12.87-44.427 4.92-92.037 43.768-117.141Zm155.528 100.026-.5.25.5-.25Z" fill="#24C8DB"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#tauri-备忘清单"><span class="icon icon-link"></span></a>tauri 备忘清单</h1><div class="wrap-body">
<p><a href="https://tauri.app/">tauri</a> 是一个轻量、高性能的跨平台应用开发框架，这里展示了它的常用配置与命令清单</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#依赖环境">依赖环境</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#启动-tauri-开发窗口">启动 Tauri 开发窗口</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#检测最新版本的-tauri">检测最新版本的 Tauri</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#更新-npm-包">更新 npm 包</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#更新-cargo-包">更新 Cargo 包</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#应用程序调试">应用程序调试</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#以编程方式打开-devtools">以编程方式打开 Devtools</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#在生产中使用检查器">在生产中使用检查器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#启用开发工具功能">启用开发工具功能</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#移动端开发">移动端开发</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注意事项">注意事项</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#安卓开发">安卓开发</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装-android-studio">安装 Android Studio</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#环境变量">环境变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译目标">编译目标</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建-android-项目">创建 Android 项目</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#开发调试">开发调试</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#生成签名">生成签名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#手动签名">手动签名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自动签名">自动签名</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#ios-开发">iOS 开发</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#预先准备">预先准备</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#签名">签名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#开发调试-1">开发调试</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#环境搭建">环境搭建</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#安装-xcode">安装 Xcode</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#安装-homebrew">安装 Homebrew</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用-homebrew-安装-cocoapods">使用 Homebrew 安装 Cocoapods</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#增加编译目标">增加编译目标</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建-ios-项目">创建 iOS 项目</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#配置">配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#配置结构">配置结构</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#tauri-配置">Tauri 配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#cliconfig">CliConfig</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#package-配置">Package 配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windowconfig">WindowConfig</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#patternkind">PatternKind</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#棕地模式">棕地模式</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#隔离模式建议出于安全目的">隔离模式。建议出于安全目的</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windowurl">WindowUrl</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#systemtrayconfig">SystemTrayConfig</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="快速开始"><a aria-hidden="true" tabindex="-1" href="#快速开始"><span class="icon icon-link"></span></a>快速开始</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>Bash</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">sh</span> <span class="token operator">&#x3C;</span><span class="token punctuation">(</span><span class="token function">curl</span> https://create.tauri.app/sh<span class="token punctuation">)</span>
</span></code></pre>
<p>PowerShell</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">C:<span class="token punctuation">\</span><span class="token operator">></span> irm https://create.tauri.app/ps <span class="token operator">|</span> iex
</span></code></pre>
<p>Cargo</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">cargo</span> <span class="token function">install</span> create-tauri-app <span class="token parameter variable">--locked</span>
</span><span class="code-line">$ <span class="token function">cargo</span> create-tauri-app
</span></code></pre>
<p>npm/yarn/pnpm/bunx</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> create tauri-app@latest
</span><span class="code-line">$ <span class="token function">yarn</span> create tauri-app
</span><span class="code-line">$ <span class="token function">pnpm</span> create tauri-app
</span><span class="code-line">$ bunx create-tauri-app
</span></code></pre>
<h4 id="依赖环境"><a aria-hidden="true" tabindex="-1" href="#依赖环境"><span class="icon icon-link"></span></a>依赖环境</h4>
<table><thead><tr><th align="left">软件</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left"><a href="https://www.rust-lang.org/tools/install">rust</a></td><td align="left">rust安装</td></tr><tr><td align="left"><a href="https://nodejs.org/en">nodejs</a></td><td align="left">nodejs安装</td></tr><tr><td align="left"><a href="https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/">Windows Build Tools</a></td><td align="left">Microsoft C++ 生成工具 (for windows)</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="启动-tauri-开发窗口"><a aria-hidden="true" tabindex="-1" href="#启动-tauri-开发窗口"><span class="icon icon-link"></span></a>启动 Tauri 开发窗口</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> run tauri dev
</span><span class="code-line">$ <span class="token function">yarn</span> tauri dev
</span><span class="code-line">$ <span class="token function">pnpm</span> tauri dev
</span><span class="code-line">$ bunx tauri dev
</span><span class="code-line">$ <span class="token function">cargo</span> tauri dev
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="检测最新版本的-tauri"><a aria-hidden="true" tabindex="-1" href="#检测最新版本的-tauri"><span class="icon icon-link"></span></a>检测最新版本的 Tauri</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> outdated @tauri-apps/cli
</span><span class="code-line">$ <span class="token function">yarn</span> outdated @tauri-apps/cli
</span><span class="code-line">$ <span class="token function">pnpm</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @tauri-apps/cli
</span><span class="code-line">$ <span class="token function">npm</span> outdated @tauri-apps/cli
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="更新-npm-包"><a aria-hidden="true" tabindex="-1" href="#更新-npm-包"><span class="icon icon-link"></span></a>更新 npm 包</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> @tauri-apps/cli@latest @tauri-apps/api@latest
</span><span class="code-line">$ <span class="token function">yarn</span> upgrade @tauri-apps/cli @tauri-apps/api <span class="token parameter variable">--latest</span>
</span><span class="code-line">$ <span class="token function">yarn</span> up @tauri-apps/cli @tauri-apps/api
</span><span class="code-line">$ <span class="token function">pnpm</span> update @tauri-apps/cli @tauri-apps/api <span class="token parameter variable">--latest</span>
</span><span class="code-line">$ bun update @tauri-apps/cli @tauri-apps/api
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="更新-cargo-包"><a aria-hidden="true" tabindex="-1" href="#更新-cargo-包"><span class="icon icon-link"></span></a>更新 Cargo 包</h3><div class="wrap-body">
<p>打开 <code>src-tauri/Cargo.toml</code> 并更改 <code>tauri</code> 和 <code>tauri-build</code></p>
<pre class="language-ini"><code class="language-ini code-highlight"><span class="code-line"><span class="token section"><span class="token punctuation">[</span><span class="token section-name selector">build-dependencies</span><span class="token punctuation">]</span></span>
</span><span class="code-line"><span class="token key attr-name">tauri-build</span> <span class="token punctuation">=</span> <span class="token value attr-value">"<span class="token inner-value">%version%</span>"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token section"><span class="token punctuation">[</span><span class="token section-name selector">dependencies</span><span class="token punctuation">]</span></span>
</span><span class="code-line"><span class="token key attr-name">tauri</span> <span class="token punctuation">=</span> <span class="token value attr-value">{ version = "%version%" }</span>
</span></code></pre>
<p>其中 <code>%version%</code> 是上面相应的版本号</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">cd</span> src-tauri
</span><span class="code-line">$ <span class="token function">cargo</span> update
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="应用程序调试"><a aria-hidden="true" tabindex="-1" href="#应用程序调试"><span class="icon icon-link"></span></a>应用程序调试</h3><div class="wrap-body">
<p>代码中输出日志方法</p>
<pre class="language-rust"><code class="language-rust code-highlight"><span class="code-line"><span class="token macro property">println!</span><span class="token punctuation">(</span><span class="token string">"Message from Rust: {}"</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>在 Linux 和 macOS 上通过下面命令重新运行</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token assign-left variable">RUST_BACKTRACE</span><span class="token operator">=</span><span class="token number">1</span> tauri dev
</span></code></pre>
<p>Window 上这样开启</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token builtin class-name">set</span> <span class="token assign-left variable">RUST_BACKTRACE</span><span class="token operator">=</span><span class="token number">1</span>
</span><span class="code-line">tauri dev
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="以编程方式打开-devtools"><a aria-hidden="true" tabindex="-1" href="#以编程方式打开-devtools"><span class="icon icon-link"></span></a>以编程方式打开 Devtools</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-rust"><code class="language-rust code-highlight"><span class="code-line"><span class="token keyword">use</span> <span class="token namespace">tauri<span class="token punctuation">::</span></span><span class="token class-name">Manager</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token namespace">tauri<span class="token punctuation">::</span></span><span class="token class-name">Builder</span><span class="token punctuation">::</span><span class="token function">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token closure-params"><span class="token closure-punctuation punctuation">|</span>app<span class="token closure-punctuation punctuation">|</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token attribute attr-name">#[cfg(debug_assertions)]</span> <span class="token comment">// 仅在调试构建时包含此代码</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">let</span> window <span class="token operator">=</span> app<span class="token punctuation">.</span><span class="token function">get_window</span><span class="token punctuation">(</span><span class="token string">"main"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unwrap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> window<span class="token punctuation">.</span><span class="token function">open_devtools</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> window<span class="token punctuation">.</span><span class="token function">close_devtools</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token class-name">Ok</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="在生产中使用检查器"><a aria-hidden="true" tabindex="-1" href="#在生产中使用检查器"><span class="icon icon-link"></span></a>在生产中使用检查器</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> run tauri build -- <span class="token parameter variable">--debug</span>
</span><span class="code-line">$ <span class="token function">yarn</span> tauri build <span class="token parameter variable">--debug</span>
</span><span class="code-line">$ <span class="token function">pnpm</span> tauri build <span class="token parameter variable">--debug</span>
</span><span class="code-line">$ bunx tauri build <span class="token parameter variable">--debug</span>
</span><span class="code-line">$ <span class="token function">cargo</span> tauri build <span class="token parameter variable">--debug</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="启用开发工具功能"><a aria-hidden="true" tabindex="-1" href="#启用开发工具功能"><span class="icon icon-link"></span></a>启用开发工具功能</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-ini"><code class="language-ini code-highlight"><span class="code-line"><span class="token section"><span class="token punctuation">[</span><span class="token section-name selector">dependencies</span><span class="token punctuation">]</span></span>
</span><span class="code-line"><span class="token key attr-name">tauri</span> <span class="token punctuation">=</span> <span class="token value attr-value">{ version = "...", features = ["...", "devtools"] }</span>
</span></code></pre>
<p>在文件 <code>src-tauri/Cargo.toml</code> 中启用 <code>devtools Cargo</code> 功能</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="移动端开发"><a aria-hidden="true" tabindex="-1" href="#移动端开发"><span class="icon icon-link"></span></a>移动端开发</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="注意事项"><a aria-hidden="true" tabindex="-1" href="#注意事项"><span class="icon icon-link"></span></a>注意事项</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>Tauri 使用系统原生的 <code>Webview</code>，而不像 Electron 那样将完整的 <code>Chromium</code> 打包进应用，因此构建产物体积相当小。</p>
<p>但各手机厂商对于 <code>Webview</code> 的支持程度不同，因此在部分设备可能会出现一些兼容性问题。</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="安卓开发"><a aria-hidden="true" tabindex="-1" href="#安卓开发"><span class="icon icon-link"></span></a>安卓开发</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="安装-android-studio"><a aria-hidden="true" tabindex="-1" href="#安装-android-studio"><span class="icon icon-link"></span></a>安装 Android Studio</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>在进行安卓开发之前，需要首先安装 <a href="https://developer.android.google.cn/studio?hl=zh-cn">Android Studio</a> 并配置好环境变量。</p>
<p>安装后，打开 <code>Settings</code>，切换到 <code>Languages &#x26; Frameworks</code> > <code>Android SDK</code> 界面。</p>
<blockquote>
<p>可以在这个页面更改 <code>Android SDK Location</code> 以调整 SDK 安装目录</p>
</blockquote>
<p>安装以下内容：</p>
<ul>
<li>Android SDK Platform</li>
<li>Android SDK Platform-Tools</li>
<li>NDK (Side by side)</li>
<li>Android SDK Build-Tools</li>
<li>Android SDK Command-line Tools</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="环境变量"><a aria-hidden="true" tabindex="-1" href="#环境变量"><span class="icon icon-link"></span></a>环境变量</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<ul>
<li>
<p><code>JAVA_HOME</code>: 若无其他 JDK 环境，可以配置为 Android Studio 安装目录下的 jbr 目录。</p>
</li>
<li>
<p><code>ANDROID_HOME</code>: 配置为 Android SDK Location 目录下的 sdk 目录。</p>
</li>
<li>
<p><code>NDK_HOME</code>: 配置为 Android SDK Location 目录下的 ndk 下的 ndk 版本号目录。</p>
</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="编译目标"><a aria-hidden="true" tabindex="-1" href="#编译目标"><span class="icon icon-link"></span></a>编译目标</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>Rust 默认只安装当前主机平台的编译目标（比如在 macOS 上默认就是 <code>x86_64-apple-darwin</code>）。
如果你想编译到其它平台或架构，就需要使用 <code>rustup target add</code> 安装对应的编译目标。</p>
<p>Android 应用打包时，一般会把编译的这几种架构的库文件全都放进 APK/ABB 中，系统会自动选择匹配的那个。</p>
<table><thead><tr><th>target</th><th>CPU 架构</th><th>常见设备/场景</th></tr></thead><tbody><tr><td><strong>aarch64-linux-android</strong></td><td>ARM 64 位</td><td>新款安卓手机（主流）</td></tr><tr><td><strong>armv7-linux-androideabi</strong></td><td>ARM 32 位</td><td>老款安卓手机（较少见）</td></tr><tr><td><strong>i686-linux-android</strong></td><td>Intel x86 32 位</td><td>早期安卓模拟器（老旧）</td></tr><tr><td><strong>x86_64-linux-android</strong></td><td>Intel x86 64 位</td><td>安卓模拟器、新款 Chromebook</td></tr></tbody></table>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ rustup target <span class="token function">add</span> aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="创建-android-项目"><a aria-hidden="true" tabindex="-1" href="#创建-android-项目"><span class="icon icon-link"></span></a>创建 Android 项目</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>创建基础 Tauri 项目：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 创建 tauri 项目</span>
</span><span class="code-line">$ <span class="token function">npm</span> create tauri-app@latest
</span><span class="code-line"><span class="token comment"># 安装依赖</span>
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span>
</span></code></pre>
<p>手动创建：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @tauri-apps/cli@latest
</span><span class="code-line"><span class="token comment"># 进入项目目录初始化，按照提示输入即可</span>
</span><span class="code-line">$ npx tauri init
</span></code></pre>
<p>创建后，则可以执行以下命令：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 初始化 Android 开发配置</span>
</span><span class="code-line">$ npx tauri android init
</span><span class="code-line"><span class="token comment"># 开发 Android 应用</span>
</span><span class="code-line">$ npx tauri android dev
</span><span class="code-line"><span class="token comment"># 构建 Android 应用</span>
</span><span class="code-line">$ npx tauri android build
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="开发调试"><a aria-hidden="true" tabindex="-1" href="#开发调试"><span class="icon icon-link"></span></a>开发调试</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>首先需要在开发环境下打开应用，才能进行调试。</p>
<p>在浏览器打开检查页面，根据浏览器不同，地址也不同，edge 浏览器是 <code>edge://inspect</code>，chrome 浏览器是 <code>chrome://inspect</code>。</p>
<p>在检查页面中，会显示当前运行的应用，点击 <code>inspect</code> 即可打开调试工具。</p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="生成签名"><a aria-hidden="true" tabindex="-1" href="#生成签名"><span class="icon icon-link"></span></a>生成签名</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>Android 系统要求所有 APK 必须先使用证书进行数字签名，然后才能安装到设备上或进行更新。</p>
<p><code>keytool</code> 是 Java 数据证书管理工具。</p>
<p>可以在 <code>JAVA_HOME</code> 环境变量指向的目录下的 <code>/bin/</code> 目录中找到 <code>keytool.exe</code>。</p>
<p>执行以下命令之后按照提示进行输入即可。</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ keytool <span class="token parameter variable">-genkey</span> <span class="token parameter variable">-v</span> <span class="token parameter variable">-keystore</span> 自定义的数据文件名称 <span class="token parameter variable">-storetype</span> JKS <span class="token parameter variable">-keyalg</span> RSA <span class="token parameter variable">-keysize</span> <span class="token number">2048</span> <span class="token parameter variable">-validity</span> <span class="token number">10000</span> <span class="token parameter variable">-alias</span> 自定义的证书别名
</span></code></pre>
<p>如果是要上架应用商店的，要如实填写。否则可能会导致因信息不对从而上架失败。</p>
<p>输入完毕，确认后，工具会要求设置密码。记住密码，后面会用到。</p>
<p>完成以上操作后，在当前工作目录下会生成一个 <code>自定义的数据文件名称.keystore</code> 文件。</p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="手动签名"><a aria-hidden="true" tabindex="-1" href="#手动签名"><span class="icon icon-link"></span></a>手动签名</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ keytool <span class="token parameter variable">-genkey</span> <span class="token parameter variable">-alias</span> android.keystore <span class="token parameter variable">-keyalg</span> RSA <span class="token parameter variable">-validity</span> <span class="token number">20000</span> <span class="token parameter variable">-keystore</span> android.keystore
</span><span class="code-line">$ zipalign <span class="token parameter variable">-p</span> <span class="token parameter variable">-f</span> <span class="token parameter variable">-v</span> <span class="token number">4</span> unsigned.apk release.apk
</span><span class="code-line">$ apksigner sign <span class="token parameter variable">--ks</span> android.keystore release.apk
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="自动签名"><a aria-hidden="true" tabindex="-1" href="#自动签名"><span class="icon icon-link"></span></a>自动签名</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>创建 <code>src-tauri/gen/android/keystore.properties</code> 文件。</p>
<pre class="language-properties"><code class="language-properties code-highlight"><span class="code-line"><span class="token key attr-name">storePassword</span><span class="token punctuation">=</span><span class="token value attr-value">数据文件密码</span>
</span><span class="code-line"><span class="token key attr-name">keyPassword</span><span class="token punctuation">=</span><span class="token value attr-value">证书密码</span>
</span><span class="code-line"><span class="token key attr-name">keyAlias</span><span class="token punctuation">=</span><span class="token value attr-value">自定义的证书别名</span>
</span><span class="code-line"><span class="token key attr-name">storeFile</span><span class="token punctuation">=</span><span class="token value attr-value">自定义的数据文件名称.keystore</span>
</span></code></pre>
<p>需要注意，在 windows 下，<code>storeFile</code> 需要 <code>C:\\Program Files\\Android</code> 这样的格式。</p>
<p>随后找到 <code>src-tauri/gen/android/app/build.gradle.kts</code> 文件，添加以下内容：</p>
<pre class="language-kotlin"><code class="language-kotlin code-highlight"><span class="code-line"><span class="token keyword">import</span> java<span class="token punctuation">.</span>io<span class="token punctuation">.</span>FileInputStream
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// ...</span>
</span><span class="code-line">android <span class="token punctuation">{</span>
</span><span class="code-line"> defaultConfig <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// ...</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> signingConfigs <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">create</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"release"</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">val</span> keystorePropertiesFile <span class="token operator">=</span> rootProject<span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"keystore.properties"</span></span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">val</span> keystoreProperties <span class="token operator">=</span> <span class="token function">Properties</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>keystorePropertiesFile<span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> keystoreProperties<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token function">FileInputStream</span><span class="token punctuation">(</span>keystorePropertiesFile<span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> keyAlias <span class="token operator">=</span> keystoreProperties<span class="token punctuation">[</span><span class="token string-literal singleline"><span class="token string">"keyAlias"</span></span><span class="token punctuation">]</span> <span class="token keyword">as</span> String
</span><span class="code-line"> keyPassword <span class="token operator">=</span> keystoreProperties<span class="token punctuation">[</span><span class="token string-literal singleline"><span class="token string">"keyPassword"</span></span><span class="token punctuation">]</span> <span class="token keyword">as</span> String
</span><span class="code-line"> storeFile <span class="token operator">=</span> <span class="token function">file</span><span class="token punctuation">(</span>keystoreProperties<span class="token punctuation">[</span><span class="token string-literal singleline"><span class="token string">"storeFile"</span></span><span class="token punctuation">]</span> <span class="token keyword">as</span> String<span class="token punctuation">)</span>
</span><span class="code-line"> storePassword <span class="token operator">=</span> keystoreProperties<span class="token punctuation">[</span><span class="token string-literal singleline"><span class="token string">"storePassword"</span></span><span class="token punctuation">]</span> <span class="token keyword">as</span> String
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> buildTypes <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// ...</span>
</span><span class="code-line"> <span class="token function">getByName</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"release"</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> signingConfig <span class="token operator">=</span> signingConfigs<span class="token punctuation">.</span><span class="token function">getByName</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"release"</span></span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token comment">// ...</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>配置完毕后，当执行 <code>npm run tauri android build</code> 时，会自动对构建的 APK/AAB 文件进行签名。</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="ios-开发"><a aria-hidden="true" tabindex="-1" href="#ios-开发"><span class="icon icon-link"></span></a>iOS 开发</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="预先准备"><a aria-hidden="true" tabindex="-1" href="#预先准备"><span class="icon icon-link"></span></a>预先准备</h3><div class="wrap-body">
<p>根据苹果政策，MacOS 不允许运行在非 Mac 硬件上，而开发所依赖的 Xcode 工具链只在 MacOS 上可用。</p>
<p>因此，为了进行开发 iOS 和 MacOS 应用，必须要有一台 Mac 设备。</p>
<p>对应用进行签名和发布，需要加入 <a href="https://developer.apple.com/programs/whats-included/">Apple Developer Program（年费 99 美元）</a>。</p>
<p>不付费可以正常使用 Xcode 等工具，但无法进行正式签名和在 App Store 上架。</p>
<p> </p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="签名"><a aria-hidden="true" tabindex="-1" href="#签名"><span class="icon icon-link"></span></a>签名</h3><div class="wrap-body">
<p>iOS 应用的签名现在已经非常简单了。</p>
<p>在 Xcode 打开项目，登录 Apple Developer 账号，在项目配置中找到并勾选自动管理签名即可。</p>
<p>Xcode 会自动帮助我们管理证书，签名等。</p>
<p> </p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="开发调试-1"><a aria-hidden="true" tabindex="-1" href="#开发调试-1"><span class="icon icon-link"></span></a>开发调试</h3><div class="wrap-body">
<p>首先需要在开发环境下打开应用，才能进行调试。</p>
<p>在 Mac 上打开 Safari 浏览器，开启开发者模式，接着找到需要调试的设备即可。</p>
<p>如果是真机调试，则需要在设备上开启开发者模式。</p>
<p> </p>
</div></div></div><div class="wrap h3body-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="环境搭建"><a aria-hidden="true" tabindex="-1" href="#环境搭建"><span class="icon icon-link"></span></a>环境搭建</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<h4 id="安装-xcode"><a aria-hidden="true" tabindex="-1" href="#安装-xcode"><span class="icon icon-link"></span></a>安装 Xcode</h4>
<p>Xcode 是苹果官方的开发工具，提供了完整的开发环境，包括测试，分发，模拟器等。</p>
<p>需要注意的是，Xcode 的版本并非越新越好，而是要根据当前设备的 MacOS 的系统版本来选择。</p>
<p>前往 <a href="https://developer.apple.com/cn/xcode/">Xcode 页面</a> 下载安装 Xcode。</p>
<h4 id="安装-homebrew"><a aria-hidden="true" tabindex="-1" href="#安装-homebrew"><span class="icon icon-link"></span></a>安装 <a href="https://brew.sh/zh-cn/">Homebrew</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ /bin/bash <span class="token parameter variable">-c</span> <span class="token string">"<span class="token variable"><span class="token variable">$(</span><span class="token function">curl</span> <span class="token parameter variable">-fsSL</span> https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh<span class="token variable">)</span></span>"</span>
</span></code></pre>
<h4 id="使用-homebrew-安装-cocoapods"><a aria-hidden="true" tabindex="-1" href="#使用-homebrew-安装-cocoapods"><span class="icon icon-link"></span></a>使用 Homebrew 安装 <a href="https://cocoapods.org/">Cocoapods</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">brew <span class="token function">install</span> cocoapods
</span></code></pre>
<h4 id="增加编译目标"><a aria-hidden="true" tabindex="-1" href="#增加编译目标"><span class="icon icon-link"></span></a>增加编译目标</h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ rustup target <span class="token function">add</span> aarch64-apple-ios x86_64-apple-ios aarch64-apple-ios-sim
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-1"><div class="wrap-header h3wrap"><h3 id="创建-ios-项目"><a aria-hidden="true" tabindex="-1" href="#创建-ios-项目"><span class="icon icon-link"></span></a>创建 iOS 项目</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-1-->
<p>首先创建基础 Tauri 项目。</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 创建 tauri 项目</span>
</span><span class="code-line">$ <span class="token function">npm</span> create tauri-app@latest
</span><span class="code-line"><span class="token comment"># 安装依赖</span>
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span>
</span></code></pre>
<p>手动创建：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @tauri-apps/cli@latest
</span><span class="code-line"><span class="token comment"># 进入项目目录初始化，按照提示输入即可</span>
</span><span class="code-line">$ npx tauri init
</span></code></pre>
<p>创建后，则可以执行以下命令：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 初始化 iOS 开发配置</span>
</span><span class="code-line">$ npx tauri ios init
</span><span class="code-line"><span class="token comment"># 开发 iOS 应用</span>
</span><span class="code-line">$ npx tauri ios dev
</span><span class="code-line"><span class="token comment"># 构建 iOS 应用</span>
</span><span class="code-line">$ npx tauri ios build
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="配置"><a aria-hidden="true" tabindex="-1" href="#配置"><span class="icon icon-link"></span></a>配置</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="配置结构"><a aria-hidden="true" tabindex="-1" href="#配置结构"><span class="icon icon-link"></span></a>配置结构</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>默认配置 <code>tauri.conf.json</code>，还支持 <code>tauri.conf.json5</code> 和 <code>Tauri.toml</code></p>
<table><thead><tr><th align="left">--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>package</code></td><td>包设置</td></tr><tr><td align="left"><code>tauri</code></td><td>Tauri 配置</td></tr><tr><td align="left"><code>build</code></td><td>构建配置</td></tr><tr><td align="left"><code>plugins</code></td><td>插件配置</td></tr></tbody></table>
<p>下面配置能与主配置进行合并</p>
<ul>
<li><code>tauri.linux.conf.json</code> 或 <code>Tauri.linux.conf.toml</code></li>
<li><code>tauri.windows.conf.json</code> 或 <code>Tauri.windows.conf.toml</code></li>
<li><code>tauri.macos.conf.json</code> 或 <code>Tauri.macos.conf.toml</code></li>
</ul>
<p>示例</p>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"build"</span><span class="token operator">:</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"package"</span><span class="token operator">:</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"tauri"</span><span class="token operator">:</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="tauri-配置"><a aria-hidden="true" tabindex="-1" href="#tauri-配置"><span class="icon icon-link"></span></a>Tauri 配置</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<table class="left-align"><thead><tr><th align="left">配置</th><th>Type</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>pattern</code></td><td><a href="#patternkind">PatternKind</a></td><td>应用程序名称</td></tr><tr><td align="left"><code>version</code></td><td><a href="#windowconfig">WindowConfig[]</a></td><td>应用程序版本</td></tr><tr><td align="left"><code>cli</code></td><td><a href="#cliconfig">CliConfig</a></td><td>CLI 配置</td></tr><tr><td align="left"><code>bundle</code></td><td>BundleConfig</td><td>打包器配置</td></tr><tr><td align="left"><code>allowlist</code></td><td>AllowlistConfig</td><td>允许列表配置</td></tr><tr><td align="left"><code>security</code></td><td>SecurityConfig</td><td>安全配置</td></tr><tr><td align="left"><code>updater</code></td><td>UpdaterConfig</td><td>更新程序配置</td></tr><tr><td align="left"><code>systemTray</code></td><td><a href="#systemtrayconfig">SystemTrayConfig</a></td><td>配置应用系统托盘</td></tr><tr><td align="left"><code>macOSPrivateApi</code></td><td>boolean</td><td>macOS 私有API配置</td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="cliconfig"><a aria-hidden="true" tabindex="-1" href="#cliconfig"><span class="icon icon-link"></span></a>CliConfig</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<table class="left-align"><thead><tr><th align="left">配置</th><th>Type</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>description</code></td><td>string?</td><td>将显示在帮助信息中</td></tr><tr><td align="left"><code>longDescription</code></td><td>string?</td><td>将显示在帮助信息中</td></tr><tr><td align="left"><code>beforeHelp</code></td><td>string?</td><td>该信息显示在自动生成的帮助信息之前。这通常用于标题信息</td></tr><tr><td align="left"><code>afterHelp</code></td><td>string?</td><td>显示在自动生成的帮助信息之后。通常用于描述如何使用参数，或者需要注意的注意事项</td></tr><tr><td align="left"><code>args</code></td><td>array?</td><td>命令的参数列表</td></tr><tr><td align="left"><code>subcommands</code></td><td>object?</td><td>该命令的子命令列表</td></tr></tbody></table>
<!--rehype:className=left-align-->
<p>描述 CLI 配置</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="package-配置"><a aria-hidden="true" tabindex="-1" href="#package-配置"><span class="icon icon-link"></span></a>Package 配置</h3><div class="wrap-body">
<table><thead><tr><th align="left">配置</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>productName</code></td><td>应用程序名称</td></tr><tr><td align="left"><code>version</code></td><td>应用程序版本</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="windowconfig"><a aria-hidden="true" tabindex="-1" href="#windowconfig"><span class="icon icon-link"></span></a>WindowConfig</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<p>窗口配置对象</p>
<table><thead><tr><th align="left">配置</th><th>Type</th><th>默认值</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>label</code></td><td>string</td><td>null</td><td>窗口标识符</td></tr><tr><td align="left"><code>url</code></td><td><a href="#windowurl">WindowUrl</a></td><td>view</td><td>窗口的 webview URL</td></tr><tr><td align="left"><code>userAgent</code></td><td>userAgent?</td><td>null</td><td>webview 的用户代理</td></tr><tr><td align="left"><code>fileDropEnabled</code></td><td>boolean</td><td>true</td><td>是否在 Web 视图上启用文件放置</td></tr><tr><td align="left"><code>center</code></td><td>boolean</td><td>false</td><td>窗口是否开始居中</td></tr><tr><td align="left"><code>x</code></td><td>number?</td><td>null</td><td>窗口左上角的水平位置</td></tr><tr><td align="left"><code>y</code></td><td>number?</td><td>null</td><td>窗口左上角的水平位置</td></tr><tr><td align="left"><code>width</code></td><td>number</td><td>800</td><td>窗口宽度</td></tr><tr><td align="left"><code>height</code></td><td>number</td><td>600</td><td>窗口高度</td></tr><tr><td align="left"><code>minWidth</code></td><td>number</td><td>null</td><td>最小窗口宽度</td></tr><tr><td align="left"><code>minHeight</code></td><td>number</td><td>null</td><td>最小窗口高度</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="patternkind"><a aria-hidden="true" tabindex="-1" href="#patternkind"><span class="icon icon-link"></span></a>PatternKind</h3><div class="wrap-body">
<p>应用模式。可以是以下类型中的任意一种：</p>
<h4 id="棕地模式"><a aria-hidden="true" tabindex="-1" href="#棕地模式"><span class="icon icon-link"></span></a>棕地模式</h4>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span> <span class="token property">"use"</span><span class="token operator">:</span> <span class="token string">"brownfield"</span> <span class="token punctuation">}</span>
</span></code></pre>
<h4 id="隔离模式建议出于安全目的"><a aria-hidden="true" tabindex="-1" href="#隔离模式建议出于安全目的"><span class="icon icon-link"></span></a>隔离模式。建议出于安全目的</h4>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"use"</span><span class="token operator">:</span> <span class="token string">"isolation"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"options"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"dir"</span><span class="token operator">:</span> string <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="windowurl"><a aria-hidden="true" tabindex="-1" href="#windowurl"><span class="icon icon-link"></span></a>WindowUrl</h3><div class="wrap-body">
<p>要在 Tauri Web 视图窗口中打开的 URL。可以是以下任何一种类型：</p>
<ul>
<li><code>string</code> (format: <code>uri</code>)：外部 URL。</li>
<li><code>string</code>：应用程序 URL 的路径部分。例如，要加载 <code>tauri://localhost/users/john</code>，只需在此配置中提供 <code>users/john</code></li>
</ul>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="systemtrayconfig"><a aria-hidden="true" tabindex="-1" href="#systemtrayconfig"><span class="icon icon-link"></span></a>SystemTrayConfig</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<table class="left-align"><thead><tr><th align="left">配置</th><th>Type</th><th>默认值</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>iconPath</code></td><td>string(必填)</td><td>null</td><td>系统托盘上使用的默认图标的路径</td></tr><tr><td align="left"><code>iconAsTemplate</code></td><td>boolean</td><td>false</td><td>用于确定图像是否代表 macOS 上的<a href="https://developer.apple.com/documentation/appkit/nsimage/1520017-template?language=objc">模板</a>图像</td></tr><tr><td align="left"><code>menuOnLeftClick</code></td><td>boolean</td><td>true</td><td>确定在 macOS 上托盘图标收到左键点击时菜单是否应该出现</td></tr><tr><td align="left"><code>title</code></td><td>string?</td><td>null</td><td>MacOS 托盘标题</td></tr></tbody></table>
<!--rehype:className=left-align-->
<p>应用程序系统托盘图标的配置</p>
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&#x26;A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script async src="https://www.googletagmanager.com/gtag/js?id=G-9MWEWXSDQK"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9MWEWXSDQK');</script><script src="../data.js?v=1.9.0" defer></script><script src="../js/fuse.min.js?v=1.9.0" defer></script><script src="../js/main.js?v=1.9.0" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
Reference in New Issue View Git Blame Copy Permalink