一個簡易的DIY場景H5框架

第一次發項目，以供你們學習參考，可能有些簡陋，如有不合理處，請大神們指教。

最近在朋友圈出現了不少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           # node服務
├─  config.js           # 配置項目資源基礎路徑
├─  .babelrc            # babel配置
│
│
├─  src                 # 前端代碼
│    │
│    ├─ App.js               #  項目入口文件
│    ├─ index.html           #  首頁
│    ├─ data.js              #  圖片數據文件，由build-data-json.js生成，運行`npm run dev`或`npm run build`、`npm run build-json:prov`等命令即生成
│    ├─ css                  #  樣式文件夾
│    ├─ js                   #  腳本文件夾
│    ├─ media                #  背景音樂文件夾 
│    └─ img                  #  圖片文件夾
│
│
├─  utils               # 工具文件
│    │
│    └─ build-data-json.js   # 用於自動生成圖片數據文件，並複製打包圖片
│    
│
└  Demo                 # 案例文件

運行

安裝依賴模塊：

npm install

預覽Demo示例：

node server.js

生成圖片data.js圖片數據文件：

npm run build-json:dev    # 開發環境
npm run build-json:prov   # 生產環境

生成打包文件：

npm run build

開發環境啓動本地服務：

npm start / npm run dev

說明

項目因爲須要按必定格式自動生成圖片json數據，用於項目預加載以及圖片拖拽元素的遍歷生成，而webpack打包圖片會打包處理文件，改變圖片的目錄結構，無法知足這一要求，因此我本身封裝了方法來實現這個功能，即utils/build-data-json.js，可經過執行npm run build-json命令來實現。(直到目前還沒有找到相關的webpack plugin能夠實現這一功能需求的，若是有知悉哪一個插件能夠實現的，還望不吝告之，很是感謝！！！)

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

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

效果:

初始化配置

暫時只有選項名一項配置，後續將逐步更新其餘的功能和配置選項，若是背景更換，元素是否可旋轉，縮放等等功能。

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

截圖

最後

項目案例中的圖片借用了相關H5的圖片，未作商用，若相關版權方以爲構成侵權，請聯繫我(QQ: 418291886)，可立馬刪除。