組件化h5活動模板的實現

本文轉載自查看原文 2016-07-21 18:38 4494

需求：

　　實現一套靈活的活動組件模板，編輯人員只需要打開后台，拖拽相應組件，填入相應內容，最終就生成一個活動頁面。

因為涉及投票，評論，關注等功能（每個功能都當做一個組件），所以一個富文本編輯器是無法實現的。

生成的h5活動頁面，還有幾種環境：公司APP內，外部瀏覽器，微信&QQ內置瀏覽器。

幾種狀態：登錄，未登錄，游客狀態等（狀態具體內容不做解釋）。

兩個項目支持：

　　那么實現這一套，需要兩個項目，一個項目是活動模板編輯器，一個是前端展示h5頁面。

活動模板編輯器：

　　活動模板編輯器主要實現3個功能：各個組件，內容容器，生成json。

（1）組件：每個組件對應屬性，可以填寫相應內容

　　（2）內容容器：一個可視的容器，把上圖相應組件拖拽到內容容器中進行排版

　　（3）生成json：生成一個json，供h5獲取，根據相應規則展示。下面這個json是當前項目生成的。

這個json還不夠完善，給到h5的json需要經過后端處理，比如根據用戶的登錄狀態，會有不同的標示和狀態展示

[
    {
        "type": "user",
        "userId": 37907899,
        "avatar": "/male.png",
        "author": "蒲xx",
    },
    {
        "type": "title",
        "title": "這是一個有所有組件的測試活動"
    },
    {
        "type": "tag",
        "items": [
            {
                "id": 0,
                "name": "標簽"
            }
        ]
    },
    {
        "type": "title",
        "text": "測個試",
        "id": 1467788578568
    },
    {
        "type": "content",
        "text": "那么我們就來做個測試，你喜歡哪個？",
        "id": 1467788579375
    },
    {
        "type": "user",
        "userId": "10001280",
        "id": 1467788578375,
        "avatar": "/avatar/141153987724884.jpg",
        "author": "張師",
        "isFollow": false
    },
    {
        "type": "vote",
        "title": "你喜歡吃什么程序員",
        "voteId": 1,
        "items": [
            {
                "itemId": 1,
                "name": "大衛"
            },
            {
                "itemId": 2,
                "name": "飛狐"
            },
            {
                "itemId": 3,
                "name": "菜鍋"
            },
            {
                "itemId": 4,
                "name": "狼笛生"
            },
            {
                "itemId": 5,
                "name": "子慕"
            }
        ],
        "id": 1467788580095
    },
    {
        "type": "image",
        "name": "默認圖片",
        "src": "/FvZvDcUNHGUxZoC5hKuHBdJstWyD",
        "id": 1467788581943
    }
       
]

　　好，這個項目說完了，反正不是我做的。哈哈。

前端h5展示實現：

　　該我出場了，目前我們知道，我們獲取的大致數據格式了。但是這些我都先不管。

　　我需要實現這個項目的流程如下：

　　　　1. 新建項目，划分好功能和項目結構

　　　　2. 實現各個組件的展示和交互

　　　　3. 打開一個入口文件，引入所有組件。

　　　　4. 入口文件中獲取json，根據type的內容找到相應組件，載入頁面，渲染。

　　（1）新建項目，划分好功能和項目結構：

　　　　這里主要是寫好一個入口文件，新建一個組件文件夾里面寫所有組件，最終通過requirejs在入口文件把所有組件引用進來。

　　　　組件結構如下:

　　（2）具體組件實現跳過不說

　　（3）當組件寫好，在入口index中引入，大致如下：

define([

    //content
    'CommonPath/content/en.content',
    'CommonPath/content/mod.content',

    //title
    'CommonPath/title/en.title',
    'CommonPath/title/mod.title',

    //user
    'CommonPath/user/en.user',
    'CommonPath/user/mod.user',

], function (

    //Content
    ContentEntity,
    ContentMod,

    //title
    TitleEntity,
    TitleMod,

    //user
    UserEntity,
    UserMod
  
) {
    //index code...

})

　　（4）通過接口，我們獲取到json，對json進行處理。

　　　　　大致處理代碼如下：

var map = {
    title: [TitleMod, TitleEntity],
    user: [UserMod, UserEntity],
    content: [ContentMod, ContentEntity]
 };

 for(var i = 0, len = this.data.content.length; i < len; i++) {
    item = this.data.content[i];
    if(map[item.type]) {
        var entity = new map[item.type][1]({
                               data: this.data.content[i]
                           })
        var mod = new map[item.type][0]({
              view: this,
              entity: entity
        });
        mod.render();
    }
}