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

创建展示页面的jsx文件？

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

创建展示页面的jsx文件？

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

const DEFAULT_PROJECT_ID = '80';const Project = ({isPlayerOnly, projectId}) => (<Box className={classNames(styles.stageOnly)}><GUIisPlayerOnly={isPlayerOnly}projectId={projectId}isCreator={false}isFullScreen={false}/></Box>
);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(<WrappedProject isPlayerOnly/>, 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币，感谢！

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

NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1
NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1 NX9+VS2012#include <uf.h> #include <uf_modl.h> #inclu ...
NX二次开发-UFUN创建工程图注释UF_DRF_create_note
NX二次开发-UFUN创建工程图注释UF_DRF_create_note NX9+VS2012#include <uf.h> #include <uf_drf.h> #incl ...
NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer
NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer #include <UF_MODL.h>//创建块(创建长方体) bool CreateBlock(con ...
c# CAD二次开发类库创建各种图形、直线、圆、多段线、正方形、点等
c# CAD二次开发类库创建各种图形.直线.圆.多段线.正方形.点等 using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD ...
NX二次开发-UFUN创建图纸注释uc5540
NX二次开发-UFUN创建图纸注释uc5540 NX9+VS2012#include <uf.h> #include <uf_drf.h>UF_initialize();//创 ...
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep 这个函数挺复杂的,我也是参考别人去做的.但是我还是没有做出来多段引导线的. 我们在做钻头螺旋槽的时候,一般都是拿一个封闭截面,三 ...
NX二次开发-UFUN创建圆锥UF_MODL_create_cone1
NX二次开发-UFUN创建圆锥UF_MODL_create_cone1 NX11+VS2013#include <uf.h> #include <uf_modl.h>UF_in ...
NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp
NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp NX8.0+VS2010#include <uf.h> #include <uf_ ...
scratch二次开发(一)
一.scratch模块 ## scratch-vm 虚拟机解析加载序列化项目文件.扩展功能实现.根据相应事件渲染舞台### scratch-audio 声音引擎解析.播放声音### scratch-b ...
【Revit 二次开发】创建带箭头的文字注释（字体设置+引线箭头设置）
此篇文章仅是自己的开发经验分享,不具备官方参考价值,如有不足,欢迎批评指正开发目的: 创建一个带箭头的文字注释字体为新宋体,大小2.5mm,宽度系数0.7,箭头为30度实心箭头 like this ...

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

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

创建展示页面的jsx文件？

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

创建展示页面的jsx文件？

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

最后

出售源码/服务

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

最新文章

热门文章