Mingcedar

所属产品: Mingcedar Studio DESIGNER

Click Script 点击脚本 | Mingcedar Studio

点击时执行 JavaScript，可通过 Condition 限制执行，用于确认、Tag 读写、组件样式和页面跳转等自定义动作。

首次发布 最近更新

<div class="manual-doc-article manual-doc-article-section"><h2 id="click-script-interaction">交互: Click Script 点击脚本</h2>

点击时执行 JavaScript，可通过 Condition 限制执行，用于确认、Tag 读写、组件样式和页面跳转等自定义动作。

<div class="doc-card-list">

<article class="doc-card">

<h3 id="click-script-interaction-item-1">功能说明</h3>

<p>Click Script 位于 Interactions，适用于内置行为未覆盖的自定义点击逻辑。脚本可访问 object、objects、event、tag、page、presentation、shape、hqVisuDesigner 和 globals。</p>

</article>

<article class="doc-card doc-card-warn">

<h3 id="click-script-interaction-item-2">字段配置</h3>

<p>General 可修改 Behavior Name，Component Name 只读；Trigger 固定为 Click。Interaction Setup 包含以下字段：</p>

<ul>

<li>Click Script：点击时执行的脚本，可包含条件判断、读写标签、修改组件和弹窗等多行逻辑。使用 return 可提前退出或返回结果。</li>

<li>Condition：决定是否执行本次点击，默认 true。填写能立即算出 true / false 的表达式，例如 ReadTagBoolean(...) 或比较式；结果为 false 时跳过本次操作。</li>

<li>脚本里可用的标签方法：ReadTagBoolean/Integer/Double/String；真实用户点击脚本还可调用 WriteTagBoolean/Integer/Double/String。组件和导航使用 hqVisuDesigner（setComponentFill / setComponentText / setComponentVisible / openPage / openScreen 等）。</li>

<li>异步方法（fetch、setTimeout、setInterval 等）只能写在 Click Script 这种脚本体里，不要写进 Condition（同步求值位）。</li>

<li>脚本快捷方法按钮会按当前光标所在框给片段：在 Click Script 给完整脚本片段，在 Condition 给短表达式片段。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>JavaScript</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: JavaScript">复制代码</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#6A737D">// Click Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> v </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> prompt</span><span style="color:#24292E">(</span><span style="color:#032F62">"输入设定值"</span><span style="color:#24292E">, </span><span style="color:#032F62">"0"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (v </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> null</span><span style="color:#D73A49"> ||</span><span style="color:#24292E"> v </span><span style="color:#D73A49">===</span><span style="color:#032F62"> ""</span><span style="color:#24292E">) { </span><span style="color:#D73A49">return</span><span style="color:#24292E">; }</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> n </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> parseInt</span><span style="color:#24292E">(v, </span><span style="color:#005CC5">10</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#6F42C1">isNaN</span><span style="color:#24292E">(n)) { </span><span style="color:#6F42C1">alert</span><span style="color:#24292E">(</span><span style="color:#032F62">"请输入整数"</span><span style="color:#24292E">); </span><span style="color:#D73A49">return</span><span style="color:#24292E">; }</span></span>

<span class="line"><span style="color:#6F42C1">WriteTagInteger</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.SETPOINT"</span><span style="color:#24292E">, n);</span></span>

<span class="line"></span>

<span class="line"><span style="color:#6A737D">// Condition</span></span>

<span class="line"><span style="color:#6F42C1">ReadTagBoolean</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.ALLOW_OP"</span><span style="color:#24292E">, </span><span style="color:#005CC5">false</span><span style="color:#24292E">)</span></span></code></pre></div>

</article>

<article class="doc-card">

<h3 id="click-script-interaction-item-3">适用场景</h3>

<p>用于一次点击执行多个步骤或自定义动作，例如：</p>

<ul>

<li>确认后再下发：先 confirm/prompt 让操作员确认或输入，再 WriteTagInteger/WriteTagBoolean 写入。</li>

<li>点击联动多个组件：一次点击里改若干组件的填充色、文本或显示隐藏（hqVisuDesigner.setComponentFill / setComponentText / setComponentVisible）。</li>

<li>带前置条件的操作按钮：用 Condition 接上“允许操作/已登录/在手动模式”等标签，未满足时这次点击直接不执行。</li>

</ul>

</article>

<article class="doc-card doc-card-warn">

<h3 id="click-script-interaction-item-4">限制与常见问题</h3>

<p>常见注意事项：</p>

<ul>

<li>写入仍受宿主的权限校验、确认、原因记录和异步处理约束；调用 WriteTag 不代表设备已成功接收，应在运行平台核对结果。</li>

<li>Condition 必须同步返回判断结果，不支持 fetch() 等返回 Promise 的异步调用。</li>

<li>多行 Click Script 可自然执行结束，无需在末尾添加 return；用户取消等需要提前退出的分支可使用 return。</li>

<li>跳转不要写相对磁盘路径：同包用 hqVisuDesigner.openPage(&quot;页名&quot;)，跨画面包用 hqVisuDesigner.openScreen(&quot;SCREEN_CODE&quot;)，外链才用网址。</li>

</ul>

</article>

</div>

<div class="docs-note-grid manual-doc-image-grid">

<figure class="docs-note-card manual-doc-image-card" id="click-script-interaction-image-1">

<img src="/WEB_img/HQPPT/current/interaction/click-script.png" alt="Click Script 点击脚本行为编辑器" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 1: Click Script 编辑器</strong>

<p>在 Click Script 框写点击时运行的脚本，用 Condition 控制是否允许点击。</p>

</figcaption>

</figure>

</div>

</div>