概述
pxt-blockly 是一款基于 Google Blockly 的 Web 端编程工具，它可以让学习者在不写代码的情况下，使用图形化的方式设计程序，从而降低编程门槛，适合初学者学习。
pxt-blockly 并非一个独立的产品，它是 Microsoft MakeCode 的一部分。不过，通过 npm 安装 pxt-blockly 和其相关模块，你可以在自己的前端项目中使用这个工具，享受它带来的便利。
在本篇文章中，我们将详细介绍如何通过 npm 安装和使用 pxt-blockly。
安装
首先，你需要在你的项目中安装 pxt-blockly 包和其相关依赖：
--- ------- ----------- ----------------
pxt-blockly 需要依赖 makecode-blockly，因此也需要安装后者。
使用
在安装完成之后，你需要在你的项目中导入 pxt-blockly：
------ - -- ---------- ---- --------------
pxtBlockly 对象中提供了一些有用的 API，比如 init、setToolbox 等。其中 init 方法用来初始化 Web 端编程工具。setToolbox 方法则用来设置工具栏。
下面是一个示例代码：
------ - -- ---------- ---- --------------
-----------------
-------- -
-----
--------- --------- -----------------
------ ---------------------------
------ -----------------------------
-----------
--------- --------- -----------------
------ ---------------------------
------ -------------
------- -------------------
------ ---------------------
---------
--------
--------
-----------
------
-
---
-----------------------
-----
--------- --------- -----------------
------ ---------------------------
------ -----------------------------
-----------
--------- --------- -----------------
------ ---------------------------
------ -------------
------- -------------------
------ ---------------------
---------
--------
--------
-----------
------
---这里展示了两个例子：
- init 方法调用时，传入了一个包含一些块的 XML 字符串，用来初始化左侧的工具栏；
- setToolbox 方法调用时，传入了 XML 字符串，用来替换掉原来的工具栏。
不过这两个方法都需要在 DOM 加载完成之后才能调用。如果你是使用 Vue 或 React 等框架开发前端项目，可以在 mounted 钩子中调用这两个方法。
结语
pxt-blockly 作为一款 Web 端编程工具，相比传统的文本编程具有更好的可视化效果，也更容易上手。通过 npm 安装 pxt-blockly 和其相关依赖，以及合理调用 API，可以使得 Web 端编程工具在你的前端项目中得以使用。
更多的 API 和用法，可以参考官方文档：https://makecode.com/writing-docs/pxt-blockly.
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedbf39b5cbfe1ea0611bca