积木开发系列----Blockly初体验

最新推荐文章于 2024-05-17 13:52:13 发布

VIP文章 CallMT

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量983

点赞数 1

分类专栏：谷歌Blockly实战--玩转积木拼装文章标签： javascript html html5

本文链接：https://blog.csdn.net/slash0781/article/details/120032734

版权

介绍

这一节将会使用Blockly来创建一个最基础的可视化编程环境。这个应用的网页将会包含一个目前Blockly支持的所有Block的Workspace、实时生成JavaScript代码。其中，Workspace中包含：支持所有Blocks的工具箱，编程区域、支持一些基本操作的上下文菜单等等。
这里按照如下的步骤进行：
1、集成Blockly的API库
2、绘制HTML布局
3、配置Workspace的基础属性，网页中注入Blockly
4、编写实时代码翻译代码
完成了这4个步骤，你会得到如下所示的页面
在这里插入图片描述

集成Blockly的API库

集成Blockly有三种方式，如果你熟悉前端的开发，我想这些方式你一定不会觉得陌生：

方式1：以NPM方式继承入项目中：
Blocky 发布在 npm registry 和 yarn registry 上。推荐使用这种方式访问 Block;y，这是因为：
 它更容易紧跟上 Blockly 上的变化。
 它鼓励使用插件而非简单的修补 Blocky。
方法如下：

集成Blockly
npm install --save blockly
代码中引入模块
import Blockly from 'blockly';

方法2：Unpkg方式引入项目中

例如：
<script src="https://unpkg.com/blockly/blockly.min.js"></script>

方法3：Github方式引入项目中：

下载地址如下”：
https://github.com/google/blockly/zipball/master
https://github.com/google/blockly/tarball/master
https://github.com/google/blockly

导入工程后你可以这样引用Blockly：

<script src="blockly_compressed.js"></script>

依据我们这个版本的需求，我们还需要额外引入代码编译器，目标是生成JavaScript代码以及相关的一些文件，因此，代码如下：

<!--Blockly核心-->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!--多语种支持，英文模式-->
<script src="https://unpkg.com/blockly/msg/en.js"></script>
<!--JAVASCRIPT 编译器-->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>

绘制HTML布局

这里的主要目的是在HTML文件中准备一个容器，我在这里使用

标签来作为Blockly容器：

	<body onload="init()">
		<table>
			<tr>
				<td>
				  <!--Blockly 容器->
				  <div id="div_1" style="height: 480px; width: 1000px;"></div>
				</td>
				<td>
				  <!--代码显示区域->
				  <input id="show_1" style=

最低0.47元/天解锁文章

CallMT

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
积木开发系列----Blockly初体验

介绍这一节将会使用Blockly来创建一个最基础的可视化编程环境。这个应用的网页将会包含一个目前Blockly支持的所有Block的Workspace、实时生成JavaScript代码。其中，Workspace中包含：支持所有Blocks的工具箱，编程区域、支持一些基本操作的上下文菜单等等。这里按照如下的步骤进行：1、集成Blockly的API库2、绘制HTML布局3、配置Workspace的基础属性，网页中注入Blockly4、编写实时代码翻译代码完成了这4个步骤，你会得到如下所示的页面
复制链接

扫一扫