Scratch3.0二次开发的心得

2019-09-12 12:27:04长沙做网站严微
经过一个月的努力,我基于Scratch3.0的开源代码完成了一整套的Scratch3.0的二次开发,其效果如下:



(这个是vue的项目,通过在该个人中心里打开作品,跳到Scratch3.0项目里,并实现作品打开)

(这是通过vue项目的个人中心跳转打开作品后的效果,主要是通过地址栏获取作品id)

(老师或者学生都可以对作品进行再次编辑保存,以及一开始创作时进行保存作品)

(这里是素材库角色的界面,所有素材都是通过调用接口变成了我们自己的素材,不是用官方的素材库。以及标签也是通过接口调用)

二次开发的主要功能有:
1.增加登录,注册、微信扫码登录,以及忘记密码
2.加载默认作品,并将Cat猫更换成自己公司的
3.素材库包括角色,造型,声音,背景;通过调接口获取素材,改变成从自己后台上传素材
4.保存作品到服务器
5.增加作品展示页面,在不同平台上展示作品
6.增加编辑已有作品功能,尤其是在不同平台上将作品打开
7.动态插入汉化的语言到Scratch的语言库
8.自定义默认角色

技术栈

前端部分基于scratch3.0的开源代码二次开发,要求对react+redux框架比较熟悉,能够理解项目结构与其组件架构思路。(其实我一开始对react一点都不熟悉,没办法就硬着头皮开发完成)


antd引入
react组件化开发难免要写很多基础效果的组件,比如模态框、错误提示信息等。

因为是个人项目没有UI设计,所以我觉得能省时省力、简洁高效即可,所以引入了antd组件库。

使用antd并不难,最难的还是如何引入antd到webpack编译环境中。

antd自身的css是全局名字,而我们开发项目一般是使用了css module的,为了避免影响到antd的css名字,我们需要分别对待:

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

上面这段通过include指定了对于依赖的antd模块,没有采用css modules配置项。

而对于我们自己的项目则通过exclude排除掉antd,同时开启css modules:

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

options里面的东西除了modules需要注意区分,其他选项根据自己项目配置即可。

另外babel-loader里也要求增加一个插件配置,其目的应该是自动加载antd组件依赖的css的意思:

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

出售源码/服务
最近很多机构和个人找到我的微信,问我是否卖源码或者可以提供服务。

为了确保大家买得放心,买的公平,我在这里统一说明一下:

买源码:基本上是有研发能力的个人/机构,想透过源码了解核心解决方案,该方案采用买断制:提供源码与咨询,价格3万元。
有意向加微信详聊。

上一篇:

scratch3.0自定义logo

下一篇:

Scratch3.0保存作品时获取封面图 返 回

Copyright © 2009-2019 Ywcms.Com All Right Reserved.  湖南严微网络科技有限公司©版权所有   湘ICP备16006489号-2