經(jīng)過一個(gè)月的努力，我基于Scratch3.0的開源代碼完成了一整套的Scratch3.0的二次開發(fā)，其效果如下：



(這個(gè)是vue的項(xiàng)目，通過在該個(gè)人中心里打開作品，跳到Scratch3.0項(xiàng)目里，并實(shí)現(xiàn)作品打開)

（這是通過vue項(xiàng)目的個(gè)人中心跳轉(zhuǎn)打開作品后的效果，主要是通過地址欄獲取作品id）

（老師或者學(xué)生都可以對(duì)作品進(jìn)行再次編輯保存，以及一開始創(chuàng)作時(shí)進(jìn)行保存作品）

（這里是素材庫(kù)角色的界面，所有素材都是通過調(diào)用接口變成了我們自己的素材，不是用官方的素材庫(kù)。以及標(biāo)簽也是通過接口調(diào)用）

二次開發(fā)的主要功能有：
1.增加登錄，注冊(cè)、微信掃碼登錄，以及忘記密碼
2.加載默認(rèn)作品，并將Cat貓更換成自己公司的
3.素材庫(kù)包括角色，造型，聲音，背景；通過調(diào)接口獲取素材，改變成從自己后臺(tái)上傳素材
4.保存作品到服務(wù)器
5.增加作品展示頁面，在不同平臺(tái)上展示作品
6.增加編輯已有作品功能，尤其是在不同平臺(tái)上將作品打開
7.動(dòng)態(tài)插入漢化的語言到Scratch的語言庫(kù)
8.自定義默認(rèn)角色

技術(shù)棧

前端部分基于scratch3.0的開源代碼二次開發(fā)，要求對(duì)react+redux框架比較熟悉，能夠理解項(xiàng)目結(jié)構(gòu)與其組件架構(gòu)思路。（其實(shí)我一開始對(duì)react一點(diǎn)都不熟悉，沒辦法就硬著頭皮開發(fā)完成）


antd引入
react組件化開發(fā)難免要寫很多基礎(chǔ)效果的組件，比如模態(tài)框、錯(cuò)誤提示信息等。

因?yàn)槭莻€(gè)人項(xiàng)目沒有UI設(shè)計(jì)，所以我覺得能省時(shí)省力、簡(jiǎn)潔高效即可，所以引入了antd組件庫(kù)。

使用antd并不難，最難的還是如何引入antd到webpack編譯環(huán)境中。

antd自身的css是全局名字，而我們開發(fā)項(xiàng)目一般是使用了css module的，為了避免影響到antd的css名字，我們需要分別對(duì)待：

        {
            test: /\.css$/,
            include: [/[\\/]node_modules[\\/].*antd/],
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    camelCase: true
                }
            }]
        }]

上面這段通過include指定了對(duì)于依賴的antd模塊，沒有采用css modules配置項(xiàng)。

而對(duì)于我們自己的項(xiàng)目則通過exclude排除掉antd，同時(shí)開啟css modules：

        {
            test: /\.css$/,
            include: [/[\\/]node_modules[\\/].*antd/],
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    camelCase: true
                }
            }]
        }]

options里面的東西除了modules需要注意區(qū)分，其他選項(xiàng)根據(jù)自己項(xiàng)目配置即可。

另外babel-loader里也要求增加一個(gè)插件配置，其目的應(yīng)該是自動(dòng)加載antd組件依賴的css的意思：

        {
            test: /\.css$/,
            include: [/[\\/]node_modules[\\/].*antd/],
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    camelCase: true
                }
            }]
        }]

出售源碼/服務(wù)
最近很多機(jī)構(gòu)和個(gè)人找到我的微信，問我是否賣源碼或者可以提供服務(wù)。

為了確保大家買得放心，買的公平，我在這里統(tǒng)一說明一下：

買源碼：基本上是有研發(fā)能力的個(gè)人/機(jī)構(gòu)，想透過源碼了解核心解決方案，該方案采用買斷制：提供源碼與咨詢，價(jià)格3萬元。
有意向加微信詳聊。