作为大家学习参考的第一个项目。它可能有点粗糙。如有不合理之处，请指教。最近朋友圈出现了很多DIY的H5游戏。通过添加拖放、组合元素，DIY自定义场景，合成新的H5展示形式进行分享。作者也以操作DOM的形式做了一个类似的项目。现整合成一个简单的框架分享给大家。你只需要根据自己的需要完成布局和风格，按照下面的说明生成你自己的空间。自定义H5。github地址：https://github.com/kilojq/cus...目录结构├─package.json#项目配置├─README.md#项目描述├─node_modules#npm依赖包├─webpack.base.js#webpack配置文件├─webpack.dev.js#webpack配置文件├─webpack.prov.js#webpack配置文件├─server.js#节点服务├─config.js#配置项目资源基路径├─.babelrc#babel配置││├─src#前端代码│││├─App.js#项目入口文件│├─index.html#首页│├─data.js#图片数据文件，由build-data-json生成.js，运行`npmrundev`或`npmrunbuild`、`npmrunbuild-json:prov`等命令生成│├─css#样式文件夹│├─js#脚本文件夹│├─media#background音乐文件文件夹│└─img#图片文件夹││├─utils#工具文件│││└─build-data-json.js#用于自动生成图片数据文件和复制打包图片││└Demo#案例文件操作安装依赖模块：npminstallpreviewDemo示例：nodeserver.js生成镜像data.js镜像数据文件：npmrunbuild-json:dev#开发环境npmrunbuild-json:prov#生产环境生成打包文件：npmrunbuild开发环境启动本地服务：npmstart/npmrundev说明项目需要自动生成一定格式的imagejson数据，用于项目预加载和图片拖动元素遍历生成，而webpack打包图片会打包处理文件，改变图片的目录结构，无法满足这个需求，所以我封装了一个实现这个功能的方法，即utils/build-data-json。js，可以通过执行npmrunbuild-json命令来实现（到现在为止，还没有找到相关的webpack插件可以实现这个功能需求，如果知道哪个插件可以实现，欢迎私信我知道了。非常感谢！！！）这里是图片预览页面加载和拖拽元素的图片引用路径都是node生成的。需要注意的是，图片文件要按要求放置。页面UI界面相关的图片要放在img/文件夹的根目录下面，请将选项图片分类到不同的文件夹中，将这些分类后的文件夹放在img/Assest目录下。这样在项目运行时，会根据分类文件夹自动生成对应的元素菜单选项和文件夹名称，如下图：如果要修改选项名称，可以配置tabBtnNames入口文件src/App.js中App.init()的选项来实现，详见初始化配置部分。作用：初始配置暂时只有一个配置选项名称，后续会逐步更新其他功能和配置选项，如更换背景、元素是否可以旋转、缩放等功能。//App.jsconstconfig={tabBtnNames:{//配置选项名称"background":"Background","Furniture":"Furniture","Kid":"Character","Cat":"Cat","Dog":"Dog",},backgroundSetable:true,//是否启用背景设置，默认值为falsebackgroundGroupName:'background',//指定背景图片的目录名，默认值为'background'rotatable:true,//元素是否可以旋转，默认值为truescalable:true//元素是否可以缩放，默认值为true}App.版权方觉得构成侵权，请联系本人（QQ：418291886），可立即删除。
