摘要：筆者也用操作的形式做了一個類似項目，現(xiàn)在整合成一個簡易的框架分享給大家，只需要根據(jù)自己的需要完成布局與樣式的編寫，以及按下面指示操作，就可以生成一個自己的空間定制。

第一次發(fā)項目，以供大家學習參考，可能有些簡陋，若有不合理處，請大神們指教。

最近在朋友圈出現(xiàn)了很多DIY類的H5游戲，通過添加拖拉擺放和組合元素，來DIY自定義一個場景并合成圖片分享出去的新H5展示形式。筆者也用操作DOM的形式做了一個類似項目，現(xiàn)在整合成一個簡易的框架分享給大家，只需要根據(jù)自己的需要完成布局與樣式的編寫，以及按下面指示操作，就可以生成一個自己的空間定制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           # node服務
├─  config.js           # 配置項目資源基礎(chǔ)路徑
├─  .babelrc            # babel配置
│
│
├─  src                 # 前端代碼
│    │
│    ├─ App.js               #  項目入口文件
│    ├─ index.html           #  首頁
│    ├─ data.js              #  圖片數(shù)據(jù)文件，由build-data-json.js生成，運行`npm run dev`或`npm run build`、`npm run build-json:prov`等命令即生成
│    ├─ css                  #  樣式文件夾
│    ├─ js                   #  腳本文件夾
│    ├─ media                #  背景音樂文件夾 
│    └─ img                  #  圖片文件夾
│
│
├─  utils               # 工具文件
│    │
│    └─ build-data-json.js   # 用于自動生成圖片數(shù)據(jù)文件，并復制打包圖片
│    
│
└  Demo                 # 案例文件

安裝依賴模塊：

npm install

預覽Demo示例：

node server.js

生成圖片data.js圖片數(shù)據(jù)文件：

npm run build-json:dev    # 開發(fā)環(huán)境
npm run build-json:prov   # 生產(chǎn)環(huán)境

生成打包文件：

npm run build

開發(fā)環(huán)境啟動本地服務：

npm start / npm run dev

項目由于需要按一定格式自動生成圖片json數(shù)據(jù)，用于項目預加載以及圖片拖拽元素的遍歷生成，而webpack打包圖片會打包處理文件，改變圖片的目錄結(jié)構(gòu)，沒法滿足這一要求，所以我自己封裝了方法來實現(xiàn)這個功能，即utils/build-data-json.js，可通過執(zhí)行npm run build-json命令來實現(xiàn)。(直到目前尚未找到相關(guān)的webpack plugin可以實現(xiàn)這一功能需求的，如果有知悉哪個插件可以實現(xiàn)的，還望不吝告之，非常感謝！！！)

這里圖片預加載和頁面中拖拽元素的圖片引用的路徑，都交給node去生成，要注意的是圖片文件的放置要按要求來，頁面UI界面相關(guān)的圖片請統(tǒng)一放在 img/ 文件夾的根目錄下，而選項圖片請分類放在不同文件夾中，并將這些分類文件夾放在 img/Assest 目錄里。這樣項目運行時會根據(jù)分類文件夾，以文件夾名自動生成對于的元素菜單選項，如下圖:

如果要修改選項名，可通過配置入口文件 src/App.js 的 App.init() 的 tabBtnNames 選項來實現(xiàn)，詳見初始化配置部分。

效果:

暫時只有選項名一項配置，后續(xù)將逐步更新其他的功能和配置選項，如果背景更換，元素是否可旋轉(zhuǎn)，縮放等等功能。

// App.js
const config = {
    tabBtnNames: { // 配置選項名
        "background": "背景",
        "Furniture": "家具",
        "Kid": "人物",
        "Cat": "貓",
        "Dog": "狗",
    },
    backgroundSetable: true, // 是否開啟背景設置, 默認值為false
    backgroundGroupName: "background", // 指定背景圖片的目錄名, 默認值為"background"
    rotatable: true, // 元素是否可旋轉(zhuǎn), 默認值為true
    scalable: true // 元素是否可縮放, 默認值為true
}
App.init(config)

項目案例中的圖片借用了相關(guān)H5的圖片，未做商用，若相關(guān)版權(quán)方覺得構(gòu)成侵權(quán)，請聯(lián)系我(QQ: 418291886)，可立馬刪除。