Bipes-Blockly项目二次开发/web-python（四）

Bipes-Blockly项目二次开发/web-python（四）

网页运行python代码，这个功能bipes项目是没有的，bipes运行python是要和硬件进行连接成功后，向硬件发送代码或指令，才能运行python。

这次，我将使用skulpt.js插件，实现网页运行python，以及后续海龟画图功能。 项目地址：maxuecan.github.io/Bipes/index…

python插件选择

前端python插件其实有很多，例如：Brython，Skulpt，Pyodide等。这里使用Skulpt，如果需要更丰富的功能，可以使用Brython等。

Skulpt.js插件

安装插件
npm install skulpt -S

通信

这里借助node，events功能块做模块通信

const EventEmitter = require('events')

class EventEmitterController extends EventEmitter {
    constructor() {
        super()
			 // 事件监听
        this.on('open-control-pewivew', () => {
            this.emit('control-pewivew-change-console', true)
        })
    }
}

export default new EventEmitterController()

js引用

skulpt的使用也比较简单，首先是初始化Sk.configure，绑定输出，读取函数，最后给按钮添加事件。

// 使用方式一
import * as Sk from 'skulpt';
// 使用方式二
// import 'skulpt/dist/skulpt.js';
// import 'skulpt/dist/skulpt-stdlib.js';
import Common from '../components/common'
import EventEmitterController from './event-emitter-controller'

export default class SkulptController extends Common {
    constructor() {
        super()
        /* skulpt初始化配置 */
        Sk.pre = "output";
        Sk.configure({
            output: this.outF, // 输出函数
            read: this.buildinRead, // 读取函数
            __future__: Sk.python3, // 启用python3特性
        });

        this.sk = Sk
    }
    initEvent() {
        // 运行按钮
        $('#sk-run').on('click', () => {
            this.runPythonCode()
            EventEmitterController.emit('open-control-pewivew')
        })
    }
    // 输出内容，将结果输出在终端
    outF(text) {
        term.write(text + '\r')
    }
    buildinRead(file) {
        // console.log("Attempting file: " + Sk.ffi.remapToJs(file));
        if (
            Sk.builtinFiles === undefined ||
            Sk.builtinFiles.files[file] === undefined
        ) {
            throw "File not found: '" + file + "'";
        }

        return Sk.builtinFiles.files[file];
    }
    // 执行python代码
    runPythonCode() {
        let code = Code.generateCode()

        let myPromise = this.sk.misceval.asyncToPromise(() => {
            return this.sk.importMainWithBody("<stdin>", false, code, true);
        });

        myPromise
            .then((res) => {})
            .catch((err) => {})
    }
}

界面效果

总结

在没有连接硬件的情况下，前端运行python，只能建立在对一些基础编程语法的认识，学习等，适用范围比较有限。要想在教育里面涉及更多，还是得和硬件结合。skulpt插件能做不止运行python，还能做海归图像化，后面也会尝试把这个功能加进去，以及保留原有的硬件连接三种模式。