Blockly-可视化编程工具入门待更新

本文介绍了Blockly,一个开源的Web可视化编程工具,支持多种编程语言的源码导出。其优势在于开源、可扩展和高可用性。通过下载源码并进行二次开发,可以进行自定义块的添加和功能调整。文章提供了初步集成到Web环境的步骤,并给出了Demo的试用指南,包括图示、运行代码、左侧列表HTML、Block定义JS以及生成代码的回调JS。
摘要由CSDN通过智能技术生成

概述

基于Web的、开源的、可视化程序编辑器。
Blockly 是一个完全客户端应用,它无需服务端的任何支持(除非你要使用云存储等服务端功能),且没有第三方的依赖(除非你想重新编译内核),一切都是开源的。

优势

  1. 代码可导出 - Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。
  2. 开源 - Blockly 开放所有源码,你可以复制、修改、并将其应用到你的网站或Andorid等应用中
  3. 可扩展 - 你可以按需要调整 Blockly,包括根据你的API添加新自定义“块”、移不需要的块和功能等。
  4. 高可用 - Blockly 不是玩具,你可以用它来实现复杂的编程任务 国际化 - Blockly 已被翻译40+种语言 Blockly
  5. 编辑器快速集成到Web、Android或iOS环境中。

通过demo二次开发

下载zip https://github.com/google/blockly/zipball/master
下载源码并解压后,可以在浏览器打开demos/fixed/index.html文件,验证 Blockly 的块是否可以拖动等。
demos有其他demo可以试用

1.图示:

在这里插入图片描述

2.运行run代码
function executeBlockCode() {
   
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    var initFunc = function (interpreter, scope) {
   
        var alertWrapper = function (text) {
   
            text = text ? text.toString() : '';
            return interpreter.createPrimitive(alert(text));
        };
        interpreter.setProperty(scope, 
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值