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

第一次發(fā)項(xiàng)目，以供大家學(xué)習(xí)參考，可能有些簡(jiǎn)陋，若有不合理處，請(qǐng)大神們指教。

最近在朋友圈出現(xiàn)了很多DIY類的H5游戲，通過(guò)添加拖拉擺放和組合元素，來(lái)DIY自定義一個(gè)場(chǎng)景并合成圖片分享出去的新H5展示形式。筆者也用操作DOM的形式做了一個(gè)類似項(xiàng)目，現(xiàn)在整合成一個(gè)簡(jiǎn)易的框架分享給大家，只需要根據(jù)自己的需要完成布局與樣式的編寫(xiě)，以及按下面指示操作，就可以生成一個(gè)自己的空間定制H5。

github地址：https://github.com/kilojq/cus...

├─  package.json        # 項(xiàng)目配置
├─  README.md           # 項(xiàng)目說(shuō)明
├─  node_modules        # npm依賴包
├─  webpack.base.js     # webpack配置文件
├─  webpack.dev.js      # webpack配置文件
├─  webpack.prov.js     # webpack配置文件
├─  server.js           # node服務(wù)
├─  config.js           # 配置項(xiàng)目資源基礎(chǔ)路徑
├─  .babelrc            # babel配置
│
│
├─  src                 # 前端代碼
│    │
│    ├─ App.js               #  項(xiàng)目入口文件
│    ├─ index.html           #  首頁(yè)
│    ├─ data.js              #  圖片數(shù)據(jù)文件，由build-data-json.js生成，運(yùn)行`npm run dev`或`npm run build`、`npm run build-json:prov`等命令即生成
│    ├─ css                  #  樣式文件夾
│    ├─ js                   #  腳本文件夾
│    ├─ media                #  背景音樂(lè)文件夾 
│    └─ img                  #  圖片文件夾
│
│
├─  utils               # 工具文件
│    │
│    └─ build-data-json.js   # 用于自動(dòng)生成圖片數(shù)據(jù)文件，并復(fù)制打包圖片
│    
│
└  Demo                 # 案例文件

安裝依賴模塊：

npm install

預(yù)覽Demo示例：

node server.js

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

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

生成打包文件：

npm run build

開(kāi)發(fā)環(huán)境啟動(dòng)本地服務(wù)：

npm start / npm run dev

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

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

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

效果:

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

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

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