Scratch二次开发——如何创建单独的Scratch作品展示页？

如何创建单独的Scratch作品展示页？

 

创建展示页面的jsx文件？

配置webpack.config.js编译生成展示页面

---

创建展示页面的jsx文件？

     创建project.jsx的内容和css样式，加入src/playground文件中。

     

const DEFAULT_PROJECT_ID = '80';

const Project = ({isPlayerOnly, projectId}) => (
    
        
    
);

Project.propTypes = {
    isPlayerOnly: PropTypes.bool,
    projectId: PropTypes.string
};

const mapStateToProps = state => {
    const pid = window.location.hash.substring(1) || DEFAULT_PROJECT_ID;
    return{
        isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
        projectId:pid
    }
};

const mapDispatchToProps = dispatch => ({
    onSeeInside: () => dispatch(setPlayer(false))
});

const ConnectedProject = connect(
    mapStateToProps,
    mapDispatchToProps
)(Project);

// note that redux's 'compose' function is just being used as a general utility to make
// the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
// ability to compose reducers.
const WrappedProject = compose(
    AppStateHOC,
    HashParserHOC
)(ConnectedProject);

const appTarget = document.createElement('div');
document.body.appendChild(appTarget);

ReactDOM.render(, appTarget);

获取地址栏中的#id:    const pid = window.location.hash.substring(1).

通过id请求后台显示指定的作品内容。

配置webpack.config.js编译生成展示页面

    对webpack.config.js 的module.exports=[]  进行修改配置，然后 npm run build重新编译scratch  (react.js)

    

 defaultsDeep({}, base, {
        entry: {
            'lib.min': ['react', 'react-dom'],
            'gui': './src/playground/index.jsx',
            'blocksonly': './src/playground/blocks-only.jsx',
            'compatibilitytesting': './src/playground/compatibility-testing.jsx',
            'player': './src/playground/player.jsx',
            'project': './src/playground/project.jsx'
        },
       plugins: base.plugins.concat([
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
                'process.env.DEBUG': Boolean(process.env.DEBUG),
                'process.env.GA_ID': '"' + (process.env.GA_ID || 'UA-000000-01') + '"'
            }),
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'gui'],
                template: 'src/playground/index.ejs',
                title: '小小鲁创客Scratch编程考级练习场',
                sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
            }),
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'blocksonly'],
                template: 'src/playground/index.ejs',
                filename: 'blocks-only.html',
                title: '小小鲁创客Scratch编程考级练习场: Blocks Only Example'
            }),
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'compatibilitytesting'],
                template: 'src/playground/index.ejs',
                filename: 'compatibility-testing.html',
                title: '小小鲁创客Scratch编程考级练习场: Compatibility Testing'
            }),
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'player'],
                template: 'src/playground/index.ejs',
                filename: 'player.html',
                title: '小小鲁创客Scratch编程考级练习场: Player Example'
            }),
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'project'],
                template: 'src/playground/index.ejs',
                filename: 'project.html',
                title: '小小鲁创客Scratch编程考级练习场'
            }),
            new CopyWebpackPlugin([{
                from: 'static',
                to: 'static'
            }]),
            new CopyWebpackPlugin([{
                from: 'node_modules/scratch-blocks/media',
                to: 'static/blocks-media'
            }]),
            new CopyWebpackPlugin([{
                from: 'extensions/**',
                to: 'static',
                context: 'src/examples'
            }]),
            new CopyWebpackPlugin([{
                from: 'extension-worker.{js,js.map}',
                context: 'node_modules/scratch-vm/dist/web'
            }])
        ])
    })

   将创建的单页面prject.jsx配置进去，chunks:['lib.min','project'].   lib.min.jsx属于库依赖。

   主要修改defaultsDeep的两个字段

  entry

  plugins

   新加入部分

 'project': './src/playground/project.jsx'

 

new HtmlWebpackPlugin({
                chunks: ['lib.min', 'project'],
                template: 'src/playground/index.ejs',
                filename: 'project.html',
                title: '小小鲁创客Scratch编程考级练习场'
            })

最后

完成的成品：https://www.10jifen.com/scratch/project.html#128

关于scratch3.0二次开发继续更新，希望对大家有帮助。

出售源码/服务

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

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

• 买源码：基本上是有研发能力的个人/机构，想透过源码了解核心解决方案，该方案采用买断制：提供源码与咨询，价格3万元。
• 买服务：对技术不了解，但想提升机构形象和信息化的机构，该方案采用年费制：私有化搭建，价格5000元/年，包括服务器费用（域名与资源图片存储费用500元/年，根据存储量决定）。

有意向加微信详聊。

如果文章帮助了你，请在右边点击打赏5C币，感谢！