Bipes-Blockly项目二次开发/案例功能（九）

Bipes-Blockly项目二次开发/案例功能（九）

今天带来一期案例功能，该功能模范mixly的案例。先看一段VCR。 广告：需要二开Bipes，Scratch，blockly可以找我。 项目地址：maxuecan.github.io/Bipes/index…

[video(video-qO1DzzPh-1770270066029)(type-csdn)(url-live.csdn.net/v/embed/513…)]

第一：页面左下角有个案例模块

在三种模式下，分了两套案例，不同模式切换会相应显示对应的案例。点击文件名称，可以加载文件内容。

第二：代码解析

案例列表用的是layui

ui/index.html 

<link rel="stylesheet" href="./plugins/layui/layui.css">
<script src="./plugins/layui/layui.js" ></script>

<footer class="footer-box">
    <div class="example-box">
      <img src="./media/new-icon/example.png" alt="">
      <span>案例</span>
    </div>
  </footer>

ui/components/example-preview.js

import ExamplesList from '@/config/examples-config.js'

export default class ExamplePreview {
    constructor(props) {
        this.state = false
        this.getLocalSettings = props.getLocalSettings
        this.tree = null
        this.mode = undefined

        $('.footer-box').append(this.render())
        this.initEvent()
        this.renderTree()
    }
    initEvent() {
        $('.example-box').on('click', this.changeConsole.bind(this))
        $('.example-h-c').on('click', this.changeConsole.bind(this))
    }
    // 显示隐藏案例
    changeConsole() {
        this.state = !this.state
        $('.example-container').css('display', this.state ? 'block' : 'none')
    }
    // 渲染案例内容
    async renderTree() {
        let { mode } = await this.getLocalSettings()

        let list = this.getList(mode)
        this.mode = mode
        let that = this
        layui.use(function() {
            that.tree = layui.tree

            that.tree.render({
                elem: '#example-content',
                id: 'my-tree',
                data: list,
                showCheckbox: false,
                showLine: true,
                click: function(obj) {
                    let { title } = obj.data
                    loadExampleFromURL(`/${that.mode}/${title}`)
                }
            })
        })
    }
    // 重置案例内容
    reload(mode) {
        this.mode = mode
        if (this.state) {
            $('.example-container').css('display', 'none')
        }
        let list = this.getList(mode)

        this.tree.reload('my-tree', {
            data: list
        })
    }
    // 获取文件列表
    getList(mode) {
        let list = ExamplesList.map(item => {
            if (mode === 'turtle' && item.title === 'turtle') {
                return item.children
            } else if (['hardware', 'offline'].includes(mode) && item.title === 'hardware') {
                return item.children
            }
        }).filter(item => item !== null && item !== undefined)[0]
        return list
    }

    render() {
        return `
            <div class="example-container">
                <div class="example-h">
                    <img class="example-h-c" src="./media/new-icon/close1.png" alt="">
                </div>
                <div id="example-content"></div>
                <div class="triangle-down"></div>
            </div>
        `
    }
}

第三：案例文件夹

案例文件夹的格式配置在ui/examples下，这里用ai写了生成数据脚本，也就是在ui/create_examples.js，需要在ui终端下使用node运行 node create_example.js

总结

案例功能，实际上是模范mixly的例程功能。总体上难度也不是很大，有需要可以看下日志改动了哪些文件