跳到主要内容
版本:下个版本 🚧

前端

脚本注入

当 Wails 为您的index.html提供服务时,默认情况下,它会将 2 个脚本注入<body>标签以加载/wails/ipc.js/wails/runtime.js。 这些文件分别安装绑定和运行时。

下面的代码显示了这些默认注入的位置:

<html>
<head>
<title>injection example</title>
<link rel="stylesheet" href="/main.css" />
<!-- <script src="/wails/ipc.js"></script> -->
<!-- <script src="/wails/runtime.js"></script> -->
</head>

<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>

<script src="/main.js"></script>
</body>
</html>

覆盖默认脚本注入

为了给开发人员提供更大的灵活性,有一个meta标签可用于自定义此行为:

<meta name="wails-options" content="[options]" />

选项如下:

描述
noautoinjectruntime禁用自动注入 /wails/runtime.js
noautoinjectipc禁用自动注入 /wails/ipc.js
noautoinject禁用所有脚本自动注入

可以使用多个选项,前提是它们以逗号分隔。

此代码完全有效并且与自动注入版本的操作相同:

<html>
<head>
<title>injection example</title>
<meta name="wails-options" content="noautoinject" />
<link rel="stylesheet" href="/main.css" />
</head>

<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>

<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<script src="/main.js"></script>
</body>
</html>